Healthbars, SDFs & Lighting • Shaders for Game Devs [Part 2]

224,048
0
Published 2021-02-26
where we take a look at creating the healthbar from the assignment, and learn about SDFs and lighting!

If you are enjoying this series, please consider supporting me on Patreon!
🧡 www.patreon.com/acegikmo

00:00:00 - Healthbar assignment 1a
00:25:09 - Healthbar assignment 1b
00:30:20 - Healthbar assignment 1c
00:40:20 - Questions
00:42:34 - Healthbar assignment 1d
00:56:38 - Questions (during break)
01:01:03 - Healthbar assignment 1e
01:18:57 - Healthbar rounded edges
01:49:08 - Healthbar border
02:01:28 - 3D SDF raymarching showcase
02:02:50 - How SDF raymarching works
02:07:01 - Questions
02:08:29 - Lighting
02:28:48 - Questions
02:12:35 - Diffuse light (Lambert)
02:32:10 - Specular light (Phong)
02:49:10 - Questions during break
02:50:32 - Specular light (Blinn-Phong)
02:58:16 - Gloss remapping
03:02:14 - Compositing (putting it all together)
03:07:31 - PBR & BRDFs
03:11:28 - Energy conservation
03:18:12 - Questions
03:21:53 - Forward vs deferred rendering
03:24:11 - Fresnel glow effect
03:29:00 - Assignment 2

Project Download & Assignments: docs.google.com/document/d/1h_7O9n5-q8Kb-rhnMJyF4T…

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 ❱ www.patreon.com/acegikmo
🐦 Twitter ❱ twitter.com/FreyaHolmer
📺 Twitch ❱ www.twitch.tv/acegikmo
💬 Discord ❱ discord.gg/v5VWuga
🌸 Instagram ❱ instagram.com/freya_holmer

✫ Video Production by Higher Vision:
twitter.com/HigherVision1
➤ Edited by Stelly: twitter.com/stelly47050876

All Comments (21)
  • @rayurebob3724
    it's mindblowing to have access to this kind of ressources for free. Thank you !
  • @zeescorpio2441
    Your content is like a goldmine for me currently watching and practicing on repeat. Shader is something i struggle with. But your way of explanation and teaching is superior to anything i have ever seen about shaders. Thank you for you invaluable content.
  • @elin4364
    Really appreciate you uploading these videos here on youtube too, they're fantastic!
  • @kelna2
    This is like a full semester of college shader programming in two videos. Thank you so much!
  • @5daydreams
    Huge fanboy here: The way you went through the SDF math was so god damn amazing. I wish more mathsy people taught like you :v
  • @ManSpidernater
    Thanks for making this series. It's really not obvious where people learn this stuff without having done heaps of high level mathematics
  • Great class Freya. Thanks for all your time and effort. Please do continue with this series! :)
  • @anshulsingh8326
    Just saw all your channel content. You god or what ? I feel so dumb. I know nothing. But thanks for all the free contents ❤️.
  • @renatusdev
    I think the lil issue on the first assignment was a good thing. It made me kinda reflect on reasons why it wouldn't work. Then I figured that maybe the first and last pixels of the texture where different; AND THEN BOOM. Fixed. So yeh. (dunno if that was the actual issue but i assumed as much). I now got that error catcher on my toolshed. anywho' round 2 les go
  • @sufianahmad7337
    Thanks for sharing. I love your content and the way you teach these difficult concepts in a very polite and convenient way. Thanks for being here 😀👌
  • Love how you go in-depth and step by step into it. Makes me miss programming, although I've never had the opportunity to do game-development back in the day. We only learned programming for databases, hardware and networking back then. I went to college to learn how to make games, but there wasn't a gaming industry in my country and information wasn't as easy to find as today. It would've been better if I was born like 15 years later or so 😅. Although I'm more of a designer than a programmer now, there is still deep rooted love for programming, which is obvious when I watch these sort of video's. But I seem to process information not as easily as 15 years ago and I was always a visual learner, so I dig these kind of explanations. Makes it easier to understand, even with the disadvantage of English/US not being my native language (sometimes difficulties with understanding specific jargon words). I will never be a full fledge programmer, but this helps getting a better understanding when I design my game.
  • @Kabra2012
    This is gonna be crucial knowledge to me shortly (working on a fighting game atm). Cheers from NZ!!!
  • @bigmistqke
    I love how elegant lambertian light is. Just a line of code.
  • @dipayon3d166
    You are AWESOME ... All this amazing content for free !!!
  • @MAP233224
    1:47:33 when using the clip function, the whole process of actually using the signed distance field properly becomes very opaque, because it's doing the most important step of the whole process (aka Anti-Aliasing at any resolution) without telling us how.
  • @maixicek
    Finally YouTube recommends interesting channel. Thank you for video!
  • @trejkaz
    54:07 This behaviour of where the sampler takes the sample is easier to think about if you think of a smaller texture, say 2 x 2 texels. There will be 2 texels stretched across from left to right, but 0.0 is still all the way to the left and 1.0 is still all the way to the right. So no of course 1.0 wouldn't sample in the middle of the texel - in this case you'd need to sample at 0.75 to get that. For me, this became clear when I tried to implement a shader which cut the texture into multiple sprites, because when you do that, you end up with the same bleeding happening there and have to work around it in your own code by grabbing the texel size from _MainTex_TexelSize and manually clamping your values to the middle of the texel.
  • @241lolololol
    Thank you for putting out these great videos! I am mostly a game logic programmer but want to get into using shaders and this is great help! I was wondering if youd go over compute shaders and how to use them in future videos?