- 5 months ago
In this video, we will take a look at how to create simple Procedural Clouds Skybox in Unity for Universal Render Pipeline (URP) using Shader Graph.
Resources!
Project files https://www.patreon.com/posts/135136104
Previous episodes https://www.youtube.com/playlist?list=PLaE0_uENxXqsa8MFod9T7qIMpubt0s1by
Smoothstep https://youtu.be/w7c41h1g2_k
👉 Do you want to support my work? The best way to support this channel is to buy my game on Steam. https://store.steampowered.com/app/2527340/Cosmic_roads/
👉 Alternate ways to support!
https://github.com/sponsors/DigvijaysinhGohil
https://www.patreon.com/DigvijaysinhG
Resources!
Project files https://www.patreon.com/posts/135136104
Previous episodes https://www.youtube.com/playlist?list=PLaE0_uENxXqsa8MFod9T7qIMpubt0s1by
Smoothstep https://youtu.be/w7c41h1g2_k
👉 Do you want to support my work? The best way to support this channel is to buy my game on Steam. https://store.steampowered.com/app/2527340/Cosmic_roads/
👉 Alternate ways to support!
https://github.com/sponsors/DigvijaysinhGohil
https://www.patreon.com/DigvijaysinhG
Category
📚
LearningTranscript
00:00Welcome back to the brand new episode of the Skybox series.
00:03In this video, we will look at how to create simple cloudy skybox like this one.
00:10And the approach will work just fine for most of the games,
00:14unless your game allows the player to fly through the clouds.
00:18If that's the case, then you will probably need volumetric clouds,
00:22which I will cover in the future at some point,
00:24but for now, I'm using Unity 6, and my project is set up in URP.
00:30And now with all of that out of the way, let's get started.
00:34Alright, I have this scene, and the most notable thing is this global post-processing volume,
00:40which has the module tone mapping with the mode aces.
00:44Alright, now let's create a shader graph.
00:48Make sure to select unlit shader graph.
00:50Then I'm going to call it cloudy, and make sure to include skybox in your name.
00:58Then based on the shader, let's create a material.
01:01Again, I'm going to call it cloudy skybox.
01:06Then go to this lighting window, and in the environment tab,
01:11in the skybox material, let's assign our cloudy skybox.
01:15Then in the shader graph, open up the graph inspector.
01:19And in the graph setting, make sure to uncheck cast shadows.
01:25And before we start creating clouds, let's set some default skybox colors,
01:29because currently it feels a bit disorienting.
01:32Now I've already covered how to create simple skyboxes Unity,
01:36so you should definitely check it out.
01:37But here, I'm going to use a quick and dirty approach using gradient node.
01:41Let me apply some nice gradient.
01:45Then to use this gradient, we have to take its output,
01:49and feed it into sample gradient node.
01:52And now this time input will determine which part of the color to take from this gradient.
01:58So if I pass in 0, I will get the color from the very left,
02:01and if I pass in 1, I will get the color from the very right.
02:05And now I want to apply this gradient vertically.
02:09So for that, I'm simply going to use UV node.
02:13And here the UV node will have three components, x, y, and z,
02:17which will go from minus 1 to 1.
02:20Let me just show you.
02:24So our UVs will look something like this.
02:28Again, nothing new here.
02:30All of this is covered in previous episode.
02:34Then we'll use the y component from this UV using swizzle node.
02:39In the mask, tap in y.
02:42Now here the preview is not very useful, so let me just collapse it.
02:49But we have to remember that the y here will go from minus 1 to 1.
02:54Then I'm going to remap it to go from 0 to 1.
02:57Using remap node.
03:00So we will say that the original range was minus 1 to 1,
03:04and I want it to go from 0 to 1.
03:07So that's all perfect.
03:08Let's take its outfit and feed it into this time.
03:12Finally, take sample gradient nodes outfit and feed it into the base color.
03:17Let's see.
03:18And we have a nice skybox.
03:21Alright, now let's make some clouds.
03:22And for that, I'm going to create new subgraph.
03:25So let me take this project window right here, so that I won't be in a way.
03:31And let's create new subgraph.
03:34I'm going to call it clouds.
03:39And let's open it.
03:41In the subgraph, let's select our output node and open up the graph inspector.
03:46Currently, it is outputting vector 4.
03:50We only need float.
03:51So let's change it to float.
03:53And let's rename it to give some meaningful name.
03:56So clouds.
03:59And now our subgraph will have three properties.
04:03So open up the properties window.
04:05And let's create new vector 2 property.
04:10And by the way, this will act as an input for our subgraph.
04:13So we will receive UVs as an input.
04:17Then one more input for scale.
04:20So new float property with scale.
04:24And we also want to pan the clouds.
04:28So let's create one more vector 2 property.
04:31Let's call it speed.
04:34Drag all three of them.
04:38And now to create some clouds, I'm going to use simple noise node.
04:44And therefore the scale.
04:45Let's use our input scale.
04:47And just to see the preview.
04:51Let's default our scale.
04:54With the value of 50.
04:56And now we will have noise that will look something like this.
05:00And we also want to pan it.
05:02And for that, let's create tiling and offset node.
05:05Take its output.
05:06And feed it into this UV slot.
05:10And now to pan this, we can change this offset.
05:15Pretty cool.
05:16So we will simply use our speed.
05:19And feed it as offset.
05:21Alright.
05:22Now we have our noise.
05:23Now I'm going to duplicate all these nodes.
05:27Then for this noise.
05:29Basically I want the scale to be half of the original value.
05:32So before I feed the scale here.
05:34I'm going to multiply it.
05:39With 0.5.
05:44And then use it as scale.
05:46And same thing with the speed.
05:47But I want the speed to be 10% higher than the original.
05:51So I'm going to multiply it.
05:56With 1.1.
05:59And then use it as offset.
06:05Alright.
06:05We have two different noise.
06:07Let's multiply them together.
06:09Then we will have something like this.
06:16Now again, I'm going to duplicate all these nodes.
06:19And for this one, I want the noise scale to be the quarter of the original.
06:24So instead of 0.05, let's go 0.25.
06:28And for the speed, let's go 1.2.
06:36Then again, multiply it with our multiply node.
06:39Okay, so we will have something like this.
06:47And we will use this as our cloud noise.
06:50So let's take its output and feed it into the output node.
06:53And now all three of our tiling and offset node uses the default UVs.
06:59Instead of that, we want to use the input UVs.
07:03So let's take its output and feed it into all three of them.
07:06It will break the preview, but it will work just fine when we input the UVs properly.
07:14Alright, that's it for our subgraph.
07:16Let's save it.
07:18Then go back to our skybox shader graph.
07:21Now here, I can search for my subgraph.
07:23So clouds.
07:26And for the UVs, let's try to use the default UVs for now.
07:32So it will look something like this.
07:33And for now, let's just visualize it.
07:37Okay, so we have our clouds.
07:39But if I move to the side, we will have some stretching going on.
07:44That's because we are using the XY component of our UVs.
07:49So basically, we are trying to apply the texture parallel to the XY plane.
07:54So basically, from the sides.
07:57We don't really want to do that.
07:58We want to apply the texture from the top.
08:01So instead of using default XY, let's use XZ using another swizzle node.
08:07In the mask, type in XZ.
08:11And then use its output as UVs.
08:14It will break the preview here.
08:16But if I hit save.
08:18Yep.
08:19Now our texture is applied from the top.
08:22Alright, now for the scale.
08:24I want to control it from the inspector.
08:27So let's create a new property.
08:31Scale.
08:33Or cloud scale.
08:38Let's default it to 100.
08:42Drag it in.
08:45And feed it into the scale.
08:48Then for the speed.
08:50Let's create a new Vector2 property.
08:54Let's call it bandSpeed.
08:59And let's default it to 0.001.
09:02That will be too slow.
09:05So 0.01, 0.01.
09:08Then drag it in.
09:10Then take our speed and multiply it with the time input.
09:19Then use it as our speed.
09:22So now you can see that our noise is panning slowly.
09:27But now if I look at it closely.
09:29You can see that the noise is applied in a dome-like shape.
09:33Or spherical shape.
09:35And I don't really like that.
09:37Basically I want to apply the noise flat to the XZ plane.
09:41And we can simply do that by dividing our XZ component.
09:48With our Y component of the UV.
09:52So I'm going to duplicate this whistle node.
09:54And let's take Y channel.
09:58And divide it with our XZ.
10:01Then use this divide node as our UVs.
10:05Don't worry about the preview.
10:07And if I save.
10:08Yep.
10:09Now our noise is flat basically.
10:12And now we have another issue.
10:14That our clouds are also present in the ground part.
10:19We don't really want that.
10:20So to fix that.
10:22I'm going to use this Y component again.
10:26And feed it into the smooth step node.
10:30And now I'm going to say that I want value of 0 if this input is less than 0.
10:36And I want white value or value of 1 if this input is greater than let's say 0.2.
10:43And the input value that falls between these two edges will be interpolated.
10:49Alright.
10:50Then let's simply multiply it with our clouds.
10:57And let's visualize it.
10:59So yep.
11:01Now our noise only exists in the sky part.
11:05Pretty cool.
11:06But now I want to control this blend from the inspector as well.
11:10So for that let's create new float property.
11:16Let's call it blend high.
11:18Let's set the default value to 0 and set the mode to slider that goes from minus 1 to 1.
11:32And drag it in.
11:33Then instead of directly using my Y component I'm going to subtract it.
11:40From the blend height.
11:43And then use it instead.
11:45So now I can control the height from the slider.
11:51Pretty cool.
11:53Alright.
11:53Now we have our clouds.
11:56But they're not looking very good.
11:59So let's try to fix that.
12:01So I'm going to duplicate my clouds subgraph.
12:05Then for this one I want the scale to be 10% of the original scale.
12:11So I'm going to multiply it.
12:16With 0.1.
12:18By the way you can experiment with these numbers.
12:22Then let's use it as scale.
12:24And we will do the same thing with the speed.
12:27So.
12:28So let's multiply our speed.
12:32With let's say.
12:361.2 1.2.
12:38And use it as speed.
12:40Then I'm going to take its output.
12:43And feed it into another smooth step node.
12:46And here I'm going to say that I want black values if this input is less than 0.
12:51And white values if the input is greater than let's say 0.2.
12:58And let's just visualize it instead.
13:04So now we will have something like this.
13:07And now here I want to control this edge from the inspector.
13:11So let's create new property.
13:14Let's call it.
13:16I don't know.
13:17Cloud density.
13:19Let's set the default value to 0.2.
13:27And set the mode to slider.
13:29That goes from 0 to 1.
13:31Drag it in.
13:32And use it as edge 2.
13:36Then we will add this on top of our previous cloud.
13:39So simply add.
13:44Then take this add nodes output.
13:47And feed it into this multiply.
13:49So that we won't have.
13:52This clouds in the bottom.
13:54And let's visualize it.
13:57And by adding this smooth step onto our previous cloud.
14:01We basically added a new layer of clouds.
14:05So here if I increase the cloud density.
14:08Well our second layer is fading away.
14:12And if I decrease the cloud density.
14:15Yeah it becomes more prominent.
14:18So our slider doesn't make any sense.
14:20Basically I want to decrease the density.
14:23If we decrease the value.
14:27So I can fix that by inverting this cloud density.
14:29And we can do that by simply using 1 minus node.
14:341 minus as the name suggests.
14:36Will go 1 minus our input.
14:39And in this case.
14:41Because our cloud density only goes from 0 to 1.
14:44It will invert the values.
14:46Then use this output instead.
14:49So now if I decrease the density.
14:52The second layer is completely faded.
14:55And if I increase the density.
14:57Yep.
14:57Now our cloud density slider makes a lot of sense.
15:01Alright.
15:02Now our clouds are slightly more interesting.
15:05But they fill the entire sky.
15:07I don't really want that.
15:09So let's create a mask for our clouds.
15:11And for that I'm again going to duplicate my subgraph.
15:16For this one.
15:17Again for the scale.
15:19I want the 10% of this scale.
15:23Or basically 1% of the original scale.
15:25So let's again multiply it with 0.1.
15:31Again you can play around with this values.
15:36And for the speed.
15:37I want it to be almost half of the original.
15:41So let's simply multiply it.
15:46Let's say 0.4.
15:50And use it here.
15:54Then I'm going to take this output.
15:56And feed it into new smooth step.
15:58And here I will go that.
16:02If the input is.
16:03Let's say greater than 0.2.
16:05I want black values.
16:07And if the input is less than 0.
16:10I want white values.
16:12And if you're confused.
16:14I do have an entire video about smooth step.
16:17You should definitely check that out.
16:19Alright.
16:19Let's visualize this.
16:22Okay.
16:22So we have something like this.
16:24And we will use this as our cloud mask.
16:27But first I want to control this edge value from the inspector.
16:31So again.
16:32Let's create a float property.
16:35And this time I'm going to call it.
16:38Cloud scatter.
16:44Again.
16:45Let's set the default value to 0.1.
16:48And set the mode to slider.
16:50That goes from 0 to 1.
16:52Drag it in.
16:54And feed it into this edge value.
16:57Then let's take this smooth step value.
16:59And multiply it.
17:03With our clouds.
17:04So this add output.
17:06So by multiplying them together.
17:08We will only see the clouds in this white part.
17:11All right.
17:13Now let's take this output.
17:14And feed it into this multiply.
17:17And let's just visualize that.
17:19So now our clouds will have some gaps in the sky as well.
17:23So that's pretty cool.
17:25And now I want to control the clouds intensity as well.
17:28So for that let's create one more property.
17:32Let's go float cloud intensity.
17:39And let's set the default value to 1.
17:42Drag it in.
17:44And let's multiply it with our final multiply.
17:49Then let's take our clouds and add the skybox color on top.
17:58So let's take the sample gradient output and feed it into the add node.
18:06Add our clouds on top.
18:08And then use this output as base color.
18:12Okay.
18:13Now let's try to adjust our values.
18:16So let's try to increase scale a bit.
18:20For the density.
18:23Something like this.
18:25For the blend.
18:26Let's go.
18:28Something like this.
18:30And for the scatter.
18:35Yep.
18:36Something like this.
18:37But now you can see that we have same issue with the scatter slider.
18:41That we had with this density slider.
18:44Basically what I want is.
18:45If I increase the scatter value all the way to the right.
18:48I want the clouds to be scattered across the sky.
18:52But right now we are having them a lot cluttered.
18:56So this slider is having the opposite effect.
18:59So to fix that.
19:01We will simply invert this cloud scatter as well.
19:03Just like we did with the density.
19:05So let's feed it into one minus node.
19:09And then use this output instead.
19:13So now if I decrease the scatter value.
19:16Yep.
19:17I have the cluttered clouds.
19:18And if I increase the scatter value.
19:21Yep.
19:22They are spread more in the sky.
19:26So this slider makes a lot more sense now.
19:30And there we have some nice looking clouds.
19:32I hope you find the video helpful.
19:34Click that like button.
19:35So that the algorithm will push it to more people.
19:38And if you're new here.
19:39Hit that subscribe button.
19:41And for the project files.
19:42You can check out my Patreon.
19:44That's it from me.
19:46And I'll see you in the next one.
Be the first to comment