Bit Depth & How Compression Affects Normal Maps

For a complete intro to modeling and baking for games, check out the full course: cgcookie.com/course/intro-to-...
While working on my course about baking normal maps in Blender, I came across one type of artifact that stumped me up until last week. This artifact looks like what should be a flat surface is shattered into little glitchy shards.
The first clue to the problem is that I can hardly see the artifacts in Blender, but they are extremely obvious in Unity. That means that the issue has to be with how the maps are being exported or imported. I’ll save you the detective work though, and cut straight to the chase:
Bit depth and compression play a huge role in how your normal maps look in any game or render engine.

[@alaminabdullah7770]

Thank for this video,I have been looking everywhere!

[@esk6a]

Very Useful! Thank you!

[@kebrus]

Two things: First, it's not the image that can only hold 256 colors for 8-bit, 65k for 16bit and etc. It's the CHANNELS of the image, so when you are using a 8-bit image you are saying you want to use 8-bit for each channel. Second, the end part is really bad, no one should have to edit the normal map by hand to fix a problem, granted, some issues a just easier to get rid of by hand, but that should give you a hint that your process has some problem at some point. In your case is the conversion. The dither effect should only kick in when you want to blend different values together but there isn't enough precision to do so, if you try to blend two exact values together there should be not dithering happening, because any dithering would use those two values values, and since they are the same the result should be smooth. If your maps are getting dithered in flat surfaces that's either a problem of the baking creating slightly different values (which I highly doubt it) or the problem of the dithering algorithm applied. So I'm pretty sure one of those two is dithering your results in the flat area. Note: I'm not saying you should not see any dithering, I'm saying you should only see dithering in places the values change (corners, curves, etc) not in flat surfaces. which means that last part in photoshop is completely pointless. EDIT: only now I noticed you are using cycles, maybe it's cycles that is creating the different values, need to investigate further EDIT2: why didn't you use the exr files directly in Unity anyway? unity supports linear textures

[@GothM2]

100% agree with the second conclusion. I still wonder why he did not use exr files directly in Unity.

[@jonlampel]

Hey, thanks for the in-depth feedback! You're right about the bits being per channel instead of per image. I think that the different values on what should be flat surfaces come from using a cage, which is crucial to getting good corners, but it's really unlikely that every single face will be totally parallel to the corresponding low poly face, so some minor deviations occur. They're not noticeable until compression, when those minor deviations become larger deviations due to rounding. I go with 8 bit PNG images for Unity since everything you throw at it will be converted automatically to 8 bit anyway, and in my experience it doesn't do a great job of that conversion.

[@daniel4647]

Once you save an exr you'll notice that it holds a lot of information, it holds fog data, depth of field, every single pixel has a light value like an HDR image and so on, they quickly get into the hundreds of megabyte size, not really useable for games except maybe for a skydome or something. They're really nice if you need all that data for post-processing, but it serves no useful purpose in a game that I can think off.

[@ruivoalemao]

Maybe he did not use EXR because its 12MB and the PNG is 4MB. You can see it in 4:21 when he move his mouse over the files. I'm not sure, but thats my theory.

[@GothM2]

TIFF and TGA, are the formats for games, not PNG.

[@RomboutVersluijs]

DOwnside with OpenEXR is that it adds a certain color profile. Opening this in for example photoshop results in color shift. Does this happen with Cycles as well? Its better to use 24bit PNG those dont have the dithering issue at all. Buts its quite weird, that dithering normally only shows when you use 8bit webexport 2 PNG. Also saving out the 24bit through 'save for web', makes the png 10x smaller is some tests i did

[@Airsoft92]

Thank you man, really helped me understanding my problem. Thank you so much You gain a follower + like

[@UnauthorizedExpression]

Excellent so now your game's going to be 20 terabytes of which 98% of that will be normal maps. ;-) I saw the part where you fix that.

[@TheBypasser]

Anyway, what is preferable for normals then, a plain 3-channel PNG - or BC6H? I use an external heightmap for raytracer which I don't really feel like adding as an alpha for the reason of cache continuity (and a requirement to merge it externally instead of just baking the whole set in MAX full-auto), so alpha is missing anyway - yet having a whole of 15 megs of normals (20 MB normal/offset 4096x4096 map pair) feels strange. Wonder if BC6H will cause a perf loss though...

[@aonozan]

On Blender manual it is suggested that baking normal maps in "non-color" space is way to go. Is sRGB workflow only because it needs to be opened in photoshop? docs.blender.org/manual/en/dev/render/post_process/color_management.html

[@sanketvaria9734]

Ok few questions. What if i have made normal map entirely in photoshop? should be starting the document as 32 bit? should i be saving it to targa 32 bit? Jpg is giving those artifacts also in unreal engine 4.

[@danylbekhoucha6180]

Thank you for the video. I hope Blender will soon save with dithering when reducing the bit depth to be able to save directly in tga 8 bits a 32 bit Float image. Currently having to buy photoshop just for that is bad. :( Also dithering is very good for pixel art effects with low color depth.

[@VertegrezNox]

I was going to say, its possible to use Gimp for many "PS Only features", but this was already recommended ^_^

[@unfa00]

I was hoping you can show how to fix this problem in Blender, not with Photoshop...

[@SoPeLpc]

IDK but in my case nothing has changed. Any idea why?

[@unfa00]

I can't get over the fact that Blender bakes such poor normal maps. Every time I tell to use it to bake them I have to spend extra time fixing it in GIMP afterwards. I hope the Blender team can fix this...

[@kenonerboy]

couldnt you just enable dithering in the rendering tab? you can move the slider up to "2".

[@cekconi1773]

Why does this problem occur, I face this problem when I buy normal map bake, but I asked other people I know, no one has this problem

[@KevinSmith-qi5yn]

Isn't png a compressible format? It compresses an uncompressed image, than uncompressed it on file open. I always thought it was easier to work with a straight uncompressed format like .tif or .tga

[@XuryGreer]

For most uses yes, but if you used formats like .tif or .tga the end user's computer won't have to decode the textures in order to display them, which speeds up loading textures. Also for textures where alpha channels are important, you can't use a .png since .pngs don't have a true alpha channel that Unity can read.

[@JoanVetulani]

.pngs are completely fine with alpha in Unity. You save a .png in Gimp with four channels (remember to remove all other layers, you leave only the single layer with a mask that you want to save), it keeps the RGB intact and keeps a mask in the Alpha channel. Unity reads it correctly, and there's no weird artefacts on the outlines. I've done hundreds of transparent images as .png for use in Unity and other engines, also used all four channels correctly in shader forge and others. It used to be a failure of Photoshop, that it couldn't save out .pngs properly with the alpha channel, but even with CS2 you could go around it by downloading a proper .png exporter library.

[@xrx2023]

can we get an update for this?

[@cekconi1773]

👍👍👍

[@robertmccoy7722]

Hey you properly used affects!

[@renzocoppola4664]

you missed the essential part that you must compress normal maps before shipping

[@renzocoppola4664]

some compression formats are going to get rid of dithering

[@ColegaBill]

I sort of like the jpeg look.

[@rossknowles5608]

ludicrous

[@cubic_game_art]

Какая у тебя версия программы?

[@soundsbeard]

ты серьёзно считаешь, что кто-то из авторов обратит внимание на русский комент? ты здоров? отвечая на твой вопрос - открой список всех видео cgcookie, посмотри сколько лет они уже пилят уроки, посмотри на уровень исполнения уроков, и наверное всё таки они используют последнюю стабильную версию блендера. по крайней мере это было бы логично.

[@cubic_game_art]

Отвечали мне трижды, хотя писал я на русском.