MORE VFX Shader Techniques ft. Godot

[Music] hello welcome to the third of hopefully more than three VFX videos today's video is about more common Shader techniques I've used for VFX like the previous one most of these techniques can be translated to any engine but the examples I'll be showing are implemented in gdo 4.2 beta 5 this time without further ado let's begin with number one camera offset this one was supposed to be in the first video but I couldn't figure out how to do it in gdau at the time but the time is now contrary to the name we're not actually offsetting our camera we're offsetting the vertices of our effect relative to the camera most effects are shown as billboard quads AKA quads that face the camera without camera offset these effects are usually fine but in some cases they might clip through geometry resulting in unwanted Behavior take this lamp post for example the glow and the flare are clipping through it this is bad but fret not with some Shader magic this is easily fixed a magician never reveals their secrets but since you're my friend I'll make an exception to achieve camera offset let's start with our inspector setup we need to have our trans formal line set to Z billboard and this might be optional but I set draw order to view depth because I was having some rendering issues but that's probably from playing around too much on my end so try and see if it works with the default setting on yours now we work with the vertex stage of the Shader before anything else it's important to note that we'll be using World coordinates for our positions which we can set in gdau by adding the world vertex chords tag in our render mode we calculate the direction from our camera to our vertex and normalize it we then add our vertex position by this direction and our userdefined offset value this should already be enough for our camera offset but there is the possibility of our vertex going behind the camera hence the commented line to avoid this I Define the limit from the camera which the vertex can go to but to wouldn't the effect scale up the closer it is to the camera while it is true that an object will appear larger the closer it is to the camera that is not the case for our Shader as we are dealing with individual vertices of our quad as opposed to the whole object for the first scenario we apply a vector offset with its defined magnitude and direction to all of our vertices which is why it appears larger the closer it gets in our Shader each vertex is offset by a vector with a magnitude and direction that special to that that vertex only this ensures that each offset converges to the center of our camera keeping its relative size on the screen be careful though doing this will actually affect the vertex depth so it could clip through geometry that you don't want to clip through so it's important to find the balance when using this technique number two vertex offset unlike the previous techniques liar name this one actually works by offsetting our vertex and this time we're free from the camera Shenanigans there are lots of ways to offset your vertex and it's all going to depend on what you want to achieve for your effect but I'll be showing the method I personally use the most we start with sampling something this can be a sine wave or a texture for this example I'll be choosing a texture once we have our texture sample value we add it to our vertex position multiplied by by the vertex normal our shaders is looking pretty good but again this is just one way of offsetting our vertex experiment and go crazy with it a few notes by the way it's worth mentioning that this effect is slightly dependent on how many vertices your mesh has be careful not to go overboard though and lastly sometimes your vertices might get disconnected when using this effect if that's what what you're trying to achieve then awesome but if you want more smooth boys like these try re-exporting your mesh with smooth shading number three back face colors back face colors allow us to define a different color for the back faces of our effect while it sounds simple in concept it gives us very interesting results and it's something I'd like to use more in my effects to achieve leave this in our Shader we start simple by defining a front and a back face color but hold your horses we haven't even determined whether the pixel we're working on is a front or a back face luckily for us gdo provides this Boolean called front facing which we can run through an if State FBI open I've been informed that if statement in shaders are cringe so we'll be calculating our front faces in a more mathematical and possibly unnecessarily complex way to calculate we get the camera direction again by subtracting the vertex position from the camera's position and again we're working with World coordinates we get the dot value of our camera Direction and the vertex normal to oversimplify things if the normal is aligned with our camera direction it'll give us a positive value otherwise it'll give a negative value we only care about the sign of our dotproduct value so we can just overwrite that with the sign function we then convert our value from a -1 to1 value to a 0 to1 value for easier use in our lurp function later this dot value is stored as a varying float in gdau as we can only access the camera built-in properties in the vertex stage in the fragment stage it's a simp simple as slurping between the front face and the back face color using the dot value taada now our effect is based and actually last but definitely still not the least we have number four texture packing this one isn't too heavy on the shaders but it's important to keep in mind in the past videos I've had some effects that relied on sampling multiple textures and text textures can take up a considerable amount of space to avoid this we can pack our textures into the different RG and B channels I use substance designer to make most of my VFX textures and it has a convenient rgba merge node that lets me set up texture packing easily as an example and as a little teaser take this aptly named banana projectile texture I cooked up for my Scythe VFX if we separate each chat Channel like so we have the main texture in the red Channel The Mask in the green Channel and the panning Trail in the blue Channel we combine them all within the Shader however we like and there we go our texture packed effect look at all the dis paste we're saving but we have to remember that life is all about balance be careful not to go too crazy with this though as sometimes you tend to reuse textures like the circular mask for example in which case having it as its own separate texture for multiple effects is okay that's all for this video and probably for this series as well 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 and as usual a project containing all the samples is available in my patreon which is linked in the description below thank you for watching watching and I hope you have a great [Music] [Music] day

Channel: onetupthree

Views: 17,169

Keywords: godot, godot4, vfx, shaders, game, gamedev, indie, techniques, common, realtime, realtimevfx, backface, camera, offset, texture, packing, packingpacking

Id: pLyp9MR6FVM

Length: 8min 43sec (523 seconds)

Published: Wed Nov 15 2023