Common VFX Shader Techniques ft. Godot

[@onetupthree]

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]

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

[@onetupthree]

thank you so much! 🙇‍♂🙌

[@PrecisionRender]

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

[@onetupthree]

thank you so much 🙇‍♂

[@LisaDaugesVFX]

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

[@onetupthree]

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

[@Rankao]

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]

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

[@PureAsbestos]

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

[@onetupthree]

yes 🤔

[@Nilski]

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

[@onetupthree]

thank you for the kind words ! 🙌

[@godotShaderBoy]

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

[@onetupthree]

thanks ! 🙇‍♂️

[@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]

that's awesome ! good luck with the tooling 👌

[@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]

thank you so much ! glad i could help out 🥳

[@jijigri9224]

Great video! We definitely need more Godot VFX tutorials!

[@onetupthree]

thank you so much!

[@daniridao]

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

[@onetupthree]

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

[@WiseNoodleOfficial]

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

[@onetupthree]

thank you so much ! 🙌

[@ShinSpiegel]

This is an amazing video, thanks for sharing.

[@onetupthree]

thank you ! :D

[@baoinh2968]

These tips are really useful

[@onetupthree]

glad they were helpful ! :D

[@AgriasOaks99]

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

[@onetupthree]

i'll do my best 🙇‍♂

[@snaker90]

Wow, this's exactly what I need！

[@onetupthree]

glad to hear it ! 🥳

[@bjarkibjarkibjarki]

thx for the subtitles i appreciate it

[@onetupthree]

of course! 👀 we gotta have em 👌

[@vejroniottan-n9s]

This was fantastic - thanks!

[@onetupthree]

thank you ! 😄

[@SuperMario9080]

I love this, thanks for the video!

[@onetupthree]

thank you so much ! im glad you liked it 🥳

[@bencepaul3497]

Great examples!

[@onetupthree]

thank you so much ! :D

[@AnotherByteData]

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

[@onetupthree]

thank you :D glad it was helpful !

[@lkasikakalus123]

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

[@SirPigeonz]

Amazing tutorial bro!

[@onetupthree]

eyy thank you ! 🙌

[@HoodieCatGameDev]

Thank you, this is very helpful!

[@onetupthree]

thank you! im glad to hear that 🙌

[@pipeliner8969]

I am addicted to Godot videos lol

[@Archeia]

I learned a lot with this! Thank you :3

[@onetupthree]

im glad it helped ! 🙌

[@Nayckron]

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

[@onetupthree]

thank you so much for the kind words ! 🙏

[@GameDevGeeks]

insanely informative video!

[@onetupthree]

thank you ! im glad it was helpful 🙌

[@godofdream9112]

Finnally, some VFX on Godot...

[@onetupthree]

all thanks to a certain other engine's shenanigans 👀

[@doohp]

banger video made me switch to godot

[@onetupthree]

eyy i appreciate it man 😭🙏

[@viniciusantonio2253]

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]

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]

@@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]

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

[@flintpisser]

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

[@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

[@danielsndgamevideos]

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]

thank you ! and gotcha on the background music 👌

[@xdanic3]

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

[@paegr]

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]

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]

@@onetupthree That fixed it, thanks!

[@pythonixed4448]

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?

[@harmonichaoticart]

Instant sebastian vibes

[@onetupthree]

@@harmonichaoticart is sebastian pog

[@harmonichaoticart]

@onetupthree sebastian lague is pog asf

[@pietraderdetective8953]

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

[@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 🙇‍♂

[@thygrrr]

That was pretty good ^^

[@onetupthree]

thank you so much ! :D

[@DylanCalaf]

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

[@onetupthree]

i appreciate it a lot 🙏

[@mistouluf8518]

what is texture_albedo for "mask" shader ?

[@onetupthree]

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

[@mistouluf8518]

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

[@onetupthree]

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

[@mistouluf8518]

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

[@veecks]

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

[@ThisIsFez]

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

[@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]

@@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]

@@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 :)

[@kobedev]

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]

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]

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

[@sergodobro2569]

Cool video!

[@xxidbr9]

ah finaly godot 🎉

[@onetupthree]

godot is pog

[@apoc519]

How is the visual shader editor in Gadot?

[@onetupthree]

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

[@TheLogicalFounder]

Can these shaders be applied on a color rect?

[@onetupthree]

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

[@scribblingjoe]

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

[@onetupthree]

that IS cool 👀

Super Tut in Shader

[@onetupthree]

thank you! 🙏

[@sinlee6064]

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

[@onetupthree]

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]

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

[@onetupthree]

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

[@simonw.1223]

How do I know all the different stuff

[@onetupthree]

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

[@simonw.1223]

@@onetupthree like the whole shader language.

[@onetupthree]

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

[@simonw.1223]

@@onetupthree what is GLSL?

[@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 🤔

[@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]

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

[@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.

[@timaster18885]

very good video

[@onetupthree]

thank you! 🙌

[@CristianAvellino]

thanks

[@onetupthree]

thank u 😎

[@tangoconcorazon1861]

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

[@onetupthree]

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

[@Bread-qz3ht]

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

[@eivisch]

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

[@onetupthree]

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

[@veecks]

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]

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]

@@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]

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

[@luskarian]

I love you so much

[@onetupthree]

glad i could help 🙇‍♂

[@zzzzzzzzzzzzzzzzzzzzzzzzzzzz__]

MOOOOREEEEE

[@onetupthree]

hopefully soon 🙌

[@Shiromaru.]

epic!

[@schmecklin377]

awesome

[@onetupthree]

thank you ! :D

[@baron523]

Excellent information. No jazz please.

[@onetupthree]

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

[@youranonymousyoutuber4051]

u need to make a bigger video man

[@onetupthree]

i try to keep my videos brief 🙇‍♂️

[@Boildroid]

Please do not stop making videos

[@onetupthree]

and i'll do my best 😤👌

[@Boildroid]

thanks a lot!

[@onetupthree]

glad to help ! 🙇‍♂