Beginner's Guide to Shader Distortion Techniques

แชร์
ฝัง
  • เผยแพร่เมื่อ 23 พ.ย. 2024

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

  • @SpacEagle17
    @SpacEagle17 3 หลายเดือนก่อน +17

    As a shader dev, this video is an awesome video explaining complex topics in a very simple and structured way, great job!

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

      Thanks so much, really appreciate it!

  • @lachee3055
    @lachee3055 3 หลายเดือนก่อน +6

    finally, a guide using colour

  • @dylancope
    @dylancope 3 หลายเดือนก่อน +11

    That was such a high quality video. I really appreciate the time you took to make and animate the diagrams.

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

      Thanks so much!

  • @deltapi8859
    @deltapi8859 3 หลายเดือนก่อน +4

    this is an exceptionally well made video. the pace and detail is awesome to reason about the content. Also like the display of "new image" vs "old image". Very well done.

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

      Thank you so much, glad you liked it!

  • @ShiftyTheDev
    @ShiftyTheDev 3 หลายเดือนก่อน +5

    Excellent video! Your explanations combined with the animations made it really easy to follow along. Usually shaders can get pretty messy, but you did a great job

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

      Thanks so much! I'm doing my best to make shaders more approachable, so thanks for the encouragement!

  • @Cranky-12
    @Cranky-12 3 หลายเดือนก่อน +1

    Really cool, I have never seen this done with a SDF. Usually this is done with a regular normal map where you use the normal vectors as offsets. That has the added benefit of not only being able to change the shape of the shockwave, but also give it a texture/roughness. You can generate the normal map from a shockwave mesh in blender for instance. You can then also rotate it etc. It can be really versatile, and be used for instance for heat distortion from a flame. But the SDF approach has the benefit of not becoming blocky/revealing the resolution of the texture if scaled up a lot.

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

      It's certainly a more resource intensive than using a texture, but you can calculate the normal from the SDF. The thing I quite like about this approach is being able to change the shapes, it might not be very practical in a game but I think it's pretty cool hahaha
      Thanks for the comment!

  • @wata1991
    @wata1991 4 วันที่ผ่านมา +1

    born too late to be a cave man, born too early to explore space, born just in the right time to learn about cool shader stuff

  • @artificiyal
    @artificiyal 3 หลายเดือนก่อน +2

    this is a gem for shader noobs like me

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

    Awesome video! Just what I needed!

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

      Glad you liked it!

  • @motbus3
    @motbus3 3 หลายเดือนก่อน +1

    Thanks again for one more vid. ❤
    In codecrafters as, it is written +new lanGAUges

    • @BarneyCodes
      @BarneyCodes  3 หลายเดือนก่อน +1

      Whoops! Good pick up hahaha

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

      @@BarneyCodes my eyes are trained for this specific mistake because someone configured an important variable with this mistake and unfortunately it has been replicated across the boundaries of an API. So everybody is writing lanGAUges because no one wants to update dozen of different repos

  • @learwin4852
    @learwin4852 3 หลายเดือนก่อน +1

    Great video ! Been wanting to learn shaders and your videos are of great help.

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

      Thanks so much, that's very encouraging to hear! I noticed when I was learning shaders that there wasn't much beginner-intermediate stuff out there, so very glad that my videos are helping to fill that gap!

  • @SombreroMan716
    @SombreroMan716 3 หลายเดือนก่อน +1

    awesome video!

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

    THANK YOU SO MUCH FOR THIS VIDEO! I always wanted to get started in shaders and this really inspires me.

    • @BarneyCodes
      @BarneyCodes  3 หลายเดือนก่อน +1

      No worries at all! Let me know if you've got any questions, always happy to help out :)

  • @4Bakers
    @4Bakers 3 หลายเดือนก่อน +4

    6:34 wouldn't that be a Signed Distance *Function?* I thought Signed Distance Fields used textures instead of mathematical models

    • @BarneyCodes
      @BarneyCodes  3 หลายเดือนก่อน +1

      I could definitely be wrong on this, but I thought they could be used interchangeably. Your definition makes a lot of sense though!

  • @ZiplawDev
    @ZiplawDev 3 หลายเดือนก่อน +1

    really nice video man

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

      Appreciate it!

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

    What are you going to use the shockwave effect for? I'd love to know!
    And don't forget to check out Code Crafters and get 40% off! app.codecrafters.io/join?via=BarneyCodes

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

    you can do this waaaay faster
    i mean like 1000x

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

      you wanna know how ?
      think parallel ...
      draw all distortion on canvas with rgb
      then distort hole screen at once
      :D

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

      This method is distorting the whole screen at once using the parallel power of the GPU!

    • @CSMHD
      @CSMHD 3 หลายเดือนก่อน +1

      I guess i misunderstood the first sentence of the video. You said its in many games. Not like infinite many shokwaves at the same time.
      I used a similar shader in my game. The limit was 10 fullscreen shockwaves at the same time.
      B.c. if you want to add a second wave you need to rerun the hole shader on the already distorted image from the 1st shokwave-image. Right?
      Thats not parallel at all.
      With my idea you can run 10000 shockwaves as big or as little at the same time all at once.

    • @CSMHD
      @CSMHD 3 หลายเดือนก่อน +1

      Nevertheless. Damn good tutorial !!

    • @BarneyCodes
      @BarneyCodes  3 หลายเดือนก่อน +1

      Oh I see! I was wondering about this, and I think with this method you'd be able to do them all in a single pass and accumulate the offsets for each wave before sampling the background image.
      Interested to hear your idea though for sure!