Making Effects with Godot Visual Shaders

these are thans for made in godo the hottest open source game engine on the scene right now which boast Shader TOS that on the surface are pretty similar to unities but how does it stack up to Unity join me for this tutorial SL opinion piece where I try out goo's visual Showers of the first time and see what I love and hate about everyone's favorite free game engine as a total beginner my first thumball was adding a test sphere to my scene because I kept adding a CSG sphere from the node list when instead you're then to add a mesh instance 3D and then pick a sphere mesh from the mesh list much better in unity you have the concept of scenes and prefabs but in godo we just have scenes and then you can drag scenes into other scenes so for each Shader I worked on I made a new scene added a sphere or another mesh to those scenes these are like unity prefabs and then I have one master scene containing an instance of each of those other scenes here's your fair warning that that I'll probably be comparing stuff to Unity a lot because that's what I'm used to and spoiler alert here are the shaders I made I'll be talking about these three in the video oh and I'm using Goo 4.2.1 I figured the best way to go about this would be to recreate shaders I've already made for Unity so I started with a dissolve Shader the premise of the dissolve effect is simple cut off parts of the material based on its height in BL space add a bit of noise to to modulate the shape of the edges and maybe make the edges glow I like this example because it's simple but it touches on quite a few Shader topics I created a new Shader material here in my sphere in the geometry dropdown and then when I click on the material I can attach a new Shader I'll choose visual Shader as the type and name it dissolve and here we have godo's visual Shader editor it's a lot like unities in the middle we have the graph outputs although pretty much everything you'll ever need is here from the start and I'm not sure if there's a way to hide any of them unlike Unity you declare properties in the middle of the graph so let's right click to bring up the an node window and find color parameter in the list we can rename it by typing whatever we want in this box but it will filter out special characters and replace white space with underscores we can also choose to create a default value using using this tick box otherwise goo uses a sensible default for each type such as colors being white I'm going to name this property base color and connect it to the albo output which you can think of as the basic color of the object before lighting is applied now let's do the height based cut off to do this we'll need to connect something to the alpha output and something else to the alpha scissor threshold every pixel whose Alpha value is lower than the alpha scissor threshold will get cold I'll add a flow constant to the graph set it to a value of 0.5 and connect it to the alpha scissor threshold then we'll right click to add a Lo for the world position of the current pixel and there isn't one these ones don't quite do what we want for example node position world gets the pivot position for the object as a whole we have to set this up ourselves which is a shame because I use World space position rather frequently in my shaders using this drop down in the top left I can swap the graph view from fragment mode which operates on each pixel to vertex mode which operates on the vertices of the mesch this section of the graph let's just do stuff like animate the shape of the mesh but we'll use it to calculate the world position and just pass it along to the fragment stage it's sufficient to do it here because there are typically many more pixels than vertices covered by a mesh in Shader terminology this kind of data is called varion if we click on the manage varing button and then add varying let's create a vector 3 called World PA now we can add a varying seter node to the graph and find our world post varing from the drop down list this is basically an extra output to calculate the world position we need to get the object space position of the vertex through the actually named ver text input node and multiply it with the model Matrix which is the transformation which changes positions defined relative to the mesh itself into positions defined relative to the world the mesh exists in so in our case a scene to actually do that multiplication there's a node called transform Vector mold then we connect the output to the world PA varing we created look I know I can't compare everything to Unity but like well position is just one node in unity the workflow pairing goo's visual shaders is a lot closer to how code based shaders work where you do indeed need to calculate all this manually in the vertex Shader but I feel like these graph tools also take a bit of this work out you know anyway head back to the fragment section of the graph add a varying getter node to get our world pause click the tiny Arrow here to split the vector into its components and then drag the Y component into the alpha output the node says RGB but it corresponds to X then after you discover this causes a bug in the codo version I was using instead you close up the arrow and drag the whole Vector into a vector 3DC composed load and take the Y component from that instead it's doing the same thing so I'm not sure why the other approach was bugged oh well hopefully it's fixed in the future with this setup goo will cut off all pixels who y position is below 0.5 let's make this a bit more customizable I'm going to add another float parameter and name it dissolve height which is going to be the height at which pixels get C then I will add a node called step and connect my new dissolve height parameter to the edge slot and the Y position into the X slot what the step node does is compare the two outputs and if x is higher than Edge it outputs one otherwise outputs zero what we're doing here is saying output one if the piure is higher than the dissolve height I want my dissolve to work in the opposite direction so I'm going to use a one minus node to reverse the output and connect it to Alpha if I look at my test scene we can see the changes being applied already since part of the object has been cut away it looks really strange because we can't see the inside by default to enable two-sided rendering you need to click on the Shader here in the inspector then expand modes and change call too disabled you'll only see the outer shell of the object but it's a damns slight better than seeing nothing on the insides that's the easy bit now let's add some noise to change the shape of the edges this is where I discovered a bit of a double-edged sword with regards to godo because there's no built-in node that just gets you some noise values which was initially disappointing but then I found out you can Define your own custom nodes whereas in unity the best you've got is creating a custom function node in godo we can do something similar with the visual Shader node custom class but I think this is more powerful basically we can write a script that extends the visual Shader node custom class give it an at tool attribute which makes it run within the editor then overload a bunch of functions that determine the name of the node and what is behavior inputs and outputs are in fact it can inject totally custom glsl code code into several places get code inserts code wherever you place the node that's the one you have to Define and it's the one I expected to see get Funk code inserts code at the start of the Shader stage so if you add the node anywhere in the fragment stage this code runs before anything else in the fragment stage and get Global code is super useful as it inserts code at the top of the Shader file so you can use this for helper functions and variables and I love this it's something units he sort of can't do without hacks I think and then you can reuse this node in as many graphs as you want through the same node search bar as the built-in nodes this makes it easy to create your own library of Shader nodes that you can slot into any product you want luckily for me there's a goo docs page that outlines exactly how to set up a pear in noise 3D node unties built-in noise nodes only operate in 2D so this is fantastic I won't go into detail about how the in noise code works because that's a whole video in and of itself just to know that it generates grayscale Cloud looking values using some input value as a seed this mode calls the input UV because it's commonly applied like a texture but you don't need to use a UV coordinate as input in fact we won't be this implementation also takes handy offset scale and time inputs but we're only going to make use of scale I'll input a float constant equal to Z Z to the offset and time vales for the UV I'm going to use board POS using the variant GTO node from earlier the full Vector not just the Y component for the scale I'll use a new float parameter called noise size the resulting value from the node is the float between zero and one I want the noise to act as an extra height offset and I want it to be customizable so I'm going to remap its values I'll add another float parameter called noise scale then use these following nodes to remap the zero to one range to negative noise scale to positive noise scale I can then add the result to the Y component of the height looking at my test scene now and playing around with the new parameters we can change the shape of the disolve quite a lot the last thing I want to add is an essive glow around the edges left off the cut off to see the glow I'm going to head to my main scene which houses all of my shaders click on the camera add a new environment if it doesn't have one and make sure the glow option is enabled with that out of the way let's return to the graph I'm going to add one more flu parameter called glue thickness which I'll give a default value of 0.05 since we just want it to be a thin Edge I will subtract this from the dissolve height parameter we previously added this forms a second cut off threshold so I will add a second step load just below the first one then pass the new threshold into the edge slot and pass the noisy y component from before to the X slot if we used this for the alpha output we can see that this shape is almost the inverse of what we had except there's a small bit of overlap multiplying the two together gets us only a thin lip around the edge I'll just put that back to how it was using this value I will add a final color parameter called Edge color for its default value I'll make it blue but I will be sure to swap to the raw Tab and Elevate the color sliders to values exceeding one as this produces the glow finally we can multiply the mask and the edge color together make sure that you use a vector upload and output the results to a mission the graph is now complete next up on the docket is a simple hologram effect where scan light scroll down the object and finel light brightens up the outer part the scan lines will be driven by a texture this texture to be specific on a new visual shoer I'm going to add a node called texture 2D which reads texture data and outputs a color there are different options for reading a texture so I'm going to pick sampler Port which reads whatever texture we slot into the sampler inut for that I'll create a texture 2D parameter so that we can swap out the scanline texture with a different one if we want I'll name it scan line texture I'll also add a color parameter called scan line color which defines the tint color for just the scan lines I'll use a separate color for the Fel later I'll multiply the texture and color together then output the color to a mission and just the alpha component to the alpha graph output what we have so far isn't super interesting because the texture is just mounted to the surface of the object I wanted to scroll downwards over time from top to bottom so we'll need to change the UVS we use for the texture 2D node I'll give myself plenty of space to work with then add a float parameter and name it scan line scroll speed you can guess for this controls I will also add a time node which gives us the number of seconds I think since the game started let's multiply them together and now we have a timing mechanism next we're going to work on the scrolling from top to bottom I want to do this based on the object's World space height but you'll remember from the dissolve Shader that there's no built-in Noe for that so once again let's go to the vertex stage add a variant called World pause input the M Matrix times the vertex using a transform Vector Mt node and then on the frag stage we can use a variant getter and a vector decompos to get the Y component of the world pulse let's add a float parameter called scan Lane scale and multiply it with that y components this will let us control how closely packed the scan lines are the last step is to add this value to the timing mechanism we added previously then create a new Vector 2 using the vector composed node and Slot our value into y the X slot can use whatever value we want because my scan line texture doesn't change horizontally this gives us a new set of UVS we can use for the texture 2D node all that's left is to add the Fel light luckily there's a built-in Fel Lo which works very similar to unities we can slot in a power value to scale the size of the Fel effect the higher the input the smaller the Fel effect for that I'll add a flu parameter called Fel power let's multiply it by a color parameter called Fel color remember that we can go to the raw tab in the Color Picker to choose high intensity colors Now setting up the final graph outputs is a simple case of multiplying the scan line and Fel values together and slot ing it into the emission output then multiplying that Alpha values together and slorting that into the alpha output this graph is also now complete this video is getting pretty long so it's a good job I left the simplest graph till last inverted hole outlines are a very basic method for adding outlines to objects where you expand the mesh itself slightly in the vertex Shader and color the entire object one color in the fragment Shader then render only its back faces then you render the object normally a second time and it'll render over the expanded inverted mesh I'll jump straight over to the vertex T of the graph and add a float parameter called outline size we want it to be fairly small like 0.05 maybe I'm going to multiply this by the normal Vector using a normal node which gives us an offset value for moving the position of the vertex then it will add the result to a Vertex LOE which has the effect of expanding the match this can be slotted into the vertex output it's probably worth noting here that the inputs and outputs named vertex here refer to the vertex position over in the fragment stage of the graph all I will do is create a color parameter called base color and output it to the Albedo and that's it the graph is complete although we're not actually inverting the hole yet just expanding it so we're rendering a slightly bigger sphere in the inspector I'm actually going to give my sphere a new standard material which is essentially the same as unit's standard lit material this is the normal rendering of the object if we expand the material by clicking it one of the options is called Next pass which lets us attach a second material this is where I'll add a new Shader material and use my Hull outline Shader click on the Shader field and make sure that under modes the call option is set to front that means the front faces will get removed and only the back faces are rendered thereby inversing the hole like we wanted and that's the outline that to complete it this was my first real attempt at making something in godo the process is surprisingly similar to using Unity Shader graph for the most part but with obvious differences that will take some time to get used to for one when you type multiply into the search bar there are seven different nodes with exactly the same name which output different types in unity there's just one and it can contextually figure out what output you want given its inputs plus it can take matrices but in godo you need a transform W to multiply with other matrices or transform Vector malt to multiply per vectors and then there was the thing with getting World possessions but it's not all frustrations I'm pleasantly surprised by how fast goo is with things like compiling scrips and for that matter GT script seems all right although I haven't used it much so far I'm definitely going to need to sit down and work with goo a bit further but I'm excited to make more videos in the future but focus on goo so make sure you subscribe to see more until next time have fun Micky jads

Channel: Daniel Ilett

Views: 1,176

Keywords: godot, godot engine, unity, gamedev, shaders, effects, vfx, godot shaders, godot tutorial, gamedev tutorial, hologram shader, hull outlines, easy outlines, outline shader, mesh outlines, dissolve effect, dissolve shader, godot dissolve, godot outlines, godot hologram, godot glow, emissive shader, glow shader, godot custom shader node, custom node, shader node, VisualShader, visual shader, shader graph, godot visual shader

Id: S1FPSU1sp5E

Length: 18min 15sec (1095 seconds)

Published: Tue Feb 06 2024