Today on YouTube: Advanced “Shader Graph”
tutorial for complete beginners. Learn how to create Entirely procedural, Totally
dynamic, Wholesomely spaghetti’y …stylized moving clouds, complete with depth
fading, fresnel lighting and horizon bending. Like a boss! But first… If you’re like me, and formal education
haven’t entirely killed off the scholar in you, then let me introduce you to…
…although, what are the chances you haven’t already heard about… “Skillshare”! — is an online learning
community with just south of 30,000 classes on just about EVERYTHING. Being a solo designer/developer means you
have to constantly change hats and learn new things. Thankfully “Skillshare” got you covered,
because you don’t pay for any single course, you get access to every course! And an annual subscription of less than $10
a month means… there’s just no other way of saying this, it is… It’s the “Netflix” of self-betterment. Ok? Because “Skillshare” is “metal” and
decided to sponsor my video, you can sign up with the link in the description below
and get a 2-month free trial. Make your future self proud of this moment,
that’s 2 month of a better you on me and “Skillshare” just by clicking the link
below. And now back to our regular programming. Hello Wildcats. This is a first in a series of tutorials,
which will focus on new and less covered Unity topics. Don’t forget to succumb to the “Fear Of
Missing Out” and subscribe for more Gamedev stuff in the furture. You can basically treat this video like a
wider introduction to the new HDRP pipeline, because we’ll not only work with Shader
Graph, but tackle Post Processing, Scene Setup and all that good stuff… Without further ado, let’s begin! But before we jump straight into Unity, we
will need a base mesh for our Clouds to work with. This will take a couple of minutes, and we’ll
utilise Blender for all our 3D needs. I will assume you never heard of “Blender”,
so I’ll guide you through every step. Go to Blender.org. Click Download. Click “Try Blender 2.8 Beta”. Yeah, that’s how we roll
Download for your OS of choice. But remember, we don’t judge each other
OS choices here. So, you have your copy of Blender opened? Good! Let’s start with a little preparation first. Default Blender scene come with a few basic
objects, so we’ll get rid of them by pressing “A” on you keyboard to “Select All”
and then “X” to delete. Nice. Now let’s create a new shape by pressing
“Shift+A” to add Mesh Cylinder to our scene. Be sure not to click anywhere in the scene
right now, otherwise you won’t be able to modify the base parameters. Expand the window in the lower left corner,
and make it a 6 sided cylinder without any depth. That will give us a simple 6-sided polygon. Now press “Tab” to enter Edit mode, and
by default every vertex will be already selected for you. That means we could just press “I” to
inset the shape by moving our mouse on the screen. Doesn’t really matter by how much we inset
it, because we’ll collapse it by pressing “Alt+M” and selecting “At Center”. This is now our base triangulated 6-sided
polygon. Select our mesh again by pressing “A”
and press “F3” to open “Command Search”, enter “Subdivide” and select “Mesh:
Subdivide”. We’ve just successfully quadrupled our polygon
count, but that’s just the start. With both “Shift & Alt” keys pressed down
click between any of two vertices lying on the border of our shape. That will select the whole border. Press “F3” once again, and search for
the command “To Sphere” under the “Transform”. Now move your mouse until the border becomes
round. Great job, not repeat this process one more
time. “Select All” by pressing “A”, Subdivide
the shape, and then Round out the border. This should be round enough for our needs. You’ll see later, why this step mattered. Now. Right now “Shader Graph” doesn’t have
any Tessellation options so we’ll be pre-subdividing that shape ourselves. But in the future though, with built-in Tessellation,
we will be needing a more basic mesh, much similar to this one here now. Ok, select everything, and Subdivide once
again. But this time, we’ll raise the Number of
Cuts to 15. Giving us a total of almost 25K polygons. And a random “Star of David”-like topology,
for you conspiracy out there nuts to enjoy. 25K is cool and all, but lets subdivide it
one more time, bringing our polygon count to near 100K. And basically we’re done with modeling. You can also, purely optionally, rename the
mesh to you liking. Ok, now let’s get the scale right. Remember, we’re still in “Edit Mode”,
so press “Tab” to get back to “Object Mode”. Press “N” to bring out the Sidebar, and
under “Item”, with our object selected you’ll see its dimensions. Now, that’s not nearly enough for, you know… SKY! So let’s make it 2 kilometres in diameter. Now, if you would try to zoom out, you would
see your mesh clipping. That’s because by default Blender clips
the viewport at 1 kilometer only. So bringing that number up will show everything. Last crucial step is to reset the scaling
of our object, cause it’s waaay off as a result of our previous manipulations. Go to Object > Apply > and click Scale. Congratulations, Blender apprentices. We’re finished. All’s left is to Export our mesh for Unity. Go for the usual File > Export > and select
FBX. Pick a location, name the bastard, and be
SURE(!), to set: Apply Scalings to “FBX All”;
AND to Apply Transforms; Otherwise our mesh would be rotated by 90
degrees, and that’s just not how we roll. Some experienced people might wonder, “Roman,
why haven’t we just used the “Subdivision Surface” Modifier”. Well, the reason is that this modifier subdivides
polygons in a different way, where it tries to produce Quads, which gives us different,
less even topology, where some parts of mesh are more dense than others. And that’s just not out style. Unity Time! Let’s create a new project. I am using the latest stable Unity build at
the moment. And I will be working in High Definition Render
Pipeline. Now, I don’t see any reason why this shader
would not work under Lightweight Render Pipeline, save for maybe some transparency issues. So you’re free to pick the one you choose. Just remember to use the proper Master Graph
node. After waiting for the project to finish setting
up, we continue forth. Now, as pretty as sample scene is, let’s
create a new one, and make sure we have all the components needed. Go to “Window” > “Package Manager”
and make sure “All Packages” are shown. Scroll Down and install “Shader Graph”,
I’ll be using version 5.7.2. Now, let’s create a couple of folders to
hold our Shaders and Models, cleverly named “Shaders” and “Models”. We’ll import previously created mesh and
put it inside our scene. Yeap, that’s the one. Next, create an Unlit HDRP Graph Shader and
name it at least somewhat coherently. By clicking the shader with our right mouse
button we will create a material with that said shader already assigned to it. Last thing is to create a folder to hold our
materials. Just trying to be tidy is all. Assign the material to our mesh, and we’re
all set. With our shader selected, let’s finally
open the Shader Editor. Now, if you’re like me, you might experience
quite a lag inside the “Shader Graph” window. As you can see, I’m now moving the canvas
with my middle mouse, and it’s far too unresponsive. But, moving the “Shader Graph” window
off the main Unity window, say, to another monitor or a virtual display will fix that
in a heartbeat. The lag you still see and truth be told, will
be seeing till the end of this video, is in fact, because I’m an idiot, and recorded
this whole process in a full 5K resolution on my iMac. Bad idea. This is totally on me, and I’ll do better
next time. Now, there are many ways to skin a cat, and
a bunch more to generate the clouds. The idea is not to use any image maps. So let’s see what options do we have… There is of course the Holy Grail of water
modeling — Gerstner Wave function, maybe we could just take that, modify it a litt… OH GOD, PLEASE NO! Ok, I remember there was an official Unity
water shader example using overlayed Sine-waves… Ummm… COME ON! Is it so much to ask for something that looks
good AND is simple its implementation? Well, there is. We’ll base our clouds entirely on simple
Noise functions and still maintain quite a degree of flexibility. Ok, back to Shader Graph. A moment for the history books — our first
node. Right click anywhere and select “Create
Node”. Go for the “Gradient Noise” and output
it into the “Color” input of our Master Node. Save our Shader to apply changes and… What the hell? Alrighty then. Seems like UV mapping is not the way to go. Let’s use World space projection instead. To do that, we’ll make a cute little Centipede
out of our nodes. Add “Tiling and Offset” node into UV input
of our “Gradient Noise” node, and plug in the “Position” node into the UV input
of that one. Save the asset and take a look at the… Well, at least it’s different. Ok, what’s happening here is that we’re
projecting the noise map sideways. Giving us a one-dimentional noise pattern. And that is easily fixed. All we need to do is just to rotate our position
by 90 degrees. So, let’s branch the “Position” node
into “Rotate About Axis” node. We’ll use Vector4 for both remaining inputs
parameters. “X, Y, Z” of that node will be used to
define our axis of rotation, and “W” output will be our rotation amount. We will get that via the “Split” node. Be sure to change the “Units” to “Degrees”. Now we can connect that node back into our
network and set default parameters, so our preview would be useful to us visually again. Convert the “Vector4” node to “Property”
and rename it to “Rotate Projection”. We’re all set, save the asset and let’s
get back to Unity. Inside the “Material Inspector” we can
see our fresh Properties. “X” set to ONE means we’ll be rotating
our projection along the “X” axis by the number of degrees we enter inside the “W”
parameter. And as you may see, as we raise the degree
of rotation, our projection is straightening out. But it’s hard to make out the Noise on such
a big scale, remember, our mesh is 2 km in diameter. So let’s change the scale of our “Gradient
Noise” to “0.1”. Ahh, much better now. Now, I don’t like that our “Noise” preview
became pretty much a useless gray rectangle, because of the scale we’re working on, so
what we’ll do is create a Property with default parameter just for the “Shader Graph”,
but change the value in the “Inspector” to our needs. For consistency sake let’s call it “Noise
Scale”. Much better. And now we have full control of the “Noise”
node from inside our scene. Dope. Before we move on to more “Shader Graph”
fun stuff, let’s do a little organizing. Collapse the nodes you just created, put them
in a group, and set them aside for now. There’s still more to noise pattern, but
let’s jump ahead a little, and animate the bastard. It’s always more fun when things are moving. So, create the “Time” node and connect
the first output to “Offset” slot of our “Tiling And Offset” node. Things are moving! But you know what, they’re moving much too
fast for my taste. So let’s plug our “Time” node inside
the “Multiply” node first. That will allow us to control the speed at
which our clouds would be moving. Multiply it by 0.1 and don’t forget to save
the asset. Once back in Unity, we must make sure that
the “Animated Materials” under “Viewport Effects Toggle” settings are turned on. Hmm… Seems like our clouds are so slow now, we
can’t even notice the movement inside the viewport. Go back to Shader Graph and create a Vector1
node to control the speed. Let’s set it to a random “110” and see
what’ll happen. Ahh, now we’re talking! Like previously, let’s define a default,
much smaller speed, so that our “Graph Shader” preview isn’t freaking out, but we will
set the real amount inside the “Material Inspector”. So, follow along, convert the node to Property,
and name it respectively. From here we can play with different speed
amounts, and make sure everything works as intended. I’m gonna go ahead and hide the “Grid”
from our viewport, keeping the minimalistic lifestyle thing going. After we’d admired our black’n’white
mess of a so-called cloud, let’s get back to Shader Graph. We’re gonna put our heavily subdivided mesh,
we worked on so hard in Blender, to good use. First, we need to create a “Position”
node. Which will give us precisely that for each
of our thousands of vertices. Next, a “Normal Vector” node, which will
give us the normals of those vertices. Set the “Space” dropdown to “Object”. And now, we will multiply the Normals by the
amount of our “Gradient Noise”. That will give us a cool ZERO to ONE value
along which the vertices will be displaced, although that’s not nearly enough for the
scale at which we are working. Set the “Space” parameter of our “Position”
node to “Object” as well. Put them side by side and combine the results
using the “Add” node. Finally, connect the output into “Position”
of our Master Node. Now, as I previously said, the output of “Gradient
Noise” is between ZERO and ONE. And with such values on our scale of kilometres
we just won’t notice a thing. So we’ll create a “Multiply” node and
a property to control the amount of displacement — which is basically how high will our clouds
go. Right now I will just set it to ONE, to show
the difference in the viewport. Don’t forget to save the asset and let’s
look at the result. As suspected, looks like nothings changed. But we know that looks can be deceiving. Soo, maybe, from a side angle we might see
something… Nah! Let’s just crank that multiply amount. Set it to 100, Save the asset… and… Boom! Now we’re talking! Our “Game View”, though wasn’t prepared
to see this black magic. Let’s bring the camera a little higher,
just a sliver above the clouds. Ok, all’s left is to make a property out
of our “Vector1” node, and name it respectively. Save the Asset and you’re free to go crazy
with the values inside of Unity. Before moving forward, let’s quickly organize
our nodes by grouping all the ones responsible for displacing our mesh. And let’s close the “Main Preview” window,
as it’s no longer of use to us. Right now our clouds are moving, but despite
that, the pattern itself is still static, which is boring. So let’s fix that. Duplicate the “Gradient Noise” node, and
connect the same “Noise Scale” property to it. For UV input create a new “Tiling and Offset”
node and plug in the same “Projection” group output into it. What we have now is basically the same Noise
Pattern at the same scale, but without any movement. Now we’re gonna combine those maps using
the “Add” node, and then divide the result by 2, effectively normalizing it, meaning
our output will be between ZERO and ONE, instead of combined TWO, which is crucial to our further
calculations. Connect the output from the “Divide” node
back into our network. Now here’s something to note. Sometimes “Shader Graph” won’t let you
connect a new node to the one, that is being utilised at the moment. So first you’ll have to disconnect the output
of that node, make our new connection, and then reconnect the output back. Ok, we’re ready to save the asset and take
a look at the result. Now ain’t this much better? The pattern comes alive and it’s almost
completely random and unpredictable. And that is exactly what we’re aiming for. But right now our clouds have a very smooth,
sine wave-like shape, and that’s not the look we’re going for. What we need for them is to look more like
this. With round peaks and sharp valleys. So that is exactly what we are going to do
next with some math wizardry. First we need modify our output by using the
“Remap” node. What it does is just that, it remaps the values
from one range to another. So, right now our output is a value from ZERO
to ONE. And we need to expand it to go from NEGATIVE
ONE to ONE. Which will place ZERO in this range exactly
in the middle. Now we just “Absolute” that output, converting
every negative value into positive, which gives ZERO to ONE range again, but the pattern
now is much more complex. Reconnect the node back into our graph. (Side note: you may need to fiddle with the
connections here like me, again.) Don’t forget to save and let’s switch
back to Unity. Ain’t that something! I love how we’re starting to get these non-uniform
shapes. Although black and white grading is getting
a bit old, but we’re gonna fix that pretty soon. Let me just slow this down a bit. Yes, I’m really happy with the results so
far, and we’re using just a few nodes here and there. Let’s make a Property out of our “Remap”
node, so we can modify it in real time, giving us the flexibility to change the general look
of our clouds. Now, we can’t convert the “Remap” node
itself to a property, but what we can do is make a “Vector4” node and “Split”
its output into a couple of different “Vector2’s” using the “Combine” node. Just like that. Now we make that “Vector4” a property,
and let’s get back to Unity and play with the parameters. As you can see, by modifying the “Remap”
values we can get pretty different results. Right now though, I won’t worry too much
about the look, we’ll tune it later, after adding some more stuff on top. And we’ll start by controlling the color
of our clouds. Now, this step is pretty simple. It’s just a matter of interpolating our
noise map between two colors. Add a “Lerp” node and connect our output
into the “Interpolant” input, marked as “T”. Next, create two “Color” nodes and connect
them into “A” and “B” slots. For default values just set them to Black
and White, corresponding with our Peaks and Valleys. Convert them to properties and name accordingly. Don’t forget to connect the output of “Lerp”
node back into “Color” slot of our Master Node. Let’s group these nodes and save the asset. I’m gonna give my clouds a grayish blue
color, but you’re free to go crazy with yours. Next, let’s add an ability to control the
slope of our clouds, giving us just a bit more flexibility overall. Let’s move these nodes to the side and connect
the “Smoothstep” node right in the middle. You could already see the result of that node
in the preview. What it does is — it smoothes out the peaks
and valleys of our height map. Save the asset and take a look at the change
As you can see, our clouds have quite a different look to them now. Let’s plug in a couple of “Vector1”
nodes in place of default “Smoothstep” parameters, and make them Properties, for
us to play inside the Inspector, to find the shape that’s right for us. Finally, let’s add one more node to our
Graph to control the “fluffiness” of the clouds. We’ll do that by plugging in the “Power”
node right before our “Remap” node. And to save us some back-and-forth, let’s
go ahead and make a property for the number of times we are raising our input by. In math this operation is called “Exponentiation”. But here it’s just “Power”, because
shaders are “metal”. Do the usual, name the property, save the
asset, and let’s check the result. As you can see, now we have the control over
how much do the peaks ummm, dominate over the valleys… I guess. But also notice we have some weird artefacts
on our mesh. Fortunately for us, that is easily fixed. Back in “Shader Graph” we can see the
same thing — pink dots, appearing in some parts of our map. The fix is to prepend our “Power” node
with “Saturate” node. What it does is making sure that every value
that is lower than ZERO stays as ZERO, and every value over ONE stays as ONE. This is the equivalent of “Clamp Zero to
One” in coding. Seeing now that the artefacts are gone leads
us to believe that input wasn’t in fact exactly between ZERO to ONE, and I guess “Power”
node just doesn’t like that. Our shader network is quickly maturing, so
let’s group some of the nodes together, name them accordingly and collapse the properties. See you on the other side. Now, remember, our Sky Disk is 2km in diameter,
so I think lowering the size of our noise pattern would suit the scale more. But I hate the overall uniformity we still
have. It won’t be that noticeable, if at all,
from our game view, but it bugs me all the same. So let’s quickly fix that. Can you guess how are we gonna do that? Correct, in case of emergency, use the “Noise”
node. Ok, the idea here is to create a larger base
layer, that would be mixed in with our current noise layer, and introduce the much needed
variation. This first part is basically all the same
steps from before. We create a “Gradient Noise” node. Create a property to control the “Scale”. Name it, realise your mistake and name it
the right way. Next, plug in the “Tiling and Offset”
node. Find our “Projection” group and connect
its output into the UV slot. Plug in the “Multiply” node inside the
“Offset” input, and connect our “Time” node. Realise that some nodes now have to leave
the “Time” group and move them around to untangle the mess you have created. Now create a property to control the speed
of our new “Noise” node. Move some other nodes around… And we’re ready! Ok, it’s time to combine the layers. Create the “Add” node and connect the
output of our “Noise Modification” network with our new “Noise” node. Plug it in all the same places our previous
output was connected to. And in the scene view we can now change the
Base Scale property to see that we are, in fact, combining our “Noise Maps” of different
scales, although the effect is almost negligible. So let’s multiply that sucker to make it
more prominent. Go back to our Graph and do nothing of the
extraordinary sorts. Just the same good old “Multiply” node
and a property to control the strength. Reconnect it back into our Graph, and save
the asset. Much better! But what we’ve done here is just overlayed
the two noises. The heart’s in right place, but that’s
not what we wanted. The idea was to “eat in” the other noise. So let’s finish it! Connect the “Divide” node to the output
of our “Add” node, and create a separate “Add” node to divide our result by. Enter ONE into the first parameter of that
node, and connect the “Base Noise Strength” property to the second parameter. What we’re doing is getting the combined
range of both noises, and using it to bring our result back to ZERO to ONE range. Reconnect it back into our network, save the
asset, and let’s switch back to Unity. Now, by raising the “Base Strength” we
specify how much of our main Noise Layer gets mixed in with the lighter parts of the base
noise, while in dark parts the details remain more defined. And by raising the “Noise Height” we control
the overall vertical scale. This was the final step needed to get the
most of our pretty simple and straightforward Cloud setup. I’m gonna play now with all the parameters
until I find the shape that suits my taste the most, and you should too. Inside the “Shader Graph” I encourage
you to group the nodes together and take the time to organise your space. In the end I decided upon these parameters
for my clouds, further scaling everything down. Now, let’s take a look through our Game
view. Our camera is just above the clouds, but no
matter how we look or how high we’ll place the clouds, we’ll still see the horizon,
which just looks bad and wrong. So let’s fix that with some more Shader
Magic. But first, I just hate how dull the color
of our clouds is. And that’s because real clouds are lit by
the light, and ours just bleh. So let’s create a “Multiply” node out
of our “Colorize” group and append a property to control the “Strength” of said operation. We’ll use this node group to set the amount
of emission our shader will…ummm, emmit. So, name everything properly and connect the
result to the “Emmision” slot of our Master Node. Save the asset and let’s take a look at
the result. Aaand seems like nothing changed. We can turn the emission value Up or Down,
but our clouds are still as dull as they were. What’s happening here? Well, that’s because by default, every HDRP
scene will have “Render Settings” and “Post Processing Settings” assets included
and enabled, which gives us this cool HDRP look. But what it also does, is limiting the Exposure
of our scene. So let’s bring some numbers down. And while we’re at it let’s turn down
the Directional Light, because it’s lighting up the Volumetric Fog and blinds our camera,
which is also enabled in our scene by Default. You know what. Let’s turn the Light completely off for
the time being. Now, if we’ll return to our Material, we
would see, that “Emission” parameter is now working as it should. And this is now starting to look much better. And we can return to fixing that “Horizon”
problem. Remember earlier in Blender, I said that we
need a round shape for a reason. Well, this is the place where it finally comes
into the play. Because we’re gonna bend our sky like a
bowl. And you can’t have a nice rim if your shape
has sharp corners. So, to do that, once again, we will need the
help from our Math Gods. Add the following nodes onto you Shader Graph
canvas: Normal Vector;
Position; Object;
Distance; “Object” is a new node for us, but it’s
self-explanatory — it gives us basic information about our object, like position and scale.g
We are going to use it to find the distance between the center of our Object (it’s position)
and each of the vertices, denoted by the “Position” node. No need to change the World Space of our “Position”
node, because the “Object” node, by default, gives us World Space values. Ok, now let’s multiply the result of our
“Distance” node with the “Normal Vector” just how we’ve done it in the past. All’s left is to combine our offsets using
the “Add” node and plug the result back into our Master Node. Save the asset… and voila! Ground Control, we have a cone. Great, now that we know our nodes are doing
exactly what we needed from them, let’s turn that cone into a bowl. At the moment we are offsetting our vertices
linearly, based on the distance from the objects center, giving us a precise 45 degree angle. What we need though, is to interpolate those
values. So, go and add a “Power” node just right
after the “Distance” node, reconnect it into our network and make it cubic, by entering
number 3 into the other slot. I don’t recommend you switching back to
Unity just yee… Well, now you’ve done it. Ok, ‘’Power” node doesn’t joke around. We’re just dealing with very big values,
so let’s bring them down. Divide the “Distance” node, and create
a property for the “division by” parameter. Name it “Curvature Radius” and now switch
back to Unity. Now, prepare to have your mind blown. By raising the “Curvature Radius” parameter
we are able to control how much does our clouds bend to horizon allowing us to create a feeling
of an endless sky. And be sure to check out, how it look from
the game screen. Let’s group our nodes, and take a look at
our network from distance. Looks alright, only a couple more steps to
getting perfect Clouds. But before we move on, I’d ultimately like
to fix a couple of things in our scene lighting. First of all, let’s switch back on the “Directional
Light”, and then go to “Render Settings” and disable the “Volumetric Fog”. We don’t have the need for fancy stuff at
this moment, but you’re free to do whatever you want
once we’ll finish this up. Ok, the thing that bugs me, is that as the
sky gets brighter closer to the horizon, but our clouds remain just meh… So let’s throw a simple “Fresnel” into
the mix. We won’t be doing anything crazy, because
of the nature of the clouds, them being very forgiving, when it comes to light scattering. For those who are unfamiliar with what the
hell is “Fresnel”. Well, basically, when it come to shaders,
“Fresnel Effect” gives us the angle between the surface of our mesh and the line of sight. Which is also called “The Angle of Incidence”. You can see the effect right on the node itself. As we move our eyes from the center of Preview
Sphere towards the edges, the angle changes and we get a nice gradient. Same thing happens with our clouds, the farther
they go, the sharper the “Angle of Incidence” becomes. Ok, So let’s rewind, and go step by step
again. Branch our “Combine Noise” group output
into a “Multiply” node. In our case it will act as an Alpha Map for
our “Fresnel”, meaning we’ll get less of the effect in the valleys. Plug in the “Fresnel Effect” into the
other slot of the “Multiply” node. And create a property to control the “Power”
of the “Fresnel”. The higher the value, the sharper the effect
will be. Now, let’s also create an “Opacity”
controller, by outputting the result into another “Multiply” node and creating another
property. All’s left is to combine our effect with
the “Colorize” group output using the “Add” node and plug it all back into our
network of nodes. Both the “Color” slot of our Master Node
and the “Emission” Group. As usual, don’t forget to save the asset,
and let’s switch back to Unity. The effect could be seen at once. Let’s tweak the parameters to our taste. Now, this is much better. Before moving to the final part of our clouds,
I’m just gonna take a second to organise the nodes, you’re welcome to do the same. Now, this is the big one, we are going to
tackle the transparency. First of all, let’s create a huge box to
act as our intersecting geometry. I’m just gonna move it into the Camera view
and rotate it for no reason. The lighting is a bit harsh at the moment,
so let’s bring down the intensity of our “Directional Light”. Next, I’m gonna apply a simple white material
I’ve created behind the scenes to our Cube, it’s not necessary, I just wanted something
controllable in case. Go to “Render Settings” asset, disable
the volumetric fog, if you’re like me and left it enabled between the different takes. Find the “Visual Environment” section
and enable “Ambient Mode”, setting it to “Dynamic”. Great, our scene now looks much better. NOW we’re ready to to tackle the transparency. Ok, so we’re gonna use some new nodes now. Create the “Scene Depth” node and set
the “Sampling Mode” to “Eye”. Next add the “Screen Position” node and
set its mode to “Raw”. These nodes give us the screen position of
our mesh vertices and camera’s depth buffer. We can leverage that information to add transparency
where our clouds intersect with other geometry. Now, “Split” the “Screen Position”
node into channels, and “Subtract” ONE from the “Alpha” channel. Create another “Subtract” node and plug
in the outputs of our nodes. Disclaimer time: I’d love to speculate on
what the hell are we even doing here, but I’m pretty sure there are much smarter people
that can do a better job of explaining what’s happening here, without sounding stupid while
trying to pronounce phrases like “homogenous coordinates” and “projective vector space”… For now though, remember that’s how we get
the depth information to use in scenarios like this one. Ok, we can already try to connect the result
of our calculations into the “Alpha” channel of our Master Node. Next step is a crucial one, we have to enable
the transparency on our shader. Click the small gear icon on the Master Node
and select “Transparent” from the “Surface Type” dropdown. Also let’s check the “Double-sided”
parameter, just for the hell of it. Now, don’t yet switch back to Unity, cause
you’ll either, see all white, or no changes at all. The reason is that we’re simply still working
on a much grander scale than usual. So what we need to do, is to “Divide”
the result of our calculations. Enter some large number, like 100, and make
a property of it. This will be our setting for controlling the
density of our clouds, or in other words, the range of transparency. One final step is to “Saturate” our result. That was the reason for the white-out. We don’t like our alpha values going over-board. Ok, this might surprise you, but we’re done. Switch back to Unity and see for yourself. Ahh, so pretty! And by changing the value of the “Fade Depth”
parameter we just added, we are able to control the density of our clouds. But wait, Roman, what are those? If you pay close attention, you might notice
that since we enabled “Transparency”, some polygons on our mesh randomly decided
to clip out of existence. Well, that’s surely a deal-breaker for us. But it’s not all lost yet. Now, at this moment in time Shader Graph doesn’t
have any options for us to fix this, so we’re just gonna have to put on our hacking gloves
on and hack away at some code ourselves. Don’t worry though, it’s far more easier
than it sounds. Switch back to Shader Graph, and first of
all, let’s group the nodes. Zoom out and admire the work you have put
in today, there’s nothing wrong in feeling proud for yourself. Ok, back to the issue. Right-click the Master Node and select “Show
Generated Code”. You will be switched to your Code Editor of
choice. “Visual Studio Code” in my case. First of all let’s save the shader back
into our “Shaders” folder. Find your project and call it something like
“Clouds Generated”. Switch back to Unity and switch out our Shader
Graph shader with the newly Generated one. Notice that the name of our Shader is not
the same as the name of the file, as it has taken then name of our Master Node — “Unlit
Master”. That name can be easily changed inside the
generated shader code, right at the very top. Ok, once switched, everything should look
the same. Let’s go back to our Code Editor. Scroll down, or use the Search command to
find the pass named “ForwardOnly”. All we have to do is set the “ZWrite”
parameter to “On” instead of default “Off”. Save the shader, and switch back to Unity. Ta-daa! No more clipping artefacts. You are now, officially, a licensed Air-Bender. Ok, one final trick you can do. Append a “Smoothstep” node to the end
of the “Depth Fade” group, and leave the default parameters as they are. Reconnect it back into the “Alpha” channel
and switch back to Unity. Now, there is nothing wrong with the linear
transparency falloff we have here now, with our generated shader. But if we’ll switch it back to “Shader
Graph” version, just by dragging the shader onto the material, you’ll notice the falloff
becoming just slightly smoother thanks to the “Smoothstep” node. With all you’ve seen here it’s easy to
imagine how this all could be applied to create oceans and rivers, desert dunes and alien
landscapes. So, what are you waiting for? Go out there, be bold, be creative, THE WORLD
IS YOUR… I really hope you enjoyed my first tutorial,
and learned something along the way. As you might or may not know, I’m developing
my first major title — an atmospheric golf-inspired narrative-driven game, and it’s been a couple
of months since my last devlog. Well, blame it on my obsession with new and
shiny. I just had to try Unity’s new Scriptable
Render Pipelines and the tools that come with it. Who knew I’d find “Shader Graph” to
be a very, very capable tool already, and a joy to use. So I guess I’m staying. Making 40-minute videos is a monumental challenge
and takes WEEKS to produce, so I really count on you guys to spread the love, leave a comment,
share the video, like the video, consider buying me a cup of coffee or supporting me
on Patreon… Speaking of Patreon! Thank you so much my dudes! I won’t continue butchering your names with
my terrible accent, but I want you to leave this video knowing, you’re making a big
difference in one particular wannabe game-developers life. And because you guys are so awesome, I’ll
be uploading the whole Unity project, with the shader and the mesh for any Patron tier
to download and dissect. So if someone’s ever needed an excuse to
support a struggling Unity dev, now’s your chance.
