Normal Maps, Tangent Space & IBL • Shaders for Game Devs [Part 3]
ฝัง
- เผยแพร่เมื่อ 1 มิ.ย. 2024
- 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 - วิทยาศาสตร์และเทคโนโลยี
![Shader Basics, Blending & Textures • Shaders for Game Devs [Part 1]](http://i.ytimg.com/vi/kfM-yu0iQBk/mqdefault.jpg)
![Shader Basics, Blending & Textures • Shaders for Game Devs [Part 1]](/img/tr.png)
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!
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!
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 TH-cam. Thanks again 💖
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
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.
This is amazing. Came here for a whole different issue, but now I have been watching for an hour....and will come back! :D
If you'd made this series 10 years ago I might still have my hair. This is exceptional!
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.
I'm glad it was useful!
Great video series, I revisit these often when I get stumped on my shader coding and need to refresh myself on a concept. Thanks!
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.
I'm happy to hear that
This tutorial series is so sweet!
This serie about shaders is amazing, just as all the other series and Freya's teaching skill. Thank you!
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.
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
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!
Great video series! I'm really learning a lot. Thanks for putting all of these up for free!
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!
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.
This was such a great explanation! Thank you for this!
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.
Exactly something I was looking for great work!
You and your content are pure GOLD. Thank you!
This is such an amazing resource, thank you!
thank you for sharing your knowledge and thanks to the students letting you upload it.
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.
Thank you for sharing your knowledge it's priceless !
Thanks for uploading a new video ... I've been waiting for so long
Thanks a lot for all these videos!
Awesome finale of the series! Thank you for these in depth educational videos.
This is the finale ? Nooooo
@@fodk7021 Do you have any inside information?
@@maixicek No not really... i really hoped the series would go on.
@@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 :)
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?
Greate tutorial series. Thank you!
Incredible, thank you a lot! 🙏
I cannot express enough thanks to you Freya for these series. Great material and perfect explanations.
You are doing great job please keep it up
Thank you, learned a lot.
Very informative video!
I wanted something good on IBL for a long time! Thanks Freya!
Cute cat ears brought me here :3. Went out learning something I needed to know ;3 keep making videos 😻 they really help Nya ;3
EVERY TIME I HAVE TO TRANSFORM SPACES MY HEAD EXPLODES EVERY TIME OMG
⚠⚠⚠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)
false
Mine is working great with the name "fdslfjdslkfjdskf", so I guess this is wrong
then how come it is not working for me ?@@ep3576
You are appreciated.
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?
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?
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
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?
nope, I don't, sorry!
thanks Learn a lot.
"Oh no my water, its broken" LMAOOO
You're a champion 🏆
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?
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?
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.
Simplesmente incrível!
Thank you!
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!
I wish my teachers wore cat ears
same
Thank you!!!
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...
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 !
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?
a just found out about RaycastHit.textureCoord, so i guess that answers the first part of my question.
(still if somebody would know a lower level way of implementing this i would be really curious to know!)
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
Ok I need more
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?
normal mapping requires tangent space, and so does anisotropic specularity
How do you go about correctly increasing the intensity of a normal map past 1.0?
Just finished the series. What would be the best next step to become a shader master like Freya?
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?
I wish I had the knowledge you have.
float3 Blinn = saturate(dot(H , N)) + _Gloss * (Lambert > 0);
is it more optimize than using pow function ?
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?
really great course! do you have plan to make a tutorial about post processing in shaders?
no plans on that at the moment!
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, TH-cam deletes the comment!
Tetrahedra can absolutely fill a 3D space. We use volume meshes made exclusively of tetrahedra for computational fluid dynamics.
sure, but in context I was talking about regular polyhedra, not non-regular
hey do you think we should use urp in new projects?
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!
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
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
binormal is a misnomer though, but unfortunately a pretty common one
What tablet are you using for drawing? Please asnwer me
cat girls cat girls whatcha gonna do
whatcha gonna do when they teach shaders to you
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
inside the Interpolator struct (or sometimes v2f), I have LIGHTING_COORDS(9,10), are 9 and 10 too big ?
How can I make an object receive shadows?
Where do I learn this stuff from 0?? x_x
You should've been working for a triple A studio
Freya i lovee you
As a student
2:44:21
So cute ears !!!
please redo in HLSL for URP
is bitangent=binormal?
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
10:38 Hey! I did T_T
54:00
if a young Axl Rose had a maths/geometry/coding-wiz sister
res
omg so cute why u doing this
uwu
Is this a human brain?
#FrackPImeow4TAO_MorePlasticPlz
Ideal girl doesn't exis...
If your standards are that high, it sounds like a you problem.
@@nobody.of.importance ahahahah you got the joke
Freya you say "Hmmm" way too much. Other than you tutorials are simple the best one can find!
Nice tutorial ! But you don't like an actual girl/women I think you are a lady boy.
Don't be an asshole, dude.
float2Infinit nijaShader = mul(shader, theMust.great.taecher)
You are doing great job please keep it up
Thank you!