Normal Maps, Tangent Space & IBL • Shaders for Game Devs [Part 3]

Рет қаралды 118,947

Күн бұрын

In this final lecture we dive into normal maps, tangent space, height maps and image-based lighting
If you are enjoying this series, please consider supporting me on Patreon!
🧡 / acegikmo
00:00:00 - Intro
00:01:17 - Recap
00:10:34 - Multi-light support (assignment 2)
00:14:48 - .cginc include files
00:21:18 - Multiple passes
00:24:20 - Macros
00:25:15 - Unity's lighting macros
00:47:05 - Questions
00:49:45 - Garden of the sea example
00:54:39 - Color/Albedo texture
01:00:10 - Normal maps & tangent space
01:27:51 - Questions
01:44:00 - Normal map intensity
01:46:43 - Height/Displacement maps
01:58:18 - Vertex shader texture sampling
02:01:29 - Vertex offset & mesh normal caveats
02:07:29 - Questions
02:24:47 - The importance of ambient light
02:26:18 - Basic ambient light
02:29:35 - Image-based lighting (IBL)
02:33:50 - Skybox shader
02:36:46 - Rectilinear skybox sampling
02:42:00 - Diffuse IBL
02:52:02 - Specular IBL
03:10:23 - Outro
Project Download & Assignments: docs.google.com/document/d/1h...
Originally streamed as a course for students at futuregames.se/, who were super kind to let me both stream this live as well as upload it here! so massive thanks to the people at FutureGames!!
💖 Patreon ❱ / acegikmo
🐦 Twitter ❱ / freyaholmer
📺 Twitch ❱ / acegikmo
💬 Discord ❱ / discord
🌸 Instagram ❱ / freya_holmer
✫ Video Production by Higher Vision:
➥ / highervision1
➤ Edited by Stelly: / stelly47050876

Пікірлер: 135

@JebediahFeed 3 жыл бұрын

I’ve been googling for weeks trying to find all this information and now I’ve learned so much in just 3 hours! I cannot express how happy I am now! Thank you Freya!

@pb3dpb3d 3 жыл бұрын

The best video series in the internet about shader coding. You got me into this stuff and i'm will be sticking with it for a long time!

@tojynick 2 жыл бұрын

Many people said this already, but thank you. This series has so much good stuff! One of the best (if not the best) series about shaders on KZfaq. Thanks again 💖

@Phroggster 2 жыл бұрын

You just helped get me through comprehending an issue I was having today in a pixel shader, and I thank you sincerely for that. You clearly comprehend shader pipelines better than I ever did even back when I was interacting with them daily, and you cut right through the decade or two's cognitive oxidation that has built up since.

@acegikmo 2 жыл бұрын

I'm glad it was useful!

@Doodelydoo 3 жыл бұрын

This tutorial series is so sweet!

@manuelraimondi4813 Жыл бұрын

I really thank you for these explanations. Online you can find scattered information here and there, but I haven't found anyone who allowed me to join the dots one by one. These are really great lessons. I can't wait for the next one.

@ThePianist4Life 3 жыл бұрын

This tutorial series has been extremely helpful. Thank you so much for uploading these! I have been learning this stuff on my own, for over two years now, and it has been quite cumbersome. Your examples and way of explaining really help putting thing into perspective. One thing to (maybe) consider in the future: I like designing simple meshes from scratch and start from there explaining the data flow to the final pixel. I found that to be very helpful in designing effects - because it gives a whole new dimension of possibilities. One easy example could be a billboard Line-Mesh, using uv2 for vertex displacement (line-width). But anyways... Thank you

@harmoniac.design 2 жыл бұрын

This is amazing. Came here for a whole different issue, but now I have been watching for an hour....and will come back! :D

@bmatt2626 2 жыл бұрын

If you'd made this series 10 years ago I might still have my hair. This is exceptional!

@mezzanine510 2 жыл бұрын

This was such a great explanation! Thank you for this!

@thetruebeginner4382 2 жыл бұрын

This serie about shaders is amazing, just as all the other series and Freya's teaching skill. Thank you!

@mario_actually 3 жыл бұрын

Don’t have any ambition to code shaders, but love playing around with shader graph. This series has helped me a lot to grasp some of the fundamentals a lot better.

@TravelWithDhami 3 жыл бұрын

Exactly something I was looking for great work!

@MrMeowmurs Жыл бұрын

Great video series, I revisit these often when I get stumped on my shader coding and need to refresh myself on a concept. Thanks!

@KitMacAllister Жыл бұрын

Great video series! I'm really learning a lot. Thanks for putting all of these up for free!

@David-gu8hv Жыл бұрын

Thanks Freya! You said something that was key to me fixing my bug. I didn't know that normal maps had a 'w' component for flipped UVs!

@fredimachadonet 2 жыл бұрын

You and your content are pure GOLD. Thank you!

@RA-eg8tw Жыл бұрын

I remember self teaching this in my first year of uni. Not sure why I gave up on game dev but after 2 and a half years, I've been catching up on it. This helped me speed through.

@peteruelimaa4973 10 ай бұрын

Amazing tutorial, thank you! I now finally _understand_ how all this works! What would be amazing would be a follow up course that shows how to do all this with Unity's built in functionality!

@TheShinSekaii 2 жыл бұрын

thank you for sharing your knowledge and thanks to the students letting you upload it.

@jordanlapointe4690 2 жыл бұрын

This is such an amazing resource, thank you!

@davidkokoski4392 2 жыл бұрын

Seriously, discovering this and you as an instructor/youtuber/person has revitalized my game developer pursuit process. XD Coming from someone who by all popular accounts and influences should technically not be pursuing this career at this point in my life, this means more than I can express in a youtube comment. Thank you so much.

@acegikmo 2 жыл бұрын

I'm happy to hear that

@rheemboi 3 жыл бұрын

Thanks for uploading a new video ... I've been waiting for so long

@Spine223 3 ай бұрын

thank you :) I've basically watched all your videos and they are a grand help. You're amazing! I should do something like this one day

@semahirachid8465 3 жыл бұрын

Thank you for sharing your knowledge it's priceless !

@bigmistqke 2 жыл бұрын

well, these were 9 hours very well spent. tied up a lot of loose ends of information i found in bits and pieces over the years. p.ex i knew what a normal map was used for, and that it supposedly contained the 3-axis lighting information inside its rgb, but seeing it implemented in the shader made me understand what normal maps actually are. or these refracted specular highlights, such a beautifully simple implementation. from something obscure and unreachable to simple and elegant. thanks a lot freya.

@sagaback927 2 жыл бұрын

Thanks a lot for all these videos!

@ervinsipcenoks3289 3 жыл бұрын

Incredible, thank you a lot! 🙏

@jaxxtrend 2 жыл бұрын

Greate tutorial series. Thank you!

@mohitsethi99 3 жыл бұрын

I wanted something good on IBL for a long time! Thanks Freya!

@Vandius24 3 жыл бұрын

Thanks for the awesome videos Freya Holmér. If I ever release anything I'll have to put you in my credits as a special thanks.

@Ayazkhan-sg8to 3 жыл бұрын

You are doing great job please keep it up

@maixicek Жыл бұрын

Awesome finale of the series! Thank you for these in depth educational videos.

@fodk7021 Жыл бұрын

This is the finale ? Nooooo

@maixicek Жыл бұрын

@@fodk7021 Do you have any inside information?

@fodk7021 Жыл бұрын

@@maixicek No not really... i really hoped the series would go on.

@maixicek Жыл бұрын

@@fodk7021 I guess time will tell then. If only there will be somebody powerful enough to backing up those top tier knowledgeable people that can share their knowledge and teach others through videos. So we can all iterate and improve quicker. But unfortunately we are taught by sitting for years behind desk in front of unqualified teachers that were just two weeks in front of us back then and thinks to themself they are good year after year in same shoes. damn what a fluff from me, lets hope for better times and games :)

@spider853 Жыл бұрын

Very informative video!

@TheOneWhoHasWallnuts Жыл бұрын

Thank you, learned a lot.

@ismaelomaribanez 3 жыл бұрын

I cannot express enough thanks to you Freya for these series. Great material and perfect explanations.

@Sharkistas 2 жыл бұрын

You are appreciated.

@chengzeng2967 2 жыл бұрын

Hi Freya, I followed the way on youtube to render a 2d pixel role with a 3d model like dead cell, but how can I create root bind to fixed positions on role used for fluttering scarf and fire in head?

@kentika378 2 жыл бұрын

You're a champion 🏆

@XxMeuktwoxX 2 жыл бұрын

What an incredible series, thank you so much!! Do you tend to create everything from an empty unlit shader? What if you don't want to go through the hassle of implementing all basic lighting again? Would you make a standard lit shader instead?

@mateuniverse 3 жыл бұрын

EVERY TIME I HAVE TO TRANSFORM SPACES MY HEAD EXPLODES EVERY TIME OMG

@EvilRobin1 3 жыл бұрын

Thank you!

@yapudi 2 жыл бұрын

Totally love watching you videos! Is there a way I could start to learn writing shaders from scratch basics and how to create light shaders for other softwares like Maya, Houdini? And would you be able to guide me as to how I can approach this?

@theman7050 25 күн бұрын

In the Outro, you showed the water ripples caused by that x axis texture. My only question is, how do you position the center of the texture to the actual spot where the ship and water mesh converge? Thanks

@thanez86 3 күн бұрын

At 2:41:35, I didn't understand what you did exactly to hide the mip seam, could you elaborate? I'm curious because the result is very nice, and I work a lot with rendering engines, and how we usually solve this is to simply make the texture tile infinitely, so when the first row/column of pixels gets mipped, it gets mipped with the last row/column of pixels, and vice versa, for both U and V axis. So, long question short, that "a bit of a hack" you did, was that to tile the texture?

@onestepsolutions 3 жыл бұрын

Thank you very much for your explaination , just perfect! , I try to create à bevel shader for unreal . do you have some url or information how to achieve this? Thank you

@buunuu. 3 жыл бұрын

How do you go about correctly increasing the intensity of a normal map past 1.0?

@scoreunder Жыл бұрын

The y-coordinate on the rectilinear thing bent my brain a little thinking about the difference between a y-coordinate in a vector and its corresponding angle, and I am still wondering which of the 2 spaces the skybox image is actually encoded in. Does it look noticeably different if you take the arccosine of the y coordinate and divide that down?

@raceforspeed 2 жыл бұрын

Cute cat ears brought me here :3. Went out learning something I needed to know ;3 keep making videos 😻 they really help Nya ;3

@nati7728 2 жыл бұрын

Thank you!!!

@banabana4691 Жыл бұрын

thanks Learn a lot.

@GmZorZ 2 жыл бұрын

1:03:11 i was discussing normals and tangents with a friend, i have personally only used these when writing a ray tracer, and i don’t see why you would export the tangents along with the normals for certain occasions, UE also provides an option to parse tangents when loading a mesh, and i was thinking there must be a reason for it, would you know?

@acegikmo 2 жыл бұрын

normal mapping requires tangent space, and so does anisotropic specularity

@dinizjunior4510 6 ай бұрын

Simplesmente incrível!

@workflowinmind 3 жыл бұрын

Thanks again Freya for making this available for everyone, so much value!! By any chance do you have anything related to HDRP Shader creation somewhere?

@acegikmo 3 жыл бұрын

nope, I don't, sorry!

@Wilhelm_LAS 3 жыл бұрын

"Oh no my water, its broken" LMAOOO

@JasminUwU 3 жыл бұрын

I wish my teachers wore cat ears

@atlev Жыл бұрын

same

@caresbruh 2 күн бұрын

Cringe

@JackSalzman Күн бұрын

Not cringe

@allanpoe8713 3 жыл бұрын

hey do you think we should use urp in new projects?

@Luna-wt9oy 2 жыл бұрын

Just finished the series. What would be the best next step to become a shader master like Freya?

@xr_xharprazoraxtra5428 11 ай бұрын

⚠⚠⚠ATTENTION⚠⚠⚠ : do NOT change the input names of the vert and frag functions, let v be v, let o be o, let i be i, because one of the Unity Macros will rely on the single letter names, for example : light Attenuation : Unity will expect you to have "v" as your meshdata / appdata, if you rename your mesh data as something else, Unity will say "Undeclared identifier 'v'" and because of this, I have been depressed for the last 48 hours (not exaggerated)

@egedq 6 ай бұрын

false

@ep3576 6 ай бұрын

Mine is working great with the name "fdslfjdslkfjdskf", so I guess this is wrong

@xr_xharprazoraxtra5428 6 ай бұрын

then how come it is not working for me ?@@ep3576

@bigmistqke 2 жыл бұрын

for the 'footsteps in snow'-example, I wonder how you would understand the position in uv-space from the intersection with the player. i had a similar question once when trying to implement a 3d painting tool. also, i assume you would have to feedback the displacement-texture with itself to be able to keep on adding footsteps, would you do this by rendering it to a rendertexture and then reading from it, or is there another way of doing this?

@bigmistqke 2 жыл бұрын

a just found out about RaycastHit.textureCoord, so i guess that answers the first part of my question.

@bigmistqke 2 жыл бұрын

(still if somebody would know a lower level way of implementing this i would be really curious to know!)

@nonpurplestar4158 2 жыл бұрын

Thank you for your streams with explanations, they help a lot! Do you understand c# code? If so, could you explain how the hsv gradient fills the triangle in this code? I'm trying to do this in ue4 materials! stackoverflow - HSV triangle in C# I apologize for the off-topic question, and also for the fact that I can’t insert a link, KZfaq deletes the comment!

@mazito4445 3 жыл бұрын

Ok I need more

@felixlarsson4205 Жыл бұрын

Damn this is so valuable i dont even have words! i was just wondering, where is the finishing part about receiving and casting shadows? i need it! or would you just not make an unlit shader if you want shadows + cast shadows? I want to make a toon shader in hlsl this time around because i made one using shader graph last year but heard from game devs that someone who has experience with hlsl is far more attractive than someone only experienced with shader graph. i did manage to get casting shadows to work fairly easily (but not perfectly), but now im faced with the issue of receiving shadows.. spent 4 or 5 hours messing up my code and rewriting a lot of stuff trying to mash together information from your courses and a separate source without luck. would appreciate it a lot if that would be something you could cover in the future as i havent found a video like that from you as of now. the other source i was using was made by Jasper Flick from Catlike Coding but some of the macros didnt seem to work or had been replaced :/ much love!

@Gregu91 Жыл бұрын

I started support you on paternon for staff about shaders, it's so great, I have watched all your videos about it, but I want learn more, coudl you recomended antother materials about shaders, like videos or books?

@unityproject-mi1zw 3 ай бұрын

float3 Blinn = saturate(dot(H , N)) + _Gloss * (Lambert > 0); is it more optimize than using pow function ?

@logic0000 Жыл бұрын

really great course! do you have plan to make a tutorial about post processing in shaders?

@acegikmo Жыл бұрын

no plans on that at the moment!

@qrthack3233 Жыл бұрын

What tablet are you using for drawing? Please asnwer me

@5daydreams 3 жыл бұрын

I could not get the point lights to work, or the normal mapping : / I wonder what I'm missing, if I find it I'll reply here

@alvaroalda3112 Жыл бұрын

How can I make an object receive shadows?

@christophersimpson7039 2 жыл бұрын

Tetrahedra can absolutely fill a 3D space. We use volume meshes made exclusively of tetrahedra for computational fluid dynamics.

@acegikmo 2 жыл бұрын

sure, but in context I was talking about regular polyhedra, not non-regular

@Bestofchatgpt 3 жыл бұрын

I wish I had the knowledge you have.

@n-man6964 Жыл бұрын

Really nice explanation of normal maps. Tangent space is still a really weird thing to me. But the part where you created tangentToWorldMatrix was one of the things that were enlightening - such a good var name 🤝 . In other tutorials they called it TBN or used other fancy words and it was meaningless to me. I know i probably didn't read enough about it but cmon...

@KDSBestGameDev Жыл бұрын

Great video like always! I think showing a Project or even having it on disk from a company you don't work for anymore is risky. I used shadergraph, but the shader didn't support ui masking. You can get the generated shader and I fixed it by hand in the generated shader. I saw those 8 passes. I think it is hard for them to fix this. They don't want to break all custom shaders.

@Benalyss 3 ай бұрын

Is your opinion about using BRP over URP or HDRP because of the greater handwritten shader customizability still up to date in 2024 ? Awesome video series, thanks for that !

@fransalazarco Жыл бұрын

This is my first time in this channel. I am a 3D artist and an AR filter creator and work as a freelancer. I want to learn game development and the content here looks very helpful for me. Please, can you tell me your learning path? books? online courses? documentation? or any recommendation?

@xr_xharprazoraxtra5428 11 ай бұрын

HELP 🔴🔴🔴: for the part "TRANSFER_VERTEXT_TO_FRAGMENT(o);" part, it keeps on saying there is a undeclared identifyier "v", what it's going on ? QAQ

@xr_xharprazoraxtra5428 11 ай бұрын

inside the Interpolator struct (or sometimes v2f), I have LIGHTING_COORDS(9,10), are 9 and 10 too big ?

@Tsunamigue 9 ай бұрын

Where do I learn this stuff from 0?? x_x

@MissEldira 3 жыл бұрын

Thank you! Freaking FINALLY someone explains what tangent space is. People are so bad at explaining, they either gloss over actually explaining the what it is and just says what it is used for, sometimes also skipping over the how it is used. OR you find the mathematical explanation which is as academic and unexplanatory as can be. It is so stupidly simple and now all the issues I been reading about makes sense, but this is what I needed to know first and that was what they always skip over even when they promise to explain it. Freya always delivers!

@xr_xharprazoraxtra5428 11 ай бұрын

PS: 1:06:20 - sometimes "bitangent" are also known as "binormal" 2:52:34 - sad thing about IBL is that when you rotate the skybox around or you change the color of the skybox, the shader will not take account for that

@acegikmo 10 ай бұрын

binormal is a misnomer though, but unfortunately a pretty common one

@criticalposts3143 2 жыл бұрын

cat girls cat girls whatcha gonna do whatcha gonna do when they teach shaders to you

@levrisfirst3291 3 жыл бұрын

So cute ears !!!

@CircularEntertain 3 жыл бұрын

is bitangent=binormal?

@acegikmo 3 жыл бұрын

not quite! they're similar but different a surface has only one well defined property: the normal. as soon as we want another vector that is orthogonal to that, we get a vector that is flat/tangent with the surface, so we call that the tangent. Now, if we want a third axis, the third one is *also* tangent to the surface, so we call that the bitangent now consider a 3D spline instead of a surface. a 3D spline only has a well defined tangent, in other words, the direction that the spline is pointing. If we want an orthogonal vector, that vector is normal to this line, so we call it the normal. If we then want a third vector orthogonal to both, that vector is *also* normal to the spline, so we call it the binormal tldr: bitangent is the third vector of a point on a surface, binormal is the third vector of a point on a 3D curve

@wassimmefteh401 2 жыл бұрын

You should've been working for a triple A studio

@Kyun9432 2 жыл бұрын

2:44:21

@diaperAndy 9 ай бұрын

Freya i lovee you As a student

@AleksBergJones 3 жыл бұрын

please redo in HLSL for URP

@user-sh7ft3cz8x 3 жыл бұрын

54:00

@ismaelomaribanez 3 жыл бұрын

10:38 Hey! I did T_T

@ShadowBanned0 3 жыл бұрын

res

@someStudentChannel 2 жыл бұрын

omg so cute why u doing this

@elcapitan6126 Жыл бұрын

if a young Axl Rose had a maths/geometry/coding-wiz sister

@danielesquivel3155 Жыл бұрын

uwu

@linkbohanon381 8 ай бұрын

#FrackPImeow4TAO_MorePlasticPlz

@davidfitcher2953 2 жыл бұрын

Is this a human brain?

@NoimannAlive 2 жыл бұрын

Ideal girl doesn't exis...

@nobody.of.importance Жыл бұрын

If your standards are that high, it sounds like a you problem.

@NoimannAlive Жыл бұрын

@@nobody.of.importance ahahahah you got the joke

@sehgel 3 жыл бұрын

Freya you say "Hmmm" way too much. Other than you tutorials are simple the best one can find!

@betelgeuse3287 3 жыл бұрын

Nice tutorial ! But you don't like an actual girl/women I think you are a lady boy.

@nobody.of.importance Жыл бұрын

Don't be an asshole, dude.

@pasionporblender 2 жыл бұрын

float2Infinit nijaShader = mul(shader, theMust.great.taecher)

@Ayazkhan-sg8to 3 жыл бұрын

You are doing great job please keep it up

@TimothyParez 2 жыл бұрын

Thank you!