I know it has been 3 years since making of this video, but I found this now and despite the fact that I don't use Unity and rather learn OpenGL and write stuff on my own as much as my skills allow, this has helped me a freaking lot! Thank you Freya! :))
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!
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 RUclips. Thanks again 💖
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.
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 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.
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.
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.
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!
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.
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
@@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 :)
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
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?
⚠⚠⚠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)
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 !
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?
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?
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?
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?
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.
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!
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
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?
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?
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!
1:26:00 It would have been better if you could explain this in the term of vector arithmetic instead of matrices but it's okay.I formed the algorithm using vectors only but i can also see the matrix forms the same but to newbies matrix form can be a bad illustration.
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?
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
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, RUclips deletes the comment!
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?
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?
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
![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)
![Healthbars, SDFs & Lighting • Shaders for Game Devs [Part 2]](http://i.ytimg.com/vi/mL8U8tIiRRg/mqdefault.jpg)
I know it has been 3 years since making of this video, but I found this now and despite the fact that I don't use Unity and rather learn OpenGL and write stuff on my own as much as my skills allow, this has helped me a freaking lot! Thank you Freya! :))
I'm glad it was useful!
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!
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 RUclips. Thanks again 💖
😊😊😊😊😊😊😊😊
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!
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!
If you'd made this series 10 years ago I might still have my hair. This is exceptional!
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 is amazing. Came here for a whole different issue, but now I have been watching for an hour....and will come back! :D
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.
The formula you highlighted to calculate the bitangent saved me from such a headache thank you!
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.
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.
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!
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.
Great video series, I revisit these often when I get stumped on my shader coding and need to refresh myself on a concept. Thanks!
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!
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
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
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.
Great video series! I'm really learning a lot. Thanks for putting all of these up for free!
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 :)
I wish my teachers wore cat ears
same
Cringe
Idk who you are but i watched you while sleeping apparently
thank you for sharing your knowledge and thanks to the students letting you upload it.
This tutorial series is so sweet!
This was such a great explanation! Thank you for this!
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
I cannot express enough thanks to you Freya for these series. Great material and perfect explanations.
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?
You and your content are pure GOLD. Thank you!
⚠⚠⚠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
Exactly something I was looking for great work!
Thanks for uploading a new video ... I've been waiting for so long
EVERY TIME I HAVE TO TRANSFORM SPACES MY HEAD EXPLODES EVERY TIME OMG
This is such an amazing resource, 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 !
Thank you for sharing your knowledge it's priceless !
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
You are appreciated.
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?
Greate tutorial series. Thank you!
Thanks a lot for all these videos!
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, learned a lot.
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?
You are doing great job please keep it up
38:17 it calls preprocessor directive
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?
I wanted something good on IBL for a long time! Thanks Freya!
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!
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.
Very informative video!
Incredible, thank you a lot! 🙏
You're a champion 🏆
float3 Blinn = saturate(dot(H , N)) + _Gloss * (Lambert > 0);
is it more optimize than using pow function ?
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!
just woke up here not sure how i got here but i’m not mad
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
Cute cat ears brought me here :3. Went out learning something I needed to know ;3 keep making videos 😻 they really help Nya ;3
Could someone please point out the math video where Freya taught about mapping direction to rectilinear which is mentioned around 2:37:40.?Thanks
Thank you!
thanks Learn a lot.
cat girls cat girls whatcha gonna do
whatcha gonna do when they teach shaders to you
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?
Just finished the series. What would be the best next step to become a shader master like Freya?
Simplesmente incrível!
Freya i lovee you
As a student
I wish I had the knowledge you have.
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!!!
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!
1:26:00 It would have been better if you could explain this in the term of vector arithmetic instead of matrices but it's okay.I formed the algorithm using vectors only but i can also see the matrix forms the same but to newbies matrix form can be a bad illustration.
How do you go about correctly increasing the intensity of a normal map past 1.0?
Ok I need more
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
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
2:44:21
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
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, RUclips deletes the comment!
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 ?
You should've been working for a triple A studio
hey do you think we should use urp in new projects?
Where do I learn this stuff from 0?? x_x
What tablet are you using for drawing? Please asnwer me
How can I make an object receive shadows?
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?
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?
So cute ears !!!
if a young Axl Rose had a maths/geometry/coding-wiz sister
please redo in HLSL for URP
10:38 Hey! I did T_T
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
54:00
omg so cute why u doing this
#FrackPImeow4TAO_MorePlasticPlz
res
Is this a human brain?
uwu