Common VFX Shader Techniques ft. Godot

hello welcome to the first of hopefully more than one VFX video today's video is about the common Shader techniques I've used for VFX most of these techniques can be translated to any engine but the examples I'll be showing are implemented in godot4 so there will be some good though specific pieces here and there without further Ado let's begin number one tiling and offset tiling determines how many times our texture repeats an offset determines how much our texture is displaced in UV coordinates it's represented by this equation right here we multiply our base UVS by our tiling first and then we add the offset this offset can be changed to indicate offset speed instead by multiplying it by time so that our texture is offset over time that we can also change our textures tiling Behavior having it set to repeat with repeat enable or to clamped with repeat disable repeat is what we've been seeing in the past examples with the texture simply repeating when our UV goes past 1 and either axis clamp limits our texture to the zero to one values extending the edge pixels when values go out of bounds number two masking masking is basically just multiplying our main texture with a grayscale texture to get a certain shape to do this we simply sample a grayscale texture and multiply that to our shader's Alpha [Music] quick tip you can use uv.r to get a horizontal gradient and uv.g to get a vertical gradient you can also subtract these gradients from one to get the inverse number three Distortion we take the definition from our trusty internet according to Merriam-Webster Distortion is the act of twisting or altering something out of its original state to achieve this in our Shader we sample another texture usually a noise texture and we add those values to our main textures UV we then multiply this with another value so we can control how distorted our texture will be [Music] number four erosion erosion can also Define how our effect Fades Beyond just manipulating our Alpha for this technique we also use a grayscale texture we sample this grayscale texture and apply a smooth step function smooth steps minimum is a value from 0 to 1 and the maximum is defined by an offset from the minimum in this example I Define the smooth steps value based on a sine wave with this technique you'll find that the texture erodes from grayscale values 0 to 1 according to our texture number five polar coordinates polar coordinates allow us to unwrap our textures regularly I linked a more in-depth explanation about polar coordinates in the description below but as a quick summary our usual Cartesian coordinate defined points by their value in the X and Y axes polar coordinates on the other hand Define points by their angle and how far away it is in Godot that would look like this we subtract our base UVS with 0.5 mapping our UBS from a zero to one value to a negative 0.5 to 0.5 value we then multiply that by 2 to map our UBS into a negative one to one value doing this will make our UV origin the center as opposed to the upper left our angle is calculated through an arc 10 for our uv.y and uv.x this gives us a value from 0 to 2 pi or 0 to 360 degrees when converted simplify things for us we divide this value by 2 pi [Music] what's left to calculate is the distance which we get through the length function our new folder UV is then a vector 2 of our angle and the distance we can apply the same techniques from tiling an offset to manipulate our polar UVs number six depth fade depth fade or proximity fade defines how our Shader Fades depending on how close it is with other geometry now the easy way to get this formula is to set proximity fade in a standard 3D material first and then converting it to a Shader material if you check the generated code it includes the formula for depth fade I don't completely understand how this is calculated but I feel the need to explain what's happening somewhat so I'll try to do it without making a total fool out of myself so to calculate for depth fade you will need access to the depth texture which can be accessed through the depth texture hint called hint depth texture once you have this you have to get the depth of the first opaque geometry pixel we then compare this against the depth of our own particles pixel and smooth it out by our user-defined fade distance note that that fade is merely a value from 0 to 1 and you can use it outside of manipulating the alpha you can use it as an interpolator for color when your Shader intersects with something for example and last but definitely not least we have number seven particle lifetime article lifetimes the lifetime of a particle but normalized from zero to one in Godot this is available in the vertex stage of the Shader and we can access it through the Y value of the instance custom built in we can then pass this value to the fragment stage by making a varying variable but the particle lifetime's full potential can be unlocked when used with curves curves will allow us to customize the behavior of all the techniques previously mentioned in the video curves are defined through sampler 2D variables and are sampled using the lifetime variable on top of our erosion earlier we can now plug in the particle lifetime as the minimum for our smooth step we Define our curve like so and we'll see that our particle erodes towards the end depending on its lifetime do a lot lot more using curves and particle lifetime so I encourage you to experiment with it and that's it for this video I hope this helped you out one way or another if you have any questions or suggestions please let me know in the comments below a project containing all the samples is available in my patreon which is linked in the description below as well thank you for watching and I hope you have a great day

Channel: onetupthree

Views: 26,803

Keywords: godot, godot4, vfx, shaders, game, gamedev, indie, techniques, common, realtime, realtimevfx

Id: N9ilhL8JFes

Length: 7min 7sec (427 seconds)

Published: Sat Sep 30 2023