Common VFX Shader Techniques ft. Godot

Поділитися
Вставка
  • Опубліковано 25 лис 2024

КОМЕНТАРІ • 147

  • @onetupthree
    @onetupthree  Рік тому +7

    update!
    WhtLotus (discord: whtlotus) very kindly made a visual shader version of the project from this video 🥳 It's also up for free in my latest Patreon post (along with some life updates)
    Cheers everyone! 🥂

  • @DevLogLogan
    @DevLogLogan Рік тому +70

    Community definitely needs more great VFX/Shader centric content like this! Great stuff!! ^^

    • @onetupthree
      @onetupthree  Рік тому +4

      thank you so much! 🙇‍♂🙌

  • @PrecisionRender
    @PrecisionRender Рік тому +24

    This channel is a hidden gem. I hope this knowledge reaches a large audience!

  • @godotShaderBoy
    @godotShaderBoy 7 місяців тому +2

    Cool to see we share the same passion about shaders, keep it up!

  • @LisaDaugesVFX
    @LisaDaugesVFX Рік тому +6

    Absolute banger of a video !! I learned a lot and it made shader programming not as scary as it used to be !!

    • @onetupthree
      @onetupthree  Рік тому

      thank you ! 🙇‍♂ i hated writing shaders in unity 😭 godot's is way easier to approach + so well documented it's crazy

  • @Rankao
    @Rankao Рік тому +1

    I think you finally got VFX shaders to click for me. I haven't come across anything where people broke it down into atomic effects before so it makes a lot more sense.

    • @onetupthree
      @onetupthree  Рік тому

      that's great to hear ! good luck w/your VFX 🥳

  • @PureAsbestos
    @PureAsbestos Рік тому +3

    1:40 you can also write UV.x and UV.y which would be more semantically accurate

  • @artemouse4133
    @artemouse4133 Рік тому

    You've saved my life thank you so much! I'll need to do some tooling around with this info to suit what I'm trying to do but this has been incredibly helpful.

    • @onetupthree
      @onetupthree  Рік тому

      that's awesome ! good luck with the tooling 👌

  • @Nilski
    @Nilski Рік тому

    YES! Been looking for high quality Godot VFX content. Very appreciated!

    • @onetupthree
      @onetupthree  Рік тому

      thank you for the kind words ! 🙌

  • @lkasikakalus123
    @lkasikakalus123 2 місяці тому +1

    i wonder if you can make video about basic shader work. like how to work/calculate uv and vertex

  • @jijigri9224
    @jijigri9224 Рік тому +2

    Great video! We definitely need more Godot VFX tutorials!

  • @Wo0dY101
    @Wo0dY101 Рік тому

    Take my subscription! Damn that was well explained. You made some stuff click that I have been trying to understand for a while now.

    • @onetupthree
      @onetupthree  Рік тому

      thank you so much ! glad i could help out 🥳

  • @AgriasOaks99
    @AgriasOaks99 Рік тому

    Whoah!
    We need more things like this, Sensei! ☝️

  • @bjarkibjarkibjarki
    @bjarkibjarkibjarki Рік тому

    thx for the subtitles i appreciate it

    • @onetupthree
      @onetupthree  Рік тому

      of course! 👀 we gotta have em 👌

  • @WiseNoodleOfficial
    @WiseNoodleOfficial 9 місяців тому

    Very well explained good sir! You've earned yourself another sub :)

    • @onetupthree
      @onetupthree  9 місяців тому +1

      thank you so much ! 🙌

  • @baoinh2968
    @baoinh2968 Рік тому +1

    These tips are really useful

  • @daniridao
    @daniridao Рік тому

    wow wow wow, stop for a second. What is this channel and why didn't I know of it already? FOLLOWED!

    • @onetupthree
      @onetupthree  Рік тому +1

      very kind of you to say 🙇‍♂️
      thank you!

  • @ShinSpiegel
    @ShinSpiegel 9 місяців тому

    This is an amazing video, thanks for sharing.

  • @veecks
    @veecks 10 місяців тому +1

    Great video, but i think the distortion part was kinda rushed, but well i am a begginer in shaders

  • @snaker90
    @snaker90 Рік тому

    Wow, this's exactly what I need!

  • @SuperMario9080
    @SuperMario9080 Рік тому

    I love this, thanks for the video!

    • @onetupthree
      @onetupthree  Рік тому

      thank you so much ! im glad you liked it 🥳

  • @vejroniottan-n9s
    @vejroniottan-n9s 10 місяців тому

    This was fantastic - thanks!

  • @Nayckron
    @Nayckron Рік тому

    I can see the channel exploding in views in the future, videos like this are bangers, keep it up.

    • @onetupthree
      @onetupthree  Рік тому

      thank you so much for the kind words ! 🙏

  • @pipeliner8969
    @pipeliner8969 10 місяців тому

    I am addicted to Godot videos lol

  • @AnotherByteData
    @AnotherByteData Рік тому

    Really good and easy to understand! Kudos!!!!

    • @onetupthree
      @onetupthree  Рік тому +1

      thank you :D glad it was helpful !

  • @Archeia
    @Archeia Рік тому

    I learned a lot with this! Thank you :3

  • @bencepaul3497
    @bencepaul3497 Рік тому

    Great examples!

  • @RecreationalProgramming
    @RecreationalProgramming Рік тому

    Thank you, this is very helpful!

    • @onetupthree
      @onetupthree  Рік тому +1

      thank you! im glad to hear that 🙌

  • @godofdream9112
    @godofdream9112 Рік тому

    Finnally, some VFX on Godot...

    • @onetupthree
      @onetupthree  Рік тому

      all thanks to a certain other engine's shenanigans 👀

  • @DylanCalaf
    @DylanCalaf 6 місяців тому

    is it just me or is this video above average good? Edit: you just earned a subscriber

    • @onetupthree
      @onetupthree  6 місяців тому +1

      i appreciate it a lot 🙏

  • @SirPigeonz
    @SirPigeonz Рік тому

    Amazing tutorial bro!

  • @danielsndgamevideos
    @danielsndgamevideos Рік тому +2

    Great info! Thank you for the video, if I may ask, in a future video can the background music be less distracting? Made it hard to focus on the voice/explanation in some parts, otherwise great video ^^ thanks again.

    • @onetupthree
      @onetupthree  Рік тому

      thank you ! and gotcha on the background music 👌

  • @GameDevGeeks
    @GameDevGeeks Рік тому

    insanely informative video!

    • @onetupthree
      @onetupthree  Рік тому

      thank you ! im glad it was helpful 🙌

  • @doohp
    @doohp Рік тому +1

    banger video made me switch to godot

  • @xdanic3
    @xdanic3 5 місяців тому

    Polar coordinates is a bit unintuituve until you know atan is a function used for everything, if you want to get the direction of your joystick controller, you use atan(2) as well.
    However the erosion shader is quite unintuituve, feels like those off by one errors when programing, and I don't think if programing languages arrays started at 1 would be easier either, sadly

  • @sergodobro2569
    @sergodobro2569 3 місяці тому

    Cool video!

  • @mikaelfoster9726
    @mikaelfoster9726 21 день тому +1

    Instant sebastian vibes

    • @onetupthree
      @onetupthree  21 день тому

      @@mikaelfoster9726 is sebastian pog

    • @mikaelfoster9726
      @mikaelfoster9726 21 день тому

      @onetupthree sebastian lague is pog asf

  • @pietraderdetective8953
    @pietraderdetective8953 Рік тому +1

    wow this is great content!
    would be awesome if your turn this into a series.
    Liked and subscribed!

    • @onetupthree
      @onetupthree  Рік тому

      thank you so much ! 🥳 i do have a couple more shaders i use but I want to understand them enough first before i can make a video about those
      the next videos will be breakdowns of the last 2 godot vfx i made 🙇‍♂

  • @pythonixed4448
    @pythonixed4448 4 місяці тому

    Could you implement an open ocio lut as a shader? I use Linear values for film vfx. If my sprites were 16k Lin images could a shader act as a 2D lut on the whole screen?

  • @CristianAvellino
    @CristianAvellino Рік тому

    thanks

  • @scribblingjoe
    @scribblingjoe Рік тому +1

    At the time I’m watching this video upload time says “3d ago”. I thought that was cool. Just wanted to share.

  • @xxidbr9
    @xxidbr9 Рік тому

    ah finaly godot 🎉

  • @thygrrr
    @thygrrr Рік тому

    That was pretty good ^^

  • @eivisch
    @eivisch Рік тому

    this video is very good if you can make things from theory into something real, sadly its not me

    • @onetupthree
      @onetupthree  Рік тому

      heyy we all learn differently and that's ok! i believe in you :D

  • @flintpisser
    @flintpisser Місяць тому

    How can I apply say the distortion effect to a triplanar texture? pls help thnx

    • @onetupthree
      @onetupthree  Місяць тому

      since triplanar relies on position (either local or world), distortion would mean you need to offset the position e.g. via noise and use that instead to sample for the triplanar effect

  • @Shiromaru.
    @Shiromaru. 8 місяців тому

    epic!

  • @paegr
    @paegr 10 місяців тому

    For the Distortion shader, is there a way to make it so that increasing distortion_intensity doesn't move the albedo_tex away from the center?

    • @onetupthree
      @onetupthree  10 місяців тому

      hi ! you can add a -0.5 to the float noise_tex i showed in the video 👌this just remaps the noise value from (0 -> 1) to (-0.5 -> 0.5)
      code:
      float noise_tex = texture(noise, noise_uv).r - 0.5;

    • @paegr
      @paegr 10 місяців тому

      @@onetupthree That fixed it, thanks!

  • @zzzzzzzzzzzzzzzzzzzzzzzzzzzz__

    MOOOOREEEEE

  •  Рік тому

    Super Tut in Shader

  • @viniciusantonio2253
    @viniciusantonio2253 11 місяців тому

    so I basically need to add techniques on top of techniques?...
    for example, to make a 2d top-down clouds shaders I just adds erosion on top of tilling a nois texture?

    • @onetupthree
      @onetupthree  11 місяців тому

      yes :D i haven't tried personally but that could be one way to do it !
      you could also even try layering noises on top of each other with different offset speeds so it doesn't look too uniform 🤔

    • @viniciusantonio2253
      @viniciusantonio2253 11 місяців тому

      @@onetupthree Thanks for the insight! Your videos got me into shaders, but I found it quite difficult to glue math with visuals, but one day I'll wrap my head around it :)

    • @onetupthree
      @onetupthree  11 місяців тому

      @@viniciusantonio2253 you got this 😤🙏 if you have any questions feel free to ask here !

  • @apoc519
    @apoc519 Рік тому

    How is the visual shader editor in Gadot?

    • @onetupthree
      @onetupthree  Рік тому

      haven't tried it so im afraid I can't help with that one yet 😰

  • @timaster18885
    @timaster18885 Рік тому

    very good video

  • @schmecklin377
    @schmecklin377 Рік тому

    awesome

  • @PunCala
    @PunCala Рік тому

    Could you please make a tutorial on how to do cloud shadows with a shader? For a 2D pixel art game as well as 3D.

    • @onetupthree
      @onetupthree  Рік тому

      not sure what you mean exactly but if you're talking about raymarching then cant help much bc I also gotta learn that 🤣😰

    • @PunCala
      @PunCala Рік тому

      @@onetupthree Cloud shadows shader is the one where the clouds cast moving shadows on the ground. Another very needed shader is the god rays shader.

  • @TheLogicalFounder
    @TheLogicalFounder 3 місяці тому

    Can these shaders be applied on a color rect?

    • @onetupthree
      @onetupthree  3 місяці тому

      yes but you need to adjust them for the CanvasItem shader type :) the math should be about the same

  • @mistouluf8518
    @mistouluf8518 8 місяців тому

    what is texture_albedo for "mask" shader ?

    • @onetupthree
      @onetupthree  8 місяців тому

      hi! :) that's just a sampler2d
      in the video, it was the godot logo

    • @mistouluf8518
      @mistouluf8518 7 місяців тому

      @@onetupthree The code still doesn't work, what declaration for ALBEDO & albedo & ALPHA? in godo 4

    • @onetupthree
      @onetupthree  7 місяців тому

      @@mistouluf8518 the source code is up in my patreon for free if you want to check it out :)

    • @mistouluf8518
      @mistouluf8518 7 місяців тому

      Thank you, but I still can't solve certain problems. In 2D with tilemap I would like to use clip children but it doesn't work. Would you like to create a shader?@@onetupthree

  • @luskarian4055
    @luskarian4055 Рік тому

    I love you so much

  • @sinlee6064
    @sinlee6064 Рік тому

    how to put it to 2D Sprite or MeshInstance2D? that is sooo cool !! Thank for your toturial!

    • @onetupthree
      @onetupthree  Рік тому +1

      hi ! thanks for the kind words 🙇‍♂
      for 2D sprites it should be around the same but you're working with the 'canvas_item' shader_type as opposed to the 'spatial' type
      ALBEDO built_in would be replaced with COLOR and to access the texture you set in the Sprite2D Inspector, you use TEXTURE
      using the tiling and offset as example
      ---
      A. spatial
      uniform sampler2D your_custom_texture;
      uniform vec2 tiling;
      uniform vec2 offset;
      void vertex() {
      UV = UV * tiling + offset;
      }
      void fragment() {
      ALBEDO = texture(your_custom_texture, UV);
      }
      B. canvas_item
      uniform vec2 tiling;
      uniform vec2 offset;
      void vertex() {
      UV = UV * tiling + offset;
      }
      void fragment() {
      COLOR = texture(TEXTURE, UV); // TEXTURE from inspector value
      }
      ---
      there might be some mistakes in the code here but hopefully gets the point across ! :D hope this helps

    • @sinlee6064
      @sinlee6064 Рік тому

      @@onetupthree Thank you!!!it's making my life easier ,your toturial is so useful,Thank again!

    • @onetupthree
      @onetupthree  Рік тому

      @@sinlee6064 no prob ! glad i could help 😤👌

  • @kobedev
    @kobedev 10 місяців тому

    Do you know if there is a way to do an effect similar to the galaxy skin from fortnite (idk how else to explain it lmao)

    • @onetupthree
      @onetupthree  10 місяців тому +1

      havent tried making that but I imagine it has something to do with screen-space UVs 🤔 you can search it up on google images to see what i mean
      sample with screen-space UVs on a separate scene with your galaxy environment

    • @onetupthree
      @onetupthree  10 місяців тому

      to add to the last part i imagine you put the galaxy on something like unity's render texture and sample from that

  • @ThisIsFez
    @ThisIsFez Рік тому

    please how do i make this work for canvas and not spatial. specifically the diagonal offset animation. total noob here

    • @onetupthree
      @onetupthree  Рік тому

      hi ! if you mean the polar coordinates, if you follow the steps to get the polar UVs it should also work for CanvasItem shaders 🤔
      can you try this line after calculating for polar_uv?
      COLOR = texture(TEXTURE, polar_uv);
      TEXTURE is the dedicated texture variable for canvas items when a texture is assigned in a control node :D make sure to set Repeat as Enabled 👌
      hope this helps !

    • @ThisIsFez
      @ThisIsFez Рік тому

      @@onetupthree sorry for not being clear. For the first demo you showed, I wanted just an offset animation with a sprite with no tiling for cavas item. Thanks

    • @onetupthree
      @onetupthree  Рік тому

      @@ThisIsFez normal offset will also work for CanvasItem :O with the same
      COLOR = texture(TEXTURE, base_uv)
      if that still isn't what you need, might be better if we talk on discord if you want :D you can shoot me an email of your username so I can add you :)

  • @simonw.1223
    @simonw.1223 Рік тому

    How do I know all the different stuff

    • @onetupthree
      @onetupthree  Рік тому

      sorry not sure what you meant by that :O which other stuff?

    • @simonw.1223
      @simonw.1223 Рік тому

      @@onetupthree like the whole shader language.

    • @onetupthree
      @onetupthree  Рік тому

      @@simonw.1223 im afraid you won't find em here 😰 Godot uses GLSL if I remember correctly

    • @simonw.1223
      @simonw.1223 Рік тому

      @@onetupthree what is GLSL?

    • @onetupthree
      @onetupthree  Рік тому

      @@simonw.1223 it's short for OpenGL Shading Language :D can't say much about it tho because I haven't used it outside of Godot and VFX so I learn about it on the fly
      im sure there are lots of tutorials about there about it 🤔

  • @veecks
    @veecks 10 місяців тому

    I did not get what the fuck is happening in distortion. I could make it work but how exactly is the noise defining the uv coordinates in the main texture

    • @onetupthree
      @onetupthree  10 місяців тому +1

      yo let's calm down a bit 😭
      the base UVs are laid out as values that go from 0 to 1 from the upper left to the bottom right (as seen in 3:40)
      adding noise to the base UVs will offset our 0 to 1 values (and everything in between) by a little bit so when our texture is mapped to the modified UVs, it'll appear distorted
      if it still isn't clear you can DM me on twt and i can explain further with pictures :O

    • @veecks
      @veecks 10 місяців тому

      @@onetupthree hey bro, thank u. After some tweaking I could kinda of figure this out! Yet it is kinda strange at first. Your explanation now is nice to close it all too, thanks!

    • @onetupthree
      @onetupthree  10 місяців тому +1

      @@veecks no problem ! that's great to hear :D

  • @tangoconcorazon1861
    @tangoconcorazon1861 9 місяців тому

    Bro writes 20 lines of code, talks about 2 and leaves us completely lost lol

    • @onetupthree
      @onetupthree  9 місяців тому

      bro writes a comment like this and expects me to know how to help 💀💀💀

    • @Bread-qz3ht
      @Bread-qz3ht 7 місяців тому

      @@onetupthreenice tutorial, but how do you do erosion in particle effects?

  • @baron523
    @baron523 Рік тому

    Excellent information. No jazz please.

    • @onetupthree
      @onetupthree  Рік тому

      thank you 🙌 but i do be liking some kind of music in the background 🤔

  • @youranonymousyoutuber4051
    @youranonymousyoutuber4051 Рік тому

    u need to make a bigger video man

    • @onetupthree
      @onetupthree  Рік тому

      i try to keep my videos brief 🙇‍♂️

  • @Boildroid
    @Boildroid Рік тому

    Please do not stop making videos

  • @Boildroid
    @Boildroid Рік тому

    thanks a lot!