Kitty Corp Meow Mix Forums

Super Smash Bros. Brawl Hacking => Programming => Topic started by: DarkPikachu on March 19, 2019, 09:12:57 AM



Title: Explaining emissive mapping and TEVs
Post by: DarkPikachu on March 19, 2019, 09:12:57 AM
Decided to come out of my hole on Smashboards and make a quick guide towards dealing with emissive maps.

Now note, I'm by no means an expert on TEVs (I refuse to call them shaders, because that's not what they are)
in fact, I'm really only just learning about them...
Really all I'm doing here is just basic mapping which is very easy.
Harder stuff like bloom, while possible, I'm not sure how to do.

Just recently I released a new version of my signature hack Dark Pikachu version 4.6 (https://forums.kc-mm.com/Gallery/BrawlView.php?Number=217482) which makes use of a fake (constant color Intensity) emissive map to achieve this without a memory overflow:
(https://ipfs.io/ipfs/QmeuoVd2bsai34x1sjwRE8vtjRB3omT87zM4qYawWTrFnk?filename=al_190318_0454.jpg)

basically how this fake map works exactly is you have the emissive map:
(https://ipfs.io/ipfs/Qme7gDaTPzZudAeeZ4qH5Kd8HAeqdPKFYkJ8tLtqK226oJ?filename=Pikachu_main_glow_i.png)
and the color you want it to show in the material's Constant Color 2 (basically the image functions as an alpha channel for this color)
(https://ipfs.io/ipfs/QmQAdKeJ3prtfrEQqLhakZGYHTiqNaUHmvuydABAwZmwVf?filename=image(8).png)
note that Constant Color 2 is delegated by the TEV stage applying the emissive map (stage1 in this case)
in order: stage0 | stage1 | stage2 | stage3
(https://ipfs.io/ipfs/QmeTgW6e5mrMJDx2WGZfjDf9N8gpH2RJYFCnak66gq5mcQ?filename=new_TEV0.png) (https://ipfs.io/ipfs/QmeTgW6e5mrMJDx2WGZfjDf9N8gpH2RJYFCnak66gq5mcQ?filename=new_TEV0.png)
note that stage1 was added and is completely custom

it takes the output from stage0, adds Constant Color 2 * TextureColor, and clamps the result
stage0 just applies shading to the diffuse map (untouched from the original TEV)
stages 2 and 3 are for finalization (also untouched) (not too sure how they work)

now if you want to use a REAL emissive map like this:
(https://ipfs.io/ipfs/QmRSzFontEDg57EferEZC3TD125gnpqMhXvPLNFNNTsc7f?filename=Pikachu_main_glow.png)
all you need to do is change B and C of stage1 to multiply the TextureColor by the TextureAlpha: (rather than the Constant Color by the TextureColor like the fake one does)
(https://ipfs.io/ipfs/Qmb8X3BpFaJdgPqeAwr57NfhDM5tsQEyXkez99zkXx6bRJ?filename=new_TEV0_real.png) (https://ipfs.io/ipfs/Qmb8X3BpFaJdgPqeAwr57NfhDM5tsQEyXkez99zkXx6bRJ?filename=new_TEV0_real.png)

I couldn't use a real emissive map at original quality because it would cause a memory overflow causing the Wii to freeze,
but I WAS able to get it working by downscaling the emissive maps by 50%
but here I thought the scaling would automatically apply the size difference and upscale...
I ended up being wrong, and as such, the emissive map is repeated here:
(https://ipfs.io/ipfs/QmYAN8Y8XPwUuQvkh6WKGpVanFsEGgjT1yWC7gXyJRMLuR?filename=al_190318_1501.jpg)
at least it works like it's supposed to :P

now note the entire image is green (including the transparent parts), so it looks no different from the fake version
but that's where the similarities stop as the fake version can't mix colors.

if you still need a little extra info as to how TEVs actually work, basically they just iterate over each stage in order and apply the equation noted in the Output Function.

here's a rough mock-up I did to help me understand Pikachu's TEV0:
(https://ipfs.io/ipfs/QmXWeopanCbchKtLKjLprLfXpkEAujzvu7G8AD913CiUSd?filename=image.png) (https://ipfs.io/ipfs/QmXWeopanCbchKtLKjLprLfXpkEAujzvu7G8AD913CiUSd?filename=image.png)
note that the values supplied below the stage() function are just best guess values for testing
there's other stuff that could be done to it, such as comparison operations, but I never really needed that

so note that OutputColor is treated as a register with a default value of 0.0
Python doesn't inherently support vectors, let alone vector maths, so this was really all I could do without writing a complex vector class.
but the operations are still the same as what I have above:
(0,1,2) + (3,4,5) = (3,5,7)
(0,1,2) * 2 = (0,2,4)

for even more detailed information, you can follow BlackJax96's old notes here:
https://forums.kc-mm.com/index.php?topic=39649.msg801235#msg801235

hopefully this helps shed some detail on a topic that's not so well covered :)

EDIT: Update!
HOOOOO BOY this one took some real effort to get working:
(https://ipfs.io/ipfs/QmbA6fsTbnhgv6BJLupbyc8bh3mYcdsMBULhSs1L1jyA3w?filename=al_190320_2237.jpg)(https://ipfs.io/ipfs/QmWAfuyPo4jX35HEjXwD4bSzbSB1VVQaCJ8gStxkLJnSjD?filename=al_190320_2238.jpg)
(https://ipfs.io/ipfs/QmYBfpip63vzztJEEarFFT12bKxWaEzCvxsXCXK2DB14Wu?filename=Pikachu_eyes_glow_signed.png)

so for the main texture, in order to optimize it AND make it look good, I had to separate the RGB and A channels
how I did that was a CMPR image for the RGB, and an IA4 image for the alpha:
(https://ipfs.io/ipfs/Qmd4hdC3YBVnetM78aU9vWyxjzjhidsv2aNRgwruXxB2R4?filename=Pikachu_main_RGB.png)RGB + (https://ipfs.io/ipfs/QmSYK8tsfJEkShrkuNAK1KzNFztoWTo1zdwPnzGzhzhv3w?filename=Pikachu_main_A_export.png)A = (https://ipfs.io/ipfs/QmTRSbfioi78rGmCVexJmqtjNkWiZCTrykVDJwoNp9sYvs?filename=Pika_optimized_tail.png)
and then of course overlay the RGB5A3 emissive texture to achieve the glow

the reason I used CMPR+IA4 instead of RGB5A3 is because of the bit difference on alpha
RGB4A3 only has 8 shades of alpha
IA4 has 16 shades of alpha
and of course
CMPR only has 2 shades of alpha (GIF quality alpha)

so with CMPR I actually get ~RGB565 quality with a smaller data print
add 16 shades of alpha to that and the reduced quality is almost unnoticable

as a result of this, I had to write a separate TEV to merge the channels AND overlay the emission:
(https://ipfs.io/ipfs/QmSfy5QFR5Ur3X379EGWhFECVkY5e8V1FKejrZQBNPcYVt?filename=modified_TEVs.png)
TEV0 is the original emissive TEV from the full RGBA8 version
TEV3 is the new version that references the alpha map in stage0, and applies it to the RGB map in stage1 before adding the emissive map in stage2 with the finalizations in stages 3 and 4

the material layout also adds the alpha map as a texture slot:
(https://ipfs.io/ipfs/QmRTWT7FEesnj5dntcL78sxkpUTSmsMH4NkAmrsVYrrMKk?filename=modified_material.png)
so yeah stage0 references TexMap2, stage1 -> TexMap0, stage2 -> TexMap1
(I wanted to keep compatibility so I wouldn't have to touch the emissive stage)

so yeah, REAL emissive map fully working in Brawl
here's the hack btw if anyone wants to play with it:
https://mega.nz/#!M0ASkSAa!Vj5T4I3A92uG5XGFTj3yoQ3TKEw3L7rX7eP7JLyQwQo (https://mega.nz/#!M0ASkSAa!Vj5T4I3A92uG5XGFTj3yoQ3TKEw3L7rX7eP7JLyQwQo)
as well as the full quality version:
https://mega.nz/#!l4ZnzAQA!cHOYoJ2f-dUDa9fEkeiqY-k2jlL8f4ON7YXp-Zb1yPM (https://mega.nz/#!l4ZnzAQA!cHOYoJ2f-dUDa9fEkeiqY-k2jlL8f4ON7YXp-Zb1yPM)
and the fake version:
https://mega.nz/#!Y9gjzKab!rVwEL5KIXDFUrUEwEIZCx9rLZotL81A67Ce_sMtHmJs (https://mega.nz/#!Y9gjzKab!rVwEL5KIXDFUrUEwEIZCx9rLZotL81A67Ce_sMtHmJs)
hopefully these serve as some good examples to help you guys get a feel for TEVs ;)


Title: Re: Explaining emissive mapping and TEVs
Post by: windhunter7 on March 19, 2019, 09:20:49 AM
As always, you continue to impress! :D


Title: Re: Explaining emissive mapping and TEVs
Post by: DarkPikachu on March 19, 2019, 07:27:52 PM
just wanted to give a spoiler
I'm working on another revision for a real emissive map that actually works on the wii
will update the OP with the results once they work. ;)

specs and current results:
I've had to lower the quality of the textures to reduce the file size greatly
though visual quality is still maintained

Pikachu_main:
from: 256x256 RGBA8 262208B
to: 256x256 CMPR 32832B + 256x256 IA4 65600B = 98432B

Pikachu_main_glow:
from: 256x256 RGBA8 262208B
to: 256x256 RGB5A3 131136B

Pikachu_eyes_glow:
from: 256x256 RGBA8 262208B
to: 256x256 RGB5A3 131136B

saved: 425920B

notes on formats
CMPR by itself only has 1 shade of alpha
I wanted to use I4 for the alpha format, but I can't seem to map color as alpha (if anyone knows a method, please tell me)

for alpha gradient:
RGB4A3 has 8 shades of alpha, which isn't a big deal considering they're glow textures
IA4 has 16 shades of alpha, which really looks good on the tail

but I'm a noob and screwed something up while merging the images in the TEV, and this happened:
(yes I had to duplicate the TEV and add another stage before everything)
(https://ipfs.io/ipfs/QmSvbqWjHSVBBx2N5D8ShHpG2esHTZkAKCbJr38xPAfDMA?filename=al_190319_2049.jpg)
lol yes I signed the cheek to prove it's a real emissive map X3

you can kinda see a few glitchy polygons for the body as well
I had my hopes up for this first test and they let me down (works in BrawlBox)
but of course, I am a noob so :P

I don't blame you if you don't want to see ;D


Title: Re: Explaining emissive mapping and TEVs
Post by: ShadowSlyIX on March 19, 2019, 07:34:18 PM
This is going to be extremely useful to people who have UV maps that have emissive sections. I'm putting this in my tutorial folder in my book marks in case if i forget. Though i hope one day you will get the bloom to work.


Title: Re: Explaining emissive mapping and TEVs
Post by: DarkPikachu on June 21, 2019, 05:40:19 AM
So apparently there was an issue where the word "l o s s" in my previous post was replaced by this comic:
(https://i0.kym-cdn.com/photos/images/newsfeed/000/143/193/cad-20080602-358b1.jpg?1309710446)

While funny, I was left confused when my friend informed me because the comic didn't appear for me...
I had to log out or use Opera's private window to be able to see it.

The issue should be fixed now as I modified the previous post to state "reduced quality" instead of "quality l o s s".

EDIT: wow not even surrounding the word with text fixes the issue.