Beginner's Guide to Shader Distortion Techniques

5,196
2
Publicado 2024-08-08
Code from the video:
editor.p5js.org/BarneyCodes/sketches/ELbA93Ugb

Try Code Crafters for FREE and get 40% OFF membership:
app.codecrafters.io/join?via=BarneyCodes

Become a member!
youtube.com/channel/UCrzKp7Z7PuuuAPXfQnDTdpQ/join

Join the discord!
discord.gg/Qnc3jWTeEW

Learning shaders can be daunting, but it doesn't have to be! In this video I'll show you the basics of image distortion in a shader, and how you can use that to create an awesome looking shockwave effect, perfect for adding some juice and impact to a game!

Chapters:
0:00 Set up
3:02 Code Crafters
3:51 Simple distortion
5:04 Shockwave overview
5:49 Basic shockwave
10:58 Animation
14:51 Extra effects
16:02 Using different shapes


Follow me:
Twitter: twitter.com/barney_codes
Reddit: www.reddit.com/user/BarneyCodes/

#shaders #gamedev

Todos los comentarios (17)
  • @SpacEagle17
    As a shader dev, this video is an awesome video explaining complex topics in a very simple and structured way, great job!
  • @dylancope
    That was such a high quality video. I really appreciate the time you took to make and animate the diagrams.
  • @Cranky-12
    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.
  • @deltapi8859
    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.
  • @ShiftyTheDev
    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
  • @IceForgeOfficial
    THANK YOU SO MUCH FOR THIS VIDEO! I always wanted to get started in shaders and this really inspires me.
  • @motbus3
    Thanks again for one more vid. ❤ In codecrafters as, it is written +new lanGAUges
  • @learwin4852
    Great video ! Been wanting to learn shaders and your videos are of great help.
  • @4Bakers
    6:34 wouldn't that be a Signed Distance Function? I thought Signed Distance Fields used textures instead of mathematical models
  • @CSMHD
    you can do this waaaay faster i mean like 1000x