Common VFX Shader Techniques ft. Godot
HTML-код
- Опубликовано: 1 авг 2024
- A couple of shaders that I use a lot when I make VFX :) A project containing all my samples is available over at my patreon for free :D
Patreon:
/ onetupthree
Polar Coordinates:
www.mathsisfun.com/polar-cart...
00:00 - 00:25 Intro
00:25 - 01:22 Tiling & Offset
01:22 - 01:51 Masking
01:51 - 02:18 Distortion
02:18 - 02:54 Erosion
02:54 - 04:19 Polar Coordinates
04:19 - 05:38 Depth Fade
05:38 - 06:43 Particle Lifetime
06:43 - 07:06 Outro
#godot #godot4 #vfx #shaders #gamedev #realtimevfx #gaming #visualeffects #tutorial #indie
BGM:
Artist: Lakey Inspired
Track Name: Chill Day
Artist's Socials:
- SoundCloud - / lakeyinspired
- Instagram - / lakeyinspired
Artist: KevinMacleod (Incompetech)
Tracks:
- Awesome Call
- Long Stroll 
Игры
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! 🥂
Community definitely needs more great VFX/Shader centric content like this! Great stuff!! ^^
thank you so much! 🙇♂🙌
This channel is a hidden gem. I hope this knowledge reaches a large audience!
thank you so much 🙇♂
YES! Been looking for high quality Godot VFX content. Very appreciated!
thank you for the kind words ! 🙌
Absolute banger of a video !! I learned a lot and it made shader programming not as scary as it used to be !!
thank you ! 🙇♂ i hated writing shaders in unity 😭 godot's is way easier to approach + so well documented it's crazy
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.
that's awesome ! good luck with the tooling 👌
Take my subscription! Damn that was well explained. You made some stuff click that I have been trying to understand for a while now.
thank you so much ! glad i could help out 🥳
I learned a lot with this! Thank you :3
im glad it helped ! 🙌
Great video! We definitely need more Godot VFX tutorials!
thank you so much!
I love this, thanks for the video!
thank you so much ! im glad you liked it 🥳
This was fantastic - thanks!
thank you ! 😄
Really good and easy to understand! Kudos!!!!
thank you :D glad it was helpful !
Whoah!
We need more things like this, Sensei! ☝️
i'll do my best 🙇♂
Thank you, this is very helpful!
thank you! im glad to hear that 🙌
Cool to see we share the same passion about shaders, keep it up!
thanks ! 🙇♂️
Very well explained good sir! You've earned yourself another sub :)
thank you so much ! 🙌
This is an amazing video, thanks for sharing.
thank you ! :D
insanely informative video!
thank you ! im glad it was helpful 🙌
Great examples!
thank you so much ! :D
Amazing tutorial bro!
eyy thank you ! 🙌
These tips are really useful
glad they were helpful ! :D
Wow, this's exactly what I need！
glad to hear it ! 🥳
I can see the channel exploding in views in the future, videos like this are bangers, keep it up.
thank you so much for the kind words ! 🙏
That was pretty good ^^
thank you so much ! :D
1:40 you can also write UV.x and UV.y which would be more semantically accurate
yes 🤔
I am addicted to Godot videos lol
thx for the subtitles i appreciate it
of course! 👀 we gotta have em 👌
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.
that's great to hear ! good luck w/your VFX 🥳
thanks a lot!
glad to help ! 🙇♂
wow wow wow, stop for a second. What is this channel and why didn't I know of it already? FOLLOWED!
very kind of you to say 🙇♂️
thank you!
epic!
wow this is great content!
would be awesome if your turn this into a series.
Liked and subscribed!
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 🙇♂
Great video, but i think the distortion part was kinda rushed, but well i am a begginer in shaders
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.
thank you ! and gotcha on the background music 👌
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?
MOOOOREEEEE
hopefully soon 🙌
ah finaly godot 🎉
godot is pog
thanks
thank u 😎
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
Finnally, some VFX on Godot...
all thanks to a certain other engine's shenanigans 👀
is it just me or is this video above average good? Edit: you just earned a subscriber
i appreciate it a lot 🙏
very good video
thank you! 🙌
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?
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;
@@onetupthree That fixed it, thanks!
banger video made me switch to godot
eyy i appreciate it man 😭🙏
I love you so much
glad i could help 🙇♂
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)
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
to add to the last part i imagine you put the galaxy on something like unity's render texture and sample from that
How is the visual shader editor in Gadot?
haven't tried it so im afraid I can't help with that one yet 😰
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?
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 🤔
@@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 :)
@@viniciusantonio2253 you got this 😤🙏 if you have any questions feel free to ask here !
awesome
thank you ! :D
At the time I’m watching this video upload time says “3d ago”. I thought that was cool. Just wanted to share.
that IS cool 👀
Please do not stop making videos
and i'll do my best 😤👌
please how do i make this work for canvas and not spatial. specifically the diagonal offset animation. total noob here
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 !
@@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
@@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 :)
what is texture_albedo for "mask" shader ?
hi! :) that's just a sampler2d
in the video, it was the godot logo
@@onetupthree The code still doesn't work, what declaration for ALBEDO & albedo & ALPHA? in godo 4
@@mistouluf8518 the source code is up in my patreon for free if you want to check it out :)
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
Good but I need exactly "Tiling and offset" in 2d not 3d, can you make only this effect for 2d??
you can use the same on a CanvasItem shader :D
@@onetupthree your code is for 3d the shader type is spatial not canvas item
So that means it will not work
@@khalilatay8058 copying this from my response to another comment:
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
}
@@onetupthree bro thank you
@@khalilatay8058 no prob !
this video is very good if you can make things from theory into something real, sadly its not me
heyy we all learn differently and that's ok! i believe in you :D
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.
not sure what you mean exactly but if you're talking about raymarching then cant help much bc I also gotta learn that 🤣😰
@@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.
how to put it to 2D Sprite or MeshInstance2D? that is sooo cool !! Thank for your toturial!
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
@@onetupthree Thank you!!!it's making my life easier ,your toturial is so useful,Thank again!
@@sinlee6064 no prob ! glad i could help 😤👌
Super Tut in Shader
thank you! 🙏
How do I know all the different stuff
sorry not sure what you meant by that :O which other stuff?
@@onetupthree like the whole shader language.
@@simonw.1223 im afraid you won't find em here 😰 Godot uses GLSL if I remember correctly
@@onetupthree what is GLSL?
@@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 🤔
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
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
@@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!
@@veecks no problem ! that's great to hear :D
Bro writes 20 lines of code, talks about 2 and leaves us completely lost lol
bro writes a comment like this and expects me to know how to help 💀💀💀
@@onetupthreenice tutorial, but how do you do erosion in particle effects?
Excellent information. No jazz please.
thank you 🙌 but i do be liking some kind of music in the background 🤔
u need to make a bigger video man
i try to keep my videos brief 🙇♂️