How Games Make VFX (Demonstrated in Godot 4)
HTML-код
- Опубликовано: 27 сен 2024
- Have you ever wondered how games can be so beautiful? I am making a game, so I tried to find out. Turns out, there are some easy tricks VFX artists use over and over. In this video, I show you how to create water with a shader in Godot Engine (works in other game engines, too!)
Get the Solaria tileset by Jamie Brownhill here: jamiebrownhill...
VFX videos we made: • Godot VFX Tutorials
Play the demo of Furcifer's Fungeon & wishlist: store.steampow...
Play in the browser: playwithfurcif...
Wishlist our other game, Super Kill-BOI 9000, and play the demo: store.steampow...
Join our discord server: / discord
Follow us on twitter to stay updated on Furcifer news and tutorials:
/ tweetfurcifer
I think you’ve touched on something that I haven’t seen in shader / VFX learning material before: the COMMON BUILDING BLOCKS of effects. If we can learn things like dissolve, distort, noise, gradients, textures, etc. we can get better at combining and layering them. Thank you for that. It’s a breakthrough in my understanding.
Thank you for this comment, this is exactly what i want to hear
Its mix() and smoothstep() all the way down.
@@styleisaweapon LOL it really is
Wow, this has more content than many full hour talks. I will need to pause and play with the code for an hour to truly grasp it.
Some notes for others
1. You actually need to create that noise within the material. Shader itself does not create it.
2. There's no more 'SCREEN_TEXTURE' available but you can add 'uniform sampler2D SCREEN_TEXTURE : hint_screen_texture, filter_linear_mipmap;' on the top and it does the job
3. Carefully read the whole code in the end. All changes small changes are not mentioned
Thank you none the less :) works!
god bless you beautiful genius
Pretty sure this is the part I'm stuck on, there is no NoiseTexture2D node.
Fun trivia, they're called UV because XYZ is already taken. UV also only denote the 2D texture positions, for 3D textures they're UVW... which are followed by XYZ in the alphabet!
I came looking for this comment and wasn’t disappointed.
thought it had something to do with ultraviolet haha
ah yes! that explains alot! :)
Woah thats make a lot of sense
I thought it had to do with Chroma as in YUV. Apparently not, so thanks, I learnt something new today :)
Wow, I love the editing and natural, conversation writing of this video! What a great way to explain this concept that so many of us are unfamiliar with 😅 in such a funny way!!
Thank you, im happy to hear that :)
Me too, instant subscribe material for sure xD
Shaders are a fundamental tools to make videogames and cgi animation. Every bit of shared knowledge is very appreciated. Thank you.
glad you like it :)
I remember trying to learn this in GameMaker, but they stopped supporting their own tutorials so I never got it to work.
Godot is truly becoming the next engine for getting into game development
The editing was tight - no fluff - this was on the level and encouraging without being patronising. Thanks a lot, I know a lot of work went into this. Hello my baby, hello my darlin'!
Thank you so much :)
This is surprisingly the first time I have heard VFX discussed in a simple, non-technical way that was easy to understand. I now know what a UV actually is. Well done.
As someone who works around 10 years creating FX for movies, adverts and games after a while you just get this intuitive understanding how to fake any movement by splitting it into few layers that are simpler to archive. It sort of like with coding but divide and conquer works on more visual level.
YES more! Teach us the way of the shader please! Your fun way that delivered this video was very pleasant to keep me focused on shaders for once in my life. It is the bane of the developer so help us!
Thank you, will do :)
What a great video! For some reason, I started feeling like I've been doing shaders for years tho I still have no clue how they are done and I haven't tried. The point is, now I got motivated to start and experiment with them cause they dont seem so scary anymore.
That is great to hear :D
every video is a journey into knowledge, thanks for guiding us!
OMG, this is the funnest USEFUL video I've seen in a long time. I love your delivery! :D
Awesome video, at the end I was thinking "Wow, I wish there was a playlist of this sort of stuff", and hey, you have a Godot VFX playlist!
I know a lot of shader stuff is very general and GLSL is easily transferrable regardless of engines, but it's so nice to just have it all in one place when learning (especially when it comes to debugging something!)
Thanks for your efforts!
:D
What is wholesome is that even though programmers and artists are equally confused. Both type of people are profiles that are eager to learn new things so it just works out :) !
"I'm not saying there's just one trick. There's at least...2" was way funnier than it should have been. Awesome video!
I've literally done all this before but still enjoyed every moment of the video
Thats nice :)
To my understanding, UV is used to distinguish between XYZ coordinates for the 3d mesh. VW is associated with a certain German car manufacturer and also a pain to pronounce. So UV was used. Why we're addressing UV.x and UV.y is still puzzling though.
To my understanding VW didn't have anything to do with that, but it's a nice story.
It's more that W represents the Quaternion rotation, which you need to start using when you want to feel really dumb for a while.
It's very rare that I feel so comfortable watching videos like these. great work
That's nice. Thank you :)
Best presentation on shaders I have seen to date. Well done sir!
Aww, thank you so much!
Dude, you are so hilarious. Very entertaining to watch and I love the way you speak. Thumbs up and subscribed.
conventionally in mathematics, when talking about parametrizations of surfaces, one would usually use the names u and v for the arguments of the map from the plane to the surface, hence the name UV-map!
Fun thing is: I heard at least 3 quite different explainations for the UV thing in the comments :D
NGL, Tom Scott at the end really surprised me!
But anyway, every time I see one of your videos it inspires me to go back and work again on my projects, so thanks for all of them
thats great, back to work! :D
You sparked a controversal topic 3:21
This video popped into my recommendation, and gave me knowledge I didn’t know I needed. Thank you
Glad to hear that!
My brain is folding in on itself at how good this looks.
It reminds me of old CSS text animations, where you just mess with numbers and directions until it looks good.
Loving the humor and the tutorial as well. More please!
Thank you! ok :)
You almost had me at trick 2, so to see trick 3, you really did get me there.
Liked and Subscribed. This is amazing!
What I wouldn't give to see this tutorial with a single screenshot of what you actually did. It's like doing archeology trying to make this shader from the video.
We show everything you need to do in a video. If you wanted a still image, you should not have clicked on a video.
How dare we actually explain the shader and not just give you something to copypaste.
I literally just checked if you guys had another video out 3 minutes ago :)
EDIT: ofc make more of these :) I'm not much of a shader guru...sure what you cover is some simple stuff, but I really like these. Plus there is always something new to learn.
:D
Feels good to release something again
@@PlayWithFurcifer I know...I need to get off my arsche...
@@nowherebrain gogogo! :D
@@PlayWithFurcifer No need to respond, but atm. I'm just waiting for the house to be quiet..my PC is in the wohnzimmer :) and there are always kids running around...I'll probably do one this week sometime(Ich hab urlaub diese woche)...but I know the feeling when you don't put anything out for a while :) and thanks for the sub.
Yeah, the amount of stuff you can do with shaders is insane. Water, fire, home-made particle systems, wobbling, wind touching the grass, weird shape related activities (f.e. to cut out one shape from another shape like in Snipperclips), lighting, reflections, stylizing (f.e. to make things pixelated), everything.
the uniform unicorn joke actually made me spit my water out lol
Im sorry :D
"Guess what - you can". Loved it.
I love the chaos of this video.
“To fool someone as smart as you we will need more than must one trick.”
Oh ok yeah, you’re gonna need some magic or like 10 tricks right?
“We will need two.”
Oh.
This video made the shaders a lot more understandable for me, thanks a lot!
The godot stickman has really caught me off guard. This clip should play everytime godot crashes ;)
Yes! More please :) My goal for 2023 is to work on my visual skills both art and VFX. Cheers!
For sure! Some fancy shaders would suit chess survivors really well :D
Its very very impressive. Tried shader writing in Unity back in 2015 when UNITY 5 was released. I started to feel like GOD. Then messed up bigtime and delegate the task to someone who actually knows what they are doing with light attenuation and z buffer pass. Since then, as i had experienced the pain, I have enormous respect for VFX writers.
Great topic. Would be glad to see more effects using this technique
This man has one of the lovliest German Accents i could imagine xD Nice work man!
Looking forward to seeing the second trick of VFX in your next tutorial!
Brilliant little production) Both enjoyable to watch, and quite informative! Looking forward to new videos on the subject.
Also, I'm totally checking out your game as soon as I can)
Thank you :D
4:36 that "wow" got me 😆
Subbed you :)
:)
This is really informative. Subscribed and bookmarked
More shader tutorial... you are the only one who teaches godot shader... you are the masaya of godot shader..
UV is used because WXYZ are already used to represent spatial coordinates in 3D (W being the outlier which makes the whole thing 4D)
Here's to hoping this video performed well enough to your liking, because I recently swapped from Game Maker to Godot 4 and this stuff is crazy good. Also, cool game.
Thank you :)
There will be more shader content for sure!
This was genuinely a hoot to watch and easy to follow along with. Appreciate the effort that went into this.
"...There are at least..."
"2"
had me rolling X'D
That was both hilarious and informative. Good job
Thank you! :D
"How do we make it wet?" Wow I'm learning more from this video than any I've seen
It's a bit magic what you can do with this few tools in your hand / mind, really great, thanks for sharing!
Around the 4 minute mark it went off the deep end (I'm an artist) and I basically went 'Yep, sticking to playmaker and bolt, one day I'll hire programmers for real I swear'
..And for anything else, there's the asset store. If it aint broke.
I'm a Unity fan boy but really enjoyable watching and listening. It's something I've been learning and playing with only recently but I wanna dive deep af cos it looks so cool and powerful.
This is a great and approachable shader tutorial. I have been into many shader tutorials and this small video made my brain click :)
even as a unity developer I learned a lot. thanks mate
thats great :D
i hoped most of it would transfere well
Very insightful stuff! Also wishlisted.
Thanks a ton!
So refeshing to see such a video from you again :)
:)
Wow! This is an excellent (and concise) lesson! Love it!
Thank you very much! :)
This is pure gold !!!
this video made me understand that i should stick to stealing code
This is just a magical explanation/montage!
I am insanely entertained and educated by your content. You’re awesome!🤙
Alright, I am absolutely going to try this one.
Love you tutorials
Thanks!
You're a superstar!
Love the code & Material sliders shown.
Show us 3D shaders please! I've been playing around with the visual shaders, it's a pretty good workflow, because if a node doesn't exist you can write an expression in shaders code and still use it in your visual shader.
i try to put a bit of 3d shaders in the videos, but they aren't really my strong suit (since we work on a 2d game)
Yes please, more of this stuff!!!
ok :)
thank you very much, you saved my day!
You guys gave me a good introduction to shaders. I was struggling these days to get any shader working, they were always looking like sh*t.
I actually modified your water shader to look it like heat distortion effect and it works like a charm!
Watching shader artists work feels like watching a wizard play with dark arts which result with pretty pictures. Every time I try to learn shading, whether that be for 3D graphics or for games, so much of it goes over my head. Why are we dividing these vectors? What does that even mean? What part of this shader is making the result look like that? It's madness.
Would love to see more shader tutorials!
Noted! :D
UV coordinates comes from the fact that XYZ are already in use for the world, as far as I know, so UV is used for 2D texture coordinates.
best shader video i seen
Subscribed, thank you for the video.
Thank you :)
@@PlayWithFurcifer I finally made my first game Godot and circled around to your video again just now! Cheers!
@@ElementalTJNice!
So I think I understood some of the video.... But then Tom Scott appeared and had a bucket of water thrown at him, and all I could think of is "why is Tom Scott in this video? Is that actually Tom Scott? Why is someone throwing water at him?"
And then I went off to find out why and forgot everything in the video.... Thank goodness we can rewatch things on RUclips though.
new sub!!! Thank you for that. It’s a breakthrough in my understanding.
Amazing to hear :D
This worked perfectly:
shader_type canvas_item;
uniform sampler2D noise1: repeat_enable;
uniform sampler2D noise2: repeat_enable;
uniform vec2 scroll = vec2(0.05, 0.05);
uniform vec2 scroll2 = vec2(0.05, 0.05);
uniform float distortion : hint_range(-1,1) = 0.2;
uniform sampler2D SCREEN_TEXTURE : hint_screen_texture, filter_linear_mipmap;
void vertex() {
// Called for every vertex the material is visible on.
}
void fragment() {
float depth = texture(noise1, UV + scroll * TIME).r * texture(noise2, UV + scroll2 * TIME).r;
vec4 screen_col = texture(SCREEN_TEXTURE, SCREEN_UV + distortion * vec2(depth));
COLOR = screen_col;
}
goodness, thank you so much for this
Def want a followup video to this! 😎
Pretty sure there will be one eventually :D
Really informative and funny! Keep up the good work!
Thank you!
Cool video as always! Thanks for sharing :)
Thank you :D
Tried your demo. The game is good fun!
Thanks for sharing
I would say its insane how fast computer calculates... In background it calculates windows evnvironment, applications, game engine and each pixel...
It really does go brrrrrr
Awesome. Thank you for simplifying this concept. 😎👍
U V coordinates are 2d used to map to X Y Z coordinates which are in 3d space, im pretty sure we use those because U V W X Y Z. We just went three letters back.
Thanks for your video series. I can tell you (two?) put a lot of work into sharing what you've learned along your journey. I definitely appreciate it. Best of luck with your release - I hope you take a well-deserved break!
Yeah, it's just us two.
Thank you :) We really should, the last one has been a while
It's called UV because they're coordinates and XYZ was already taken. So they went for UVW to create a second vector.
Awesome informative video. I don't Godot, but I feel like I know how to apply this in Phaser now.
Hey there, friend. I'm about to hop into Godot 4.0 (three year hiatus from dev with only exp in GML 2.0) and I'm enjoying how you explain things and do humor.
I just wanted to chime in that having been able to break learning barriers and reignite my passion, I'm seeing that almost everything seems to be based around the simple concept of croissants.
Layers.
Pro digital artist: we work frequently with layers.
Started learning multimedia editing. Oh, video compositing is just boxes - with layers. And sometimes more layer boxes inside those layers.
Music? Arranging layers and overlapping beats.
Now, seeing how you are showing SIMPLE code (unlike...shivers, C++ and gml,) these VFX things don't look tough at all.
Just layers. :)
Thank you ~
Wow this was so well and funny explained, loved the video and that it was done in Godot :D
I'll check your other videos on VFX too, this will be a great help, also I wish listed your game, good job!
Thank you so much!
This is a great video. I cannot wait to play around with this.
Nice humour lol, and great video!
Thank you!
@@PlayWithFurcifer Hey I was wondering, what's the game at 0:04?
I made a road texture that made a bunch of my friends go "Woah! That's realistic!". It was like, 3 noise textures stuffed into Godot 4's Standard Material resource. I did basically no code, drew nothing, and got epic results.
there's nothing more to say than "subscribed"
yes, please make more !
ok
I love this vid
I heard from a teacher back in university that someone chose UV because there were already too many XYs everywhere in game engines back then, so using other letters became good practiced into a standard.
Fun thing is: I heard at least 3 quite different explainations for the UV thing in the comments :D
Same, I was so intimidated by VFX back in the day. Until I started trying it out and realized I was just doing the same things over and over.
Same for me, it has this scary aura around it somehow :D