Hi and welcome to my first expedition blog. For this post, I will be presenting some of the shaders I have worked on in my previous project. The shaders I will cover are the sky and water shaders. This blog will cover a bit about how I made them and present the final results. Without further ado, let us begin!
Shaders. For the those beginning to learn more about shaders, this task seems like an overwhelming journey. As someone whose only tweaked shaders, but haven't really delved deeper than that, this task at hand was intimidating. It was time to give it a shot.
Water Shader
Base Shader
I began my search for good-quality water shaders online. However, after attempting most of them, they either looked too underwhelming or were simply out of date with the engine's version. After countless hours searching online for a good start, I had finally came across a solid lead. An article created by John O'Reilly, titled the following: Art That Moves: Creating Animated Materials with Shader Graph.
After following the article, I created my very own water shader. The unique feature about this shader was how they've simulated the waves. It was using sine waves to simulate different sets of waves.
Extra Modifications
I felt the waves were too dramatic, therefore, I reduced its intensity in the inspector. As a result, the water looks flatter with waves subtly moving across the surface.
There was also one more feature this shader was missing: foams. I wanted the shader to be interactive to improve the player's immersion. So, if an object is floating in the water, we would expect to see foam wrap around the object. To achieve effect, I used a tutorial by
Binary Lunar, called: 3D Stylized Water with Refraction and Foam Shader Graph - Unity Tutorial.
Using the tutorial, I created a sub-shader called, Depth Fade. The purpose of this sub-shader is to effect the colour of the water when there is an object intersecting it. When the object is in the water, the Depth Fade is used to calcualte the water's colour. So, the surface of the water that is intersecting with the object appears lighter, compared to the colour below the surface. We calculate the Depth Fade by subtracting the scene depth from the screen position, and then divide that by the distance.
This sub-shader will be used to create the foam.
Next is generating foam. To do this, I based the tutorial on this step. I used the newly created Fade Depth sub-shader, and multiplied that by the foam cutoff. Then, I plugged the resultant into the step node and plugged the gradient noise node with it.
With the foam all set up, I've plugged the foam result into a blend node. I played around with the blend settings until I've found the best option as shown below:
This was then plugged into the Albedo section of the shader. Voilà, water shader is all done now. As you can see, the foam wraps around the object as it should.
Final Product
Sky Shader
Base Shader
For the sky shader, the same problem came about again. I struggled to find a decent sky shader, I thought I found a decent looking-one using shader graph. However, I wasn't satisified with how the clouds looked. Therefore, I turned to something other than shader graph: hlsl. I came across a tutorial by Harry Alisavaskis, called, My take on shaders: Sky shader.
After following the tutorial, I now have my very own sky shader. The clouds and the sun are calculated separately, and then added into the colour of the frag function.
Modifications
One factor I noticed about the sky shader were the clouds themselves. The set of clouds rotating along the sky sphere was symmetrical to each other. Let's say you look at one side, there is a chunk of cloud on the right, and then you look at the other side, it's the same chunk of cloud. To mediate the problem down a notch, I've created a new set of clouds.
As you can see, I've duplicated the line and created a new float called, clouds2. The float contains some custom secondary properties such as the cloudsThreshold2 and cloudsTexSecondary, so we would be able to customise this second set in the inspector.
Then I just add the second set of clouds on top of the original set of clouds. As a result we have a set of clouds overlaying the original set. With this, I tweak the panning speed and the size of clouds separately, and we now have a better looking sky shader. I could go ahead and make more sets of clouds to make it look like the clouds are random. Although, for now I think one extra set is doing a good-enough job.
There's one more addition I've made to the shader. Since the shader comes with a sun, I wanted a property to adjust the sun's brightness. This will used along with the bloom post processing effect in Unity.
For this to work, I created a float property called _SunBrightness. Then at the end of the frag function where we finalise the colour of the sky shader, we multiply the sun colour with the sun brightness.
There we have it. With post-processing enabled, we can see the sun get brighter and brighter.
Final Product
I'm happy with this sky shader and the additions I've made. So I would call this a job done.
It's been quite a journey. I learned a bit more about shaders, and thanks to these tutorials , I was able to create something big.
Thank you for reading my expedition.
Links used: