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

แชร์
ฝัง
  • เผยแพร่เมื่อ 17 พ.ค. 2024
  • 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!
    🧡 / 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...
    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
  • วิทยาศาสตร์และเทคโนโลยี

ความคิดเห็น • 110

  • @rayurebob3724
    @rayurebob3724 3 ปีที่แล้ว +206

    it's mindblowing to have access to this kind of ressources for free. Thank you !

  • @zeescorpio2441
    @zeescorpio2441 9 หลายเดือนก่อน +2

    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
    @elin4364 3 ปีที่แล้ว +27

    Really appreciate you uploading these videos here on youtube too, they're fantastic!

  • @kelna2
    @kelna2 3 ปีที่แล้ว +15

    This is like a full semester of college shader programming in two videos. Thank you so much!

  • @ManSpidernater
    @ManSpidernater 2 ปีที่แล้ว +12

    Thanks for making this series. It's really not obvious where people learn this stuff without having done heaps of high level mathematics

  • @ismaelomaribanez
    @ismaelomaribanez 3 ปีที่แล้ว +7

    Great class Freya. Thanks for all your time and effort. Please do continue with this series! :)

  • @5daydreams
    @5daydreams 3 ปีที่แล้ว +16

    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

  • @renatusdev
    @renatusdev 3 ปีที่แล้ว +6

    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

  • @bigmistqke
    @bigmistqke 2 ปีที่แล้ว +2

    I love how elegant lambertian light is. Just a line of code.

  • @oldteefgaming5517
    @oldteefgaming5517 2 ปีที่แล้ว +1

    The fast mouse clicks and key strokes are quite nice

  • @sufianahmad7337
    @sufianahmad7337 3 ปีที่แล้ว +14

    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 😀👌

  • @Kabra2012
    @Kabra2012 2 ปีที่แล้ว +3

    This is gonna be crucial knowledge to me shortly (working on a fighting game atm). Cheers from NZ!!!

  • @dipayon3d166
    @dipayon3d166 3 ปีที่แล้ว +3

    You are AWESOME ... All this amazing content for free !!!

  • @anshulsingh8326
    @anshulsingh8326 3 ปีที่แล้ว +3

    Just saw all your channel content. You god or what ?
    I feel so dumb. I know nothing. But thanks for all the free contents ❤️.

  • @maixicek
    @maixicek ปีที่แล้ว

    Finally TH-cam recommends interesting channel. Thank you for video!

  • @JustAnotherGamer1005
    @JustAnotherGamer1005 ปีที่แล้ว +1

    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.

  • @trejkaz
    @trejkaz 2 ปีที่แล้ว +2

    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.

  • @antoinefortin1386
    @antoinefortin1386 3 ปีที่แล้ว +2

    Very well orchestrated!

  • @arseneysorokin5004
    @arseneysorokin5004 2 ปีที่แล้ว

    I was trying to learn this for literally years! Watching these videos I understand what is happening for the first time!
    You are a great teacher! Thank you very much for this.

    • @mjthebest7294
      @mjthebest7294 2 ปีที่แล้ว

      You may also wanna check the work of Chili Tomato Noodle on this topics, with C++ godlike implementations :)

    • @ruslansmirnov9006
      @ruslansmirnov9006 7 หลายเดือนก่อน

      women are usually good at explaining the very basics...

  • @VioletJewel1729
    @VioletJewel1729 2 ปีที่แล้ว +1

    you're a big inspiration to me. I really appreciate you

  • @241lolololol
    @241lolololol 3 ปีที่แล้ว +12

    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?

    • @acegikmo
      @acegikmo  3 ปีที่แล้ว +3

      no plans for that yet!

  • @arthuroverissimo3165
    @arthuroverissimo3165 8 หลายเดือนก่อน

    Amazing content! I've learned a lot so far, went from scared about shaders and rendering to pretty confortable to write custom and crazy shaders, thanks a lot Freya!!
    One thing that I've got missing is that my shader is not receiving shadows from other objects in the scene, am I missing something?

  • @JTPieterse
    @JTPieterse 2 ปีที่แล้ว

    Awesome information, thanks Freya.

  • @MAP233224
    @MAP233224 10 หลายเดือนก่อน +1

    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.

  • @victornoagbodji
    @victornoagbodji 3 ปีที่แล้ว +2

    😊 🙏 😊
    thank you again so much for sharing!

  • @widekeepo9416
    @widekeepo9416 ปีที่แล้ว

    These tutorials are superb!

  • @neozoid7009
    @neozoid7009 ปีที่แล้ว +1

    You are a Great Teacher Freya, Your videos are Awesome 😊💖💖👍

  • @ZedPoirier
    @ZedPoirier 3 ปีที่แล้ว +4

    You floored me at 13:01, wrinting in yellow! Great lessons!!!

  • @gnorts_mr_alien
    @gnorts_mr_alien 2 ปีที่แล้ว

    That was simply amazing.

  • @marwanahmed5377
    @marwanahmed5377 ปีที่แล้ว

    I had coloring problem, but I solved it. Regardless of much details, if white color becomes red or something like that, you will have to keep "fixed4 frag" in the fragment function.
    Thank you Freya for the very informative videos...

  • @moonoovie
    @moonoovie ปีที่แล้ว +1

    I arrived at this series from The Coding Train, it must've been painful for you to be in that chat! And thank Universe you were, because now I'm here and learning a metric shit tonne more about shaders than I ever expected to!
    I've seen references to them in some old Java software I used to use called Structure Synth, that I think was able to output some shader-related data for rendering in what I used at the time called Sunflow. I'm ultra curious if I can revisit some of those old scenes and manipulate the shaders now!

  • @Aloisio_PN
    @Aloisio_PN 2 ปีที่แล้ว

    Freya, thank you so much for sharing your knowledge.
    Big hug from Brazil!
    Please make a video about Toon, Outlines and Edge Detections shaders.
    Merry Christmas and happy new year!

    • @Aloisio_PN
      @Aloisio_PN 2 ปีที่แล้ว

      Freya, thank you again!
      How can we do to cast shadows in shaders?
      It would be amazing to learn this with you!
      😊

  • @elmandibulas1605
    @elmandibulas1605 2 ปีที่แล้ว

    awesome!!! thank you very much for sharing and iluminate our brains!!

  • @toridomiart7092
    @toridomiart7092 2 ปีที่แล้ว +2

    Event though I intend to stick with nodes (mostly bc I mainly work in blender & unreal) your videos are so well explained and help me better understand the underlying things and maths going on with what I'm doing! I also love to put these two parts on repeat while I'm modeling - your voice and cadence is really pleasant to listen to, and I sponge up more info all the time 🥰️

  • @sagrgywejhxcvx
    @sagrgywejhxcvx 2 หลายเดือนก่อน

    thank you for your impact

  • @aloea
    @aloea ปีที่แล้ว +1

    I encountered a problem in the Phone Lighting code, that _WorldSpaceLightPos0 is always “0” and cannot work. Upon checking, I found that this is because I previously set the [Skybox Material] in the Environment settings of the scene to "None". Can someone explain the reason for this problem or provide some relevant information? Thank you !

  • @SanyaBane
    @SanyaBane 2 ปีที่แล้ว +1

    As far as I understand, in Unity, UI is usually located inside Canvas.
    How can we apply this "HealthBar" shader inside the Canvas?

  • @alvaroalda3112
    @alvaroalda3112 ปีที่แล้ว

    Hi! How could you implement indirect lighting to avoid dark spots in your mesh? When light hits the mesh the opossite normals tells the fragment shaders to be dark, in URP when you introduce a mesh thats not the case so how can I avoid the dark spots in the mesh, which are the calculations?

  • @Enoc63
    @Enoc63 2 ปีที่แล้ว

    I fell asleep and woke up to this, not even mad 🤔

  • @giuseppegioi9659
    @giuseppegioi9659 4 หลายเดือนก่อน

    Freya you don't know how thankful I am for these videos.
    Is there any chance you could make one video also explaining how to implement PBR lighting? instead of the basic phong/blinn-phong?

  • @saeedbarari2207
    @saeedbarari2207 2 ปีที่แล้ว

    this is AWESOME!!!! free? That's even MORE AWESOME! all the best wishes !!

  • @Eva-ez1ks
    @Eva-ez1ks 2 ปีที่แล้ว +1

    The 2D capsule-like shape is called a stadium!

  • @elronnd_9515
    @elronnd_9515 ปีที่แล้ว

    31:31 wouldn't it be better to do this in the fragment shader? I've heard discard is very expensive on some hardware.

  • @ukidabek
    @ukidabek 2 ปีที่แล้ว

    How to align text in rider to center of the screen? I will be grateful if you can tell me. I can't find this setting. :C

  • @josecoles4126
    @josecoles4126 2 ปีที่แล้ว

    amazing video. I have been able to follow along fine up until the lighting part. The objects are fully black with no light reflecting off the objects at all. i even tried downloading your sample scene and it is doing the same. is it to do with my unity settings? cheers

    • @josecoles4126
      @josecoles4126 2 ปีที่แล้ว

      i upgraded materials to hdrp and it seemed to fix it lol

  • @Gregu91
    @Gregu91 ปีที่แล้ว

    Great video. I have a question abaut shader and metarials. Is there any way to change shader preporties in only one object? For example I have 10 enemies, all of them use the same shader to health bar, and one of them have less health and change health preporties (in shader) only for this enemy. I know I can crate manualy 10 materials with this shader or crate it from code, but it's not very usefull...

    • @acegikmo
      @acegikmo  ปีที่แล้ว

      you'll want to use these!
      docs.unity3d.com/ScriptReference/MaterialPropertyBlock.html

    • @Gregu91
      @Gregu91 ปีที่แล้ว

      @@acegikmo Yeah, that's works how I want, thanks :)

  • @user-on6dr9mh5t
    @user-on6dr9mh5t ปีที่แล้ว

    that best what I saw about hlsl👍

  • @qrthack3233
    @qrthack3233 ปีที่แล้ว

    What tablet are you using for drawing? Please asnwer me

  • @372leonard
    @372leonard 3 ปีที่แล้ว +6

    How do I upvote twice?

  • @rosyfu5845
    @rosyfu5845 2 ปีที่แล้ว +1

    Freya you are awesome!

    • @acegikmo
      @acegikmo  2 ปีที่แล้ว

      thank you

  • @zeldinus
    @zeldinus 9 วันที่ผ่านมา

    Can anyone mention which headset she is wearing? Looks very comfy!

  • @fwdflashwebdesign
    @fwdflashwebdesign 4 หลายเดือนก่อน

    You are so beautiful :) and this reflects in your teaching!

  • @simonfarre4907
    @simonfarre4907 2 ปีที่แล้ว +1

    Vec4 is GLSL for float4.

  • @kzikzikzi
    @kzikzikzi 10 หลายเดือนก่อน

    I could go through all tutorials on how to do wild stuff and I would not understand a fraction of the stuff I learnt from the health bar 🥰

  • @r.macedo3612
    @r.macedo3612 5 หลายเดือนก่อน

    18:00
    Just a "bit-brushing"
    float _Health;
    static const float2 _Color = float2(1-_Health,_Health);

  • @aomsoma
    @aomsoma 5 หลายเดือนก่อน

    Watching this at 2:07 am

  • @apkiller10
    @apkiller10 2 ปีที่แล้ว

    with android compression tool, always end up in gimp making uniform textures in texal blocks to simulate lots of detail material texture2d sampler for something like opengl es2.0 shader..

  • @doven8500
    @doven8500 2 ปีที่แล้ว

    (ctrl + alt + L) can format shader code in Rider

  • @zalewskisz
    @zalewskisz ปีที่แล้ว

    Hi, can anyone quote or link the reference in 1:30:00 please, I can't figure it out by ear. Thanks for amazing videos!

    • @vtoz1830
      @vtoz1830 ปีที่แล้ว

      Inigo Quilez, subtitles went Inigo Keyless .

  • @LisandroLorea
    @LisandroLorea 2 ปีที่แล้ว

    3:11:05 it actually looks like the top half of Mokona from Magic Knight Rayearth looking to the left

  • @swalscha
    @swalscha 3 ปีที่แล้ว

    @Freya Holmér
    Is it possible to use shader to have stylised effects on a text in a dialog box? If it is, did you ever try this before and have some piece of advice?
    Thank you for sharing this awesome serie on shaders!

    • @acegikmo
      @acegikmo  3 ปีที่แล้ว +1

      definitely possible, but the difficulty of this depends on how the text is rendered and what effects you want. ideally you'd alter the shader rendering the text, and do the thing you want to do in there

    • @swalscha
      @swalscha 3 ปีที่แล้ว

      @@acegikmo thank you, I'll give it a try when I'll be at the dialog system to see how balance the complexity between all I want.
      Roughly, I was thinking of three types of effect on specific words :
      - subtile glowing effect to emphasize ;
      - appearance of the word with a displacement effect on the characters ;
      - appearance of the word with a linear raise of the alpha.
      Clearly, I'll need to create a dialog system that let me alter the shader rendering as you said.

  • @sunmark8994
    @sunmark8994 ปีที่แล้ว

    Did exactly the same thing shown in the lighting section, the light vector just wouldn't change when I roatate the directional light, and when I output the diffuse light, the shadow just stick where it is no matter how I move thelight.

    • @sunmark8994
      @sunmark8994 ปีที่แล้ว +1

      Found the reason, need to add a tag "LightMode" = "ForwardBase"

  • @GameDevNerd
    @GameDevNerd 2 ปีที่แล้ว

    Freya has the name and intellect of one of my revered goddesses ... I love this girl and her videos. They don't make girls like this where I'm from (I'm from a really bad place lol).
    Liked and subscribed!

    • @squarerootof2
      @squarerootof2 2 ปีที่แล้ว

      Lmfao, you sure about that?

    • @GameDevNerd
      @GameDevNerd 2 ปีที่แล้ว

      @@squarerootof2 lmao I get it, but don't mess with her ... she's an amazing resource for shader knowledge and helps us a lot

    • @squarerootof2
      @squarerootof2 2 ปีที่แล้ว +1

      @@GameDevNerd No worries :)

  • @TheHerpthatderp
    @TheHerpthatderp 11 หลายเดือนก่อน

    God I love your work. I wish I had an income right now just so I could show you some support.

  • @xanderbeaky4546
    @xanderbeaky4546 ปีที่แล้ว

    lol i totally just did the rounded corners with a texture 😬

  • @anl5460
    @anl5460 2 ปีที่แล้ว

    More shader videos pweeeasee

  • @chilpox3671
    @chilpox3671 3 ปีที่แล้ว +2

    is this original version of video or pirated? who is original author?

    • @acegikmo
      @acegikmo  3 ปีที่แล้ว +2

      this is my video, did you find it elsewhere?

    • @chilpox3671
      @chilpox3671 3 ปีที่แล้ว

      @@acegikmo i have watched all the 3 videos on another website(not youtube) it was also free but i dont remember the name. It came up when i searched unity hlsl tutorials

  • @celtavanyname5400
    @celtavanyname5400 2 ปีที่แล้ว

    When I make a mistake my stressbar is rising. Thank you.

  • @zalxder
    @zalxder 2 ปีที่แล้ว

    3:24:18 I put 600± hours into overwatch, in match time, since I began playing a year ago

  • @williamluong7743
    @williamluong7743 2 ปีที่แล้ว

    is that an astrophotography mount in the background

  • @Alperic27
    @Alperic27 2 ปีที่แล้ว

    🙏🏻

  • @NerukESP
    @NerukESP 3 ปีที่แล้ว

    ok let me sub XD

  • @nfcopier1
    @nfcopier1 ปีที่แล้ว

    Watching this a year later and wonder if she ever set up a shader template...

  • @beaumanVienna
    @beaumanVienna 2 ปีที่แล้ว

    3:04:03 ? if the surface turns into a mirror...

  • @yanlongyang323
    @yanlongyang323 หลายเดือนก่อน

    🍵

  • @ademarneto4487
    @ademarneto4487 3 ปีที่แล้ว +1

    Kanye West twitter avatar on the thumbnail

  • @hardway777
    @hardway777 11 หลายเดือนก่อน

    0:13 😻

  • @chengqili3294
    @chengqili3294 2 ปีที่แล้ว

    For anyone receiving zero for _WorldSpaceLightPos0, the solution is do not use URP.

  • @user-sh7ft3cz8x
    @user-sh7ft3cz8x 3 ปีที่แล้ว

    3:03:00

  • @ryuk-gj9uz
    @ryuk-gj9uz 3 หลายเดือนก่อน

    1:53:23

  • @pixppgame
    @pixppgame 2 ปีที่แล้ว

    In Chinese,你太牛逼了,佩服佩服

  • @dookcurruff9047
    @dookcurruff9047 2 ปีที่แล้ว

    ur so beautiful queen

  • @vedicfriend
    @vedicfriend หลายเดือนก่อน

    why do u have such long videos

  • @KiWiKiWiJaKe
    @KiWiKiWiJaKe 3 หลายเดือนก่อน

    My TH-cam auto played this and I woke up in the middle of a nightmare hearing “ahhm”. I hope i never have to hear you ever again.

  • @infegfx
    @infegfx ปีที่แล้ว

    It is very easy to understand how that graphical elements and shapes are works but that coding is wipe my mind. Is there any different way to make it without coding? And also I have to say in general, computers (PC) we are using when programmed to simulate physic, colors, or other things like visual effects in real time, they need too much calculations for that. It need too much cpu and ram. By the other computers are not made to make this things at first because that smart genius people who makes first computers are made it for their required and necessary. That chips (CPU)'s are using binary numbers and it is very hard way to make it. They have to make different CPU works like Analog at that time computers can works too much faster for some other things as we can see in this video. It is very hard to have that type of CPU because there are no genius left in this planet to make a new ideas to create.

  • @robojackmu
    @robojackmu 3 ปีที่แล้ว +1

    the assignments are too easy, i dont need to do anything, and i dont even know what the content of assignments is hahahahahahahhahahahahahah