Shader Basics, Blending & Textures • Shaders for Game Devs [Part 1]
Переглядів 1,288,584
День томуWelcome to my three part lecture on shader coding for game devs 💖 I hope you'll find this useful in your game dev journey!
If you are enjoying this series, please consider supporting me on Patreon!
🧡 / acegikmo
00:00:00 - What are shaders?
00:03:00 - Case study/screenshots from FFXIV, Overwatch & more
00:37:42 - The Structure of a Shader
00:42:49 - Vertex shader
00:47:09 - Fragment shader
00:49:32 - Shader vs Material
00:51:29 - A first look at shader code
01:02:17 - Vertex Normals
01:06:17 - Interpolators
01:15:59 - Data types (fixed vs half vs float)
01:21:32 - Fragment shader output
01:24:31 - Swizzling
01:33:48 - Passing data from vertex shader to fragment shader
01:42:04 - Space transformation w. Matrices
01:47:07 - UV coordinates & manipulation
01:53:34 - Gradients
02:01:06 - Values outside of 0 to 1
02:09:20 - Triangle waves using math
02:12:04 - Preprocessor constants
02:25:28 - Pattern manipulation
02:31:48 - Blending Modes
02:39:42 - Depth buffer & depth testing (ZTest)
02:56:40 - Waves, ripples & vertex offsetting
03:12:07 - Textures
03:20:33 - World space coordinates
03:28:04 - Texture masking
03:37:33 - Isotropic mip maps
03:42:17 - Anisotropic mip maps
03:44:36 - Point vs bilinear vs trilinear filtering
03:49:54 - Final questions
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
@justkiwa Місяць тому
Who else woke up to this?
@16centpictures 22 дні тому
Um… me…
@Primosushi4750 21 день тому
Me:/
@jamailll469 21 день тому
No way me too!
@tusharsinha696 21 день тому
😮😮
@xSebun 21 день тому
Me… Do you have any idea why?
@Marks0verhere Місяць тому
Heres a fact: you woke up from a deep sleep and this was playing
@Eliseloalovebaby 3 дні тому
Me
@MatthewAWinston 2 роки тому
This is the most epic "developer" content ever. The style of delivery is only possible for those who live and breathe their material. Freya knows her stuff, and how to teach. Emphasizing what matters. Integrating feedback and questions, while willing to say no, to honor your course intentions. I always learn new details, and deeper understanding of the things I thought I knew. Thank You!
@MoonakaLadyYuna 2 роки тому
Absolutely
@hoo1320 2 роки тому
I completely agree With You, Mr. Matt!🤍
@TaylorK531 Рік тому
god level tutorial
@RedshirtsGaming 7 місяців тому
YUy b😮
@Eliseloalovebaby 3 дні тому
Me
@loicbouvier7882 3 роки тому
Everything I ever wanted to know about shader is condensed here. You somehow managed to transform an aspect of game dev that seemed scary and shaddy at first into something actually fun and pretty simple :)) Thank you so much!
@ihateflies5605 2 роки тому
Shady lol
@Corn0nTheCobb 2 роки тому
Shaders aren't shady
@whannabi 2 роки тому
@@Corn0nTheCobb they're scary tho when you don't know a single thing about it.
@NachitenRemix Рік тому
shaders shady lmao
@parrot8613 7 місяців тому
😊😊😊😊 U
@CorporalDanLives 3 роки тому
This > College courses I’ve taken. Freya is awesome; also THANK YOU for editing these down from the original stream, this is utterly invaluable stuff.
@gsemaj1337 Рік тому
I know I’m late to the party but I just wanted to let you know that everything about this video is perfect. My university graphics class didn’t give us any hands-on experience with shaders and this totally filled the gap. Your pacing, explanations and visualizations were on point. Thank you so much for making this!!
@Theratnoob Місяць тому
I fell asleep and the last thing I watch was this 💀
@kennethgriffin5761 3 роки тому
Just canceled my University application. Got all the info I need right here.
@BetaNegative 3 роки тому
Haha having finished college I should have done that
@brodakarat6340 3 роки тому
I'm in first year for software engineering wanting to be a game developer and I may have made a mistake... XD
@nitroneonicman 3 роки тому
I took two semesters of computer graphics at college. While this series is nice it doesn't even cover what we went through in a single week of the course. The professor was a fluid physicist who had worked on computer graphics since the 80s. Needless to say he understood the deep inner workings of OpenGL and Vulkan. This video is alright if all you ever intend to do is write basic shaders in Unity. If you want to seriously be considered for a career in the game industry it's better you take an accredited college course. Shaders can be extremely powerful if you know what you're doing, in fact the entirety of Minecraft is generated inside a geometry shader, which I guess if you don't know what that is by watching this video then I guess that proves my point.
@nadaelnokaly4950 3 роки тому
hahahaha :D well I am still confused should i pursue masters degree or learn on my own 🤷♀️
@nitroneonicman 3 роки тому
@@nadaelnokaly4950 Good luck getting a job with "I learned on my own" on your resume.
@grrsa 3 роки тому
I've been watching this sporadically through the week. I've never understood the fundamentals so well before! Excellent explanations.
@selgesel 3 роки тому
As a newcomer I must admit that I was at first put off by the length of the video, and wondered why she wouldn't just cut it into parts and upload them individually. But when I did start watching, I got completely hooked. I don't know what kind of wizardry this is but the content just flows so incredibly smoothly and naturally that cutting the video into parts would ruin it. Watching great videos like this makes me want to quit my daily job to have virtually unlimited uninterrupted time so I could watch them anytime I want and focus on making a game myself.
@redone823 3 роки тому
Jump on the NFT millionaire art creation to have the time to do what you want.
@petlemons Місяць тому
@@redone823 This comment aged like a finely spoiled milk
@redone823 Місяць тому
@@petlemons I've been craving milk yogurt since I got home from work.
@petlemons Місяць тому
@@redone823 hopefully not 3 year old yogurt!
@marianogonzalez4663 3 роки тому
What an amazing resource. Just recently I had started learning shaders from your previous video on the topic so it's a godsend that just now you're starting an in depth shader series. Thank you so much!
@grixxy_666 3 роки тому
Just found this in my recommended feed and did NOT expect this much depth and detail. Earned my sub
@antoinefortin1386 2 роки тому
Thank you so much for this! I have been dealing with anxiety for few weeks and everytime I feel super stress or a panic attack is on the line, I just watch your streams and it so relaxing and full of knowledges! 💆♂️ Thanks a lot :D
@ambid1795 3 роки тому
This was truly amazing. I learned so much, even after reading all of the docs I could find on Unity shaders
@qma2275 Рік тому
- I don't have the words to express my gratitude for sharing such a detailed course for free. The university i'm studying to be a game developer at, which charges $1,500 a year, didn't even teach me the basics like C# interfaces and importing assets into Unity, let alone shaders. As a non-native english speaker i had no problems undertanding you, nor was i bored - I am insanely happy i've stumbled upon your channel and this video specifically. Perhaps my career will be built through you and what you do. Thank you in advance :)
@sagitswag1785 11 місяців тому
Sorry to say this, but if you are paying 1.5k a year and they don't even teach you how to use your engine or the language, you are wasting your money. I would look into a different university and perhaps a different major. Just getting a pure CS degree will make sure you have the fundamentals you need for gamedev. Before you learn shaders it's infinitely more important to have your fundamentals down.
@erz3030 3 роки тому
You're amazing Freya! This is incredible, thanks for taking the time for explaining everything in such great detail! Btw, I love the many tangents you go on when explaining things. You always seem to bring up something interesting I didn't know before.
@mikaelamontano 3 роки тому
I can't even begin to explain how thankful I am for this! Thank you so much
@weltraumimport 2 роки тому
i love how questions get answered so nicely like someone asks a thing and freya doesn't just go "oh it's that" but really explains it like "oh it's that, it's used here and there, it's this type of thing, etc." very epic
@johndunn8154 3 роки тому
I've been looking for sources to educate myself on this subject for weeks, and this is EXACTLY what I was looking for. Thank you so much!!!!
@superjustin5000 3 роки тому
This has been the absolute best source for learning Unity shaders. Thanks for explaining this all so well. The blackboard style drawings are great too, especially when trying to visualize vectors and dot products. Keep being awesome 🤘🤘
@benrogers5845 Рік тому
You're so skilled at distilling information on the fly, organized into a logical flow appropriate for listeners who may not be familiar with the subject, explaining jargon as you go rather than assuming everyone knows it, etc. That's an extremely valuable set of abilities! Thank you for taking the effort to create this content and share it!!
@tojynick 2 роки тому
Just finished watching and thank you so much Freya for the content you're making. It was quite easy for me to understand many of esoteric (at first) concepts with your explanations!
@maulik13 2 роки тому
This video is rich with knowledge. It was very interesting to see how you analyzed the popular games to figure out how they might have built the effects using different elements. Total awesomeness!
@mcstronghuge 2 роки тому
I've been deconstructing and recreating certain FFXIV effects into After Effects as a hobby, and I find a lot of the initial explanation with the FFXIV examples extremely helpful! Thank you!
@scottdarcy6062 2 роки тому
The way you teach and communicate information is outstanding. I've seen so many "professionals" and tutorials fail at that first hurdle. Super nice voice, very in depth and easy to understand and very thorough. I loved it
@lazybriefcase5257 3 роки тому
I've been trying to understand shaders for years and it finally clicked for me after watching this video. Fantastic job!
@ShrewdBear 3 роки тому
Freya you're a godsend... you teach all this technical stuff with such intelligence and grace, it makes learning all of it so easy and intriguing! not to mention your gentle approach is super comforting. Thank you, I'm looking forward to learning a ton from your videos
@cogmonocle2140 Рік тому
I've watched this video through twice and I still refer back to it to refresh myself. An absolutely perfect intro to shaders!
@EdrisCG Рік тому
Your content and tutorials are unbelievably comprehensive and complete! You have veryyyyyyy deep understanding of what you teach and you teach them very well that everybody at every level can be beneficial from that. No one is comparable to you! There is no such good content all over the Internet as the ones you share! Thank you so much!
@nucleartide 2 роки тому
I watched through the entire 4 hours, typed out + ran all the shaders in Unity, and learned SO much. Excited to dig into the exercise! Thanks a bunch for everything, Freya! This course will be invaluable for many shader beginners to come.
@rmt3589 6 місяців тому
I plan to do this, and this comment makes me even more excited for it. On my first watchthrough rn, but will eventually as I work on my game engine. I'm already learning so much!!!
@TextGuy 2 роки тому
thank you so much, love the way you teach, I'm gonna follow along this series, and probably watch all your other interesting courses related to gamedev as well.
@brunofruchard6176 3 роки тому
So awesome to get such a complete lecture for free on the web 🤯 Thank you so much for the great work!
@SufferDYT Рік тому
This is what every Game Dev channel should strive to be. Unadulterated well-communicated actually useful information. You are appreciated.
@ustoopia 2 роки тому
You are very good at explaining things very well. Not just by showing stuff on screen but also by speaking about some of the matter or theory behind it. That's a gift. Thanks for making these video's.
@glens6145 2 роки тому
You have an amazing ability to communicate complex content. Thank you so much for these Freya, they have helped me fill all the gaps that I had after going through numerous texts!
@ofekazarya7247 26 днів тому
This absultly the longest video I ever watched start to finish on the same day. Great and to the point.
@OTadashi162 3 роки тому
I love how she makes everything so easy to understand. Freya is awesome ❤🥰
@Quesbe 2 роки тому
@@goyimshekelstein4826 What? I don't really see the point of your comment...
@Quesbe 2 роки тому
@@mason4163 What do you mean? She looks very real to me?
@dorondavid4698 3 роки тому
You explain things very well! What most people miss out when making videos about subjects is they explain topics and then jump to another topic right after. You bring up a topic, give examples, explain it, reiterate what it is with references to real world items, THEN move on. Well done!
@ZedaZ80 2 роки тому
I realized this when I was watching a (live) presentation a few months back. The presenter would start talking about a process and half way through, I'd realize "oh, this is really useful, what did she say this was called?" And then she would move on to the next thing @__@
@borjaarantejada7398 Рік тому
I cant believe this is actually for everyone! Thank you so much for sharing your knowledge in a smooth way!
@mazito4445 3 роки тому
Girl, your way to explain things is great! I watched just 2h of this video and I'm not annoyed, i don't even need a break.
@hiimmehdi 3 роки тому
Tried Finding Content like this for a long time ! amazing video, thank you so much for sharing this with us ! you just gave some more hope to keep going and be a game dev, much love from Algeria
@ruslan_yefimov Рік тому
You're just a perfect teacher, thanks for everything! I was really surprised to see such a content
@orlandoalmario 3 роки тому
just finished this video, recently started learning about shaders and this video is so complete, direct, and efficient. Thank you so much for sharing!
@konradklocek6887 2 роки тому
Thank you so much, I work as gamedev profesionally, but I've always had a problem with shaders. Your style, clear explanations made me not fear about writing and understanding shaders - all the best!
@FrotteeVDH 2 роки тому
This is absolutely amazing stuff. I had lost my fear of shaders in less than an hour or so. Mrs. Holmér does a great job of explaining - extremely competent and likeable. I'm looking forward to the other parts of this masterpiece.
@BigDaddyGameDev 4 місяці тому
I've read the documentation, books, and other videos BUT this is the first time shaders have made any sense. Thank you!
@Swifter1243 2 роки тому
Yo thanks! I made a squiggly rainbow ball. Very proud. I was completely lost on shaders and I watched this video all the way through and I plan to watch a bunch of others of yours, you explain things very thoroughly but not overwhelmingly. Very good way to grasp concepts that I've been struggling with. Keep it up :)
@samwalter17 Рік тому
This is absolutely fascinating - so many things I have come up against while working on games make so much more sense now! I wish I had watched this video a year ago. Thank you Freya
@bardty 2 роки тому
I am halfway through and this is _exactly_ the information, presentation, and tone I was missing to make it finally click. I don't use Unity, but laying out the core concepts and all the white-boarding was super valuable and universally applicable! Thank you, thank you, thank you!
@xanderbeaky4546 Рік тому
i'm very glad i watched the video all the way through, i've learned more in 4 hours than i would have gotten with any course
@CruelusRex 3 роки тому
Hey, Freya this was very interesting and informative. Thank you so much!
@adahuttula7600 2 роки тому
You definitely have a talent for explaining things in a helpful, easy to understand way. Great tutorial!!😄
@Trillian_nlc Рік тому
I hope you'll find this useful - 12 mins in and I never thought twice about subbing on patreon. You're doing amazing work!
@XxxGuitarMadnessxxX 2 роки тому
I am so far away from being able to learn this stuff at the moment (I love the programming aspect of things so I would love to implement some of these things for fun lol) but I am absolutely loving the content I'm seeing! This was incredibly informative and the fact that you don't just say "Hey, this is how you accomplish 'x' in this software" and instead go in depth of the actual concepts and ways to apply them is very much appreciated! Thank you for this video lol I'm not sure how I never watched any videos by you before this but definitely following your channel now 😂
@THEspindoctor84 3 роки тому
wow, I'm 17 minutes in, and I can already tell this is incredibly awesome. I have sooo much to learn! I just jumped on your channel and saw that you have so many helpful topics that are not often covered. subscribed! also, you're game showcased at 26:00 looks sick! If one day I have half of your knowledge, I would be happy!
@ImMatureTony Рік тому
This is the best intro to this stuff I've yet found on here, thanks. ✨
@Corb4l 3 місяці тому
I keep coming back at this video, it's so incredibly well taught. Stuff that are usually way too complicated for my two brain cells somehow become tangible and understandable. Many thanks for your content, it's absolutely brilliant :)
@harborned 2 роки тому
Never have I had such a big gap in my knowledge filled in so effectively! Thank you so much!!
@VOIDENSE 2 роки тому
Thank you, your content is awesome. Especially I appreciate good calm diction (English is not my native but I understand everything) and the absence of sharp loud sounds. Thank you! It's a pleasure to watch your videos. Fixing my stress after working day.
@nite_owl_was_here 10 місяців тому
Finally got started with this course, really enjoying it so far! Can't believe you're giving this away for free, huge thank you.
@IgnitedMans90 2 роки тому
This is a great master class but also the best way of teaching. I can feel how you love what you do. Thank you so much for this content.
@Adrodoc Рік тому
Awesome video!!! This is such a good introduction to shaders. They were black magic to me and other tutorials always left questions open like how can I pass data from the vertex shader to the fragment shader when verticies and fragments don't correspond one to one. Thanks to you I now understand how it all works. Thank you very much!!! Watching this felt like sitting in a really good course at university!
@nicogs90 2 роки тому
Incredible lecture. Thanks! Everything magnificently explained. This video gathers all you need to start playing with shaders
@GG-wx8en 3 місяці тому
That was so great! I finally finished watching all of that. Thank you for this great resource Freya!
@acegikmo 3 місяці тому
Happy you liked it!
@KanriKaenan 3 роки тому
I watched like 10 minutes so far and I already realize there is such a wealth of knowledge that I have to come back with a college block and take notes. Thank you in advance for what I will learn here.
@rominaabadi 2 роки тому
This was the only tutorial on writing shaders that made sense to me. Thank you.
@ahmettxusta 3 роки тому
Thanks, Freya. It's a very clear exposition about shaders. I'm learning lots of things on your channel and I'm grateful for that.
@borismakarows 2 роки тому
are u Turk ?
@numbah16 3 роки тому
I've been fumbling in shaders for the past 3 weeks- this has come at the perfect time, Freya!
@ismaelomaribanez 3 роки тому
This woman knows her math and her art. Please keep the magic coming Freya! Cheers from Argentina!
@MrGribouillage 3 роки тому
utterly interesting ! simple basic concepts very well interconnected and well presented for stunning results ! thank you very much
@kech-agmaio8620 Рік тому
You know it’s a good video when every comment is a paragraph long
@domagojalagic6678 3 роки тому
Great content! Learned so much from a single video. Keep up the good work! :)
@spencersherk7116 2 роки тому
wow, what a great rundown :) this covers my first yr as a graphics programmer pretty well
@sarthakghosh1635 3 місяці тому
by far the best tutorial on shaders I have encountered.! Thank you
@Kholaslittlespot1 2 роки тому
Great teaching style. I will come back to this and watch it all. You're wonderful!
@aritheory 2 роки тому
Thank you so much for doing these lectures. You're an amazing teacher!
@0darkwings0 2 роки тому
Hi again, when writing if statements inside vertex shader or fragment shader, it will affect the performance? we should avoid that, no? For example at 2:49:29 in line 86 you returning "return t * (abs(i.normal.y) < 0.999);" .
@RumpledCode 2 роки тому
This is such a high quality resource to learn shaders, thanks for uploading!
@TheRohichi 2 роки тому
Thank for this video series, you make my week ! Best regards from France !
@user-tx2qi1nv1c Рік тому
Hi Freya. I've been watching your videos. I have a question. If I wrote a material definition in other game engine except unity, will that be considered as a shader?
@dinoscheidt 3 роки тому
What an incredible clarity in thought and explanation. Respect.
@azatakhunov6061 2 роки тому
Revising a huge number of video tutorials, I realized that this is the best video from all other video tutorials on shader.
@ujjwalsingh5188 2 роки тому
wow ! I watched it continue 4 hours . Thankyou so much for that valuable knowledge. 😃✨
@benzsuankularb130 2 роки тому
This is unbelievable.. Founding the one who knows math, art's aesthetic, coding's aesthetic with the teaching skill and putting all together on UKposts. Thank you so much for this!
@thomasfavrot4987 Рік тому
This is insanely good. Thanks a lot for posting this.
@khronos142 2 роки тому
This is the best thing I've seen when it comes to learning about shaders.
@bobosaint7399 Рік тому
Everything I'm supposed to know about shader for now is here. Just amazing!
@reezuleanu1676 2 роки тому
Noob question, I can't find anything related to performance differences between HLSL and the shader graph. Is the workload on the machine the same or can I squeeze out 1-2 extra FPS if I code all the shaders myself (assuming I am doing everything exactly the same) ? I wanna learn how to code shaders, but the graph would be so much better for me for experimenting since the nodes give you a nice little preview and you can see everything that is happening, where as in code I'd have to take every line of code at a time to understand why the effect I'm going for doesn't look right. So after I can code shaders, should I keep coding them myself, or just switch to shader graphs?
@MohammadAlizade 3 роки тому
Haven't watched it yet but i know this is another gold video
@richnaisanze 3 роки тому
agreed
@umirtech Рік тому
yes
@eldar7964 3 роки тому
Thank you Freya for another gem, saving it for the weekend
@Corn0nTheCobb 2 роки тому
You're welcome!
@chromosundrift 2 роки тому
Thank you. Really well done. I have a lot of programming experience but none in shaders so this was really interesting for me.
@serrion1394 2 роки тому
Love your work! 😁 Thank you for the quality content!😸
@yamski5381 3 роки тому
Wow this is GOLDEN!! I wish this existed when I started learning shadercode.
@umutcoskun4247 3 роки тому
Finally I understand how shaders, materials and textures relate and how they work. Thank you.
@Mariiius53 2 роки тому
I learned so much in one video. I was so confused with what Shaders are, how they works... Thank's so much !
@Aloisio_PN 2 роки тому
Freya, you are very incredible. I'm starting with shaders and was completely lost. You helped me a lot! Thank you for that! Merry Christmas and happy new year!
@Aloisio_PN 2 роки тому
Please help us with Toon shader, Outlines shader and Edge Detection Outlines shader. It would be amazing! 😁
@andrestorres4424 9 місяців тому
Wow! I just have 20mins here and all my family moved to another room, while I am still hooked with full joy with this video, the way you explain how it is done, how to achieve it and that you will explain it later in more detail 🤯 Thanks for this, excuse me, now I have to pause the video and charge my phone lol
@melpeslier 7 місяців тому
It's like THE place to go to learn BASICS about shaders ! Super explanations
@andreperegrina Рік тому
3 days trying to finish this video... almost!! I'm a web developer, trying to learn game dev as hobby and your content is pretty cleary, Thanks you!!
@ryarsh1 3 роки тому
10 hours of top-tier knowledge? Yes please, don't mind if I do. Thank you so much for the lessons, Freya! :)
Євробачення Україна | Eurovision Ukraine official
Переглядів 639 тис.
РЕАЛЬНА ІСТОРІЯ
Переглядів 516 тис.
Мелодрама твоей души
Переглядів 1,4 млн
Канал Лучкова
Переглядів 50 тис.
KESHEE BATTERY
Переглядів 8 млн
ЗОЛОТОЕ-TV
Переглядів 1 млн
Daniil Gerasimov
Переглядів 164 тис.
MaxxPC
Переглядів 1,4 млн