Anatomy of a Normal Map : What's Inside and What It Means

Join the Discord server : / discord
Throw a buck in the tip jar : gum.co/MEaCQ
Enhanced MOP Boolean Assembly : gumroad.com/l/YuHJW
This is NOT a baking tutorial. This is a deep dive into what a normal map IS, what it's good for, what it's NOT good for, and what the internals look like.
I always find it valuable to have some idea what's going on under the hood with my daily work. It helps you debug problems and helps you get things done in a more efficient way because you know WHAT you're generating and, more importantly, WHY.
Let's talk about vertex normals, normal map textures, color channels, math, and flipping the green channel!
So come along - let's rip open a normal map and talk about what's in there...
---
Hi! I'm Warren Marshall!
I'm a freelance, hard surface 3D artist living in North Carolina. I specialize in hard surface work but I can do pretty much anything from environments to props.
I worked at Epic Games for over 15 years and started freelancing after that. Since then I've done prop and environment work for some fun projects, including We Happy Few from Compulsion Games and PlayerUnknown's Battlegrounds. I've also done a bunch of asset packs for the various marketplaces.
I have experience with Unreal Engine 4 and Unity and know how to put assets together quickly that look good in those engines.
Here's a link to my Art Station page where you can see a bunch of my latest work:
www.artstation.com/artist/war...
Visit my main web site here :
www.warrenmarshall.biz
You can email me directly if you'd like :
[e-mail]
Questions, business inquiries, support - or just to say hi!
---
Motion Graphics : Skye Nelson, aka "SkyeShark" ( skyeshark.artstation.com )

[@mashonoid]

Dude you deserve an award. I didnt even realise that i just watched a 20 min video on normal maps. You literally cleared everything I was wondering about normal maps. Thank you soo much.

[@WarrenMarshallBiz]

You're most welcome!

[@alexliam9786]

pro tip : watch movies on flixzone. Me and my gf have been using them for watching all kinds of movies recently.

[@eloneverett4318]

@Alex Liam yup, I have been watching on flixzone for since december myself :)

[@karanpratapsingh5022]

This is easily the most practical explanation of Normal Mapping for game art! A similar tutorial covering Parallax Occlusion mapping and Tesselation from a game art perspective would be a great addition to your channel. Thanks for the great tutorials as always! P.S. Glad that you didn't go off on that Tangent and stayed in MikkTSpace at 3:09, ha ha

[@turkeywildman3871]

Been looking for this explaination of the normal map's color channels, thank you from the future!

[@atkaygee]

These high-level overviews are brilliants, particularly for beginners. I wish there was more content out there that explained the "why" behind the environment art workflow instead of focusing on the "what" (the software) and the "how" (which buttons do I press). Awesome stuff Warren, thank you!

[@WarrenMarshallBiz]

I really wish I had seen a video like this one when I was learning this stuff. I like knowing what's going on behind the curtain ...

[@jimhinkle7245]

DANG!!!! FINALLY I understand a normal!!! Thank You!!!

[@WarrenMarshallBiz]

You're welcome! Have fun. :)

[@ackmaster8050]

OH SHIT BRO! i haven't seen your mug in a long time! glad your doing this still. i love this!

You can see Warren's dedication on teaching us when you realize he changed his Photoshop default document settings to show the channels in color. 🙃

[@WarrenMarshallBiz]

Hahaha, totally forgot that I even turned that on! I find it useful tho ...

[@hamyncheese]

Now I can't sleep not knowing what the Blue Channel does. Why are you doing this to us!?!?

[@WarrenMarshallBiz]

Haha ... Well, I don't think I'm knowledgeable enough to talk about it to be honest. I never use it for anything!

[@rattenschwanz-filmundfotog693]

Very Nice Video. I can now understand so much more whats going on in the process of creating a normal.

[@Mikeygrecordings]

Came from your video on texel density. Really really valuable stuff. Always learning and you're a great teacher. Looking forward to going through your back catalogue of videos. Hope to see you back sometime. Thanks man

[@Smoluck]

Excellent video Warren. Well done humorously as well precise !

[@bennie.379]

FANTASTIC explanation on the topic!

[@re-i-fu]

Thank you very much for the video Warren, great stuff and very clear :)

[@KC-nf7ly]

Amazing stuff Warren! The finer details and the “why?” behind normals are really not talked about all that much, this clears up some of the mystery surrounding it all, I really appreciate your explanation! Cheers

[@WarrenMarshallBiz]

Glad it helped. :)

[@tulextreme]

Sensacional. i knew most of this but having NM explained this way is soooo refreshing! thank you for the vid Marshall!

[@Imissmaggie]

Brilliant, well done.

[@voytechj]

normal maps as a form of geometry compression is a great idea. People has two eyes and depth can be recognized up to a couple of meters (maybe more) but an eye has hundreds of millions of rods and cones so lighting has very important contribution for detecting depth of a surface. Normals are used for calculating lighting and every mesh have vertices composed with positions and normals together. We can flatten small surface that has a small dips and heights, and stereoscopic vision will not make much different, but when we change normals then change of luminosity of a surface will be detected very easy. So, we can remove a lots of positions (float XYZ->12bytes for each position) but need to keep normals. It can't be done in a geometry mesh because in graphics cards positions and normals are bind together, so we store normal vectors in a picture and we use texturing. That really is a form of a compression. Btw. flipping green channel has nothing to do with graphics library (OpenGL, Direct3d). Algorithm for calculation normal vector from a normal texture is implemented in pixel shader, some engines or 3d modelers have different implementation. From a mathematical point of view normal vectors in normal maps can be in right-handed or left-handed space. If something is wrong with lighting you can flip Green channel or change a pixel shader.

[@WarrenMarshallBiz]

Thanks for the detailed comment! "flipping green channel has nothing to do with graphics library" Literally, that's correct. But it's easier to understand for most artists to put it in OpenGL/Direct3D terms. They don't write shaders, they just bake maps. :)

[@leatherandpoemscharmyman5774]

you gained a like button Warren as usual. thanks for knowledge I learned by the force some of the stuff you mentioned.

[@SirAugie]

This is really Great info! Thanks Warren!

[@WarrenMarshallBiz]

Thanks Ed! Good to see your name, it's been too long!

[@greggjohnson621]

Great description! This is extremely helpful. Thanks so much.

[@WarrenMarshallBiz]

Thanks Gregg! :)

[@Flavio_Mark]

This is the best piece of information I’ve ever got about normal maps! And I even didn’t knew I needed it.Thank you so much, Warren!

[@WarrenMarshallBiz]

That's high praise, thanks man! :)

[@Flavio_Mark]

@@WarrenMarshallBiz You're more than welcome! Keep the videos coming!

[@patriotaRBC]

Amazing. Thank you very much for you time and dedication.

[@DarrenLGoldsmith]

Ah, this is great! Thanks, Warren!

[@Kingstantin]

Thank you man!

[@Pegisus2501]

This was very helpful! 😊 Thank you for doing this tutorial. 😀👍🏽🖥

[@gadzooks12]

Thank you Warren! Very informative as always!

[@WarrenMarshallBiz]

Thanks Kenny!

[@Wozner]

I`m glad, that you keep doing videos on KZbin, I remember some months ago you said, that you stop making videos on tube.

[@WarrenMarshallBiz]

No, I plan to make the YT channel a part of my "thing" for the foreseeable future. Look forward to more content!

[@davidperyman]

Love your videos!

[@ZsoltVajda]

Now it all makes sense! Great video! Was confused how those linear gradients on the screws would translate into a dome-like shape (was still thinking in bump maps), but the demonstration with the angles made it all click, Thanks!

[@WarrenMarshallBiz]

Yeah, it's freaky but once you understand what the colors are doing it actually makes a lot of sense. Thanks for the comment!

[@user-he1ss4gz8v]

Subscribed! Lucky me! Thank you Warren!

[@WarrenMarshallBiz]

Thanks for the sub! :)

[@fouadhoblos3611]

Great explanation!

[@codewithdarsa]

Really helpful information here, thanks for the video!

[@WarrenMarshallBiz]

Glad you liked it!

[@avian980]

It is really important to understand this, so thank you it is much appreciated

[@WarrenMarshallBiz]

You're welcome! It took me awhile to learn this stuff so if I can speed things along for other people, I'm happy...

[@avian980]

@@WarrenMarshallBiz A true master , I am learning and enjoying at the same time. Thank you :)

[@PehsA]

Hey Warren! Great video as always. It's very informative so thank you :) As you mentioned you may make another video about normals, I'd like to give some topics. -Edge thickness -Sloped extrusions -Intersecting geometry -Hard edges, UVs -Waviness on cylindrical shapes. -Skewing I know some of the ways to work on them and avoid problems but as you say, 3d artist should know the working mechanism behind these, so I'd like to listen from you.

[@WarrenMarshallBiz]

Solid suggestions, thanks!

[@egemen3d-tech89]

Thank you Warren ! ;)

[@Hotrood999]

18:16 As Jason Stokes from Futurepoly says: Green Grass grows from the bottom, Red light comes from the right Pretty catchy Great video!

[@WarrenMarshallBiz]

Haha, catchy. Thanks!

[@joaovitors.s9643]

Thank you so much

[@repositorytutorial3d50]

great content! thanks! I have an additional technical question, is there any commercial software or free software that would allow us to split high frequency details from low frequency details, or renormalize a normal map that we might have modified manually on photohop?

[@cinematicfilm6559]

wow nice channel from guy who actually worked at Epic. Great.

[@WarrenMarshallBiz]

:) Hope you like it!

[@_MaZTeR_]

Is there a definitive way of telling if your normal is correct for which ever renderer you're using (say, for OpenGL on Blender?), like say when you press the green channel in Photoshop, there's a stat that says Y is up or down. Sometimes the textures are a mess that it's hard to tell just by looking at it where the texture is attempting to create a shadow and which side is lit up.

[@hauntedshadowslegacy2826]

(checks out program online) (sees price) (chokes)

[@WarrenMarshallBiz]

If you mean MODO ... well, it's a hell of a lot cheaper than Max or Maya. :) If it's still too much, there's always Blender ...

[@kloworks]

I watch your video about "Anatomy of a Normal Map" even I already know about normal map its nice to have more info about it. I wish you continue with part 2 . like what it mean by Sync, and what is MikktSpace. common mistake between unreal and unity. unreal use pixel shader and unity use vertex shader. so in substance painter u need to check compute tangent for unreal uncheck for unity, why ? so these may help alot of artist to solve alot of problems. like another think that until now I don't get it why when you export fbx you need to unchecked the tangents and binormals . these if got explained in next video I will be really happy and that mean I understand all about Normal map . cheer

[@WarrenMarshallBiz]

Good suggestions but to be honest, those topics aren't really my area of expertise. I get the job done but I can't really explain what sync is what tangent/binormal/bbq stuff does. I'm just a simple artist. :)

[@RobotJeeg]

Well done. It took me months to understand all of that when normals were introduced centuries ago. I often rip 3d models from games...I know i know, I shouldn't do it but it's like an hobby, I don't share the models so nobody can be upset. Well in these years I found lots of strange normalmaps! Some normalmaps are totally greenish (almost brown). Some are totally pinkish. Every game engine seems to like a specific normalmap type instead of using the classic ones. Usually they just have swapped channels, or totally black blue channel or everything mess up! Strange.

[@WarrenMarshallBiz]

Interesting! Yeah, I think that's the same with most game engines ... particularly internal ones ... they get customized really hard towards whatever they need for their game, and outside world be damned. :)

[@voytechj]

sometimes normalmaps don't store Z component, because normals by definition have length 1 and Z can be calculated from X and Y in the shader program (z = sqrt(1 - x*x - y*y)). Blue and Alpha channels can be used for different types of maps (specular, bump, etc.), or Red and Green can store 16-bit X value and Blue and Alpha 16-bit Y value. Another reason for not-bluish colour are when normals are stored in object space, when they can have any direction (X,Y,Z -> [-1...+1]). Bluish colours are mostly normals in tangent-space when X,Y -> [-1..1] but Z -> [0..1]

[@mariomanganelli2607]

Very informative. Thanks Warren! ...isn’t the blue channel pretty much equal to the bump map?

[@WarrenMarshallBiz]

I've never consciously used it for anything so I can't say for sure. But maybe! :)

[@voytechj]

no, its not. For example small flat area with high elevation and another with lower elevation will have exactly the same colour or same normal vector pointing up. Blue values are just normal vector's Z component.

[@1981danielmn]

thanks for always putting out great content, did I just see you will be at siggraph? Would love to shake your hand and buy you a beer if I get the chance.

[@WarrenMarshallBiz]

I will be at Siggraph 2019, yes! I'll be doing a small talk for the Foundry...

[@serefatilla]

So if the blue channel on normal map is always 255 (in most of the cases at least), is there a way that we can store some other info in it such as transparency? Then in the render engine we can just take R and G channels and mix them with solid blue and use it as a normal value. We usually do similar thing by combining roughness metallic and occlusion in a single texture. All for reducing the memory by using less maps.

[@WarrenMarshallBiz]

That's usually the first thing most artists think of but your graphics programmers will strike you down because apparently it messes up compression and makes things more inefficient in the end. :)

[@serefatilla]

@@WarrenMarshallBiz Oh, I guess we, artists, should not jump in and try to add our masks everywhere :) Thank you for the insight. The video was very helpful indeed.

[@darkobakula5190]

I'd like to add a little something to this video which maybe I missed since I was skipping over the video but I'll write it anyways. The normal map stores all of the changes in surface normals between Hipoly and Lowpoly. It stores them as unit vectors where X and Y components range from -1 to 1, Z component ranges from 0 to .1. What every baker does is, it encodes those values into RGB space where the values are transformed from 0 - 255. After transform RG values of 0 represent -1 and values of 1 represent 255 except in the case of B channel. This is quite important to know when you are overlaying normals in a compositor, Image Editor or you are making your own material to overlay normals.

[@proflindenbrook]

First, thanks for the vid

[@unfa00]

You're covering a rendering technique and you've gone almost 10 minutes without ever showing anything other than words. It certainly tests your audience's attention span and imagination. You're covering highly visual topics and getting into math and computer science without any kind of visual aid. I'd say that's highly suboptimal ;)

[@WarrenMarshallBiz]

Videos are a balancing act of sharing information but also the effort required to put them together. Animations and fancy editing take a lot of time. And sometimes I just don't have it.