Shader Convertion Part 2 (Liquid, Triplanar, Waterfall)

Here's the last post to end this ShaderGraph month, all graphs are attached! And previous post is here 

These are a little bit more complicated, I would've liked to do more, but without a double pass option I can't make my Outline shaders (Direcitonal Rim Light, Aura Outline) and the Foam Edge/Intersection effects are also not possible from the nodes given.

But I did manage to convert these other popular shader effects :)

Liquid Shader

Original Code Shader Tip 

The script you need for this is still the same, linking it again HERE for convenience

The difference with the Shader Graph version is that there is no different color for the fake surface and the side foam, because Zwrite On is not an option from graphs, but it still looks pretty cool.

Let's get started.

First part is getting the right positioning to keep the liquid level with the world, while it's in the same position within the bottle.

This is done by subtracting the Object's Position (Not Position Set to Object, very confusing!)  from the world Position

When you make a step of the Position.y and a slider for the fill amount, you can "fill" the object locally

Plug the result into the alpha, and set the Blend mode to Alpha, Turn on Two Sided, and create a Vector`1 for the AlphaClipThreshold to work. Now it only shows the filled part of the object.

Creating a false surface is done by using the Is Front Face Node, as the name suggests, this returns true when it's a front face and false when its a backface, with a Branch node, you can have a different color for these two cases. Multiply the branch result with the step and you've got a fake filling!

Now it just needs to wobble!

  The script that you add to the object with this shader will give it 2 values, _WobbleX, and _WobbleZ, these two values drive how much rotation happens. First they need to be added to the properties, so don't forget to do that!  

The code version uses this rotation function, Shader Graph has a Rotate About Axis Node, it doesn't seem to work exactly the same, but we can sort of create a rotation with this.

Rotate the object by 90 degrees and multiply by the WobbleZ, and add the object position multplied by WobbleX to add the wobble rotation to the Local Position.

Don't forget to add the Wobble Script!

Full Graph Image 

Triplanar Mapping

Shadergraph has a built-in Triplanar node, however, this node only accepts one texture, to have a different texture on each side, it's nice to know how it works and set up the graph the manual way. We need this for the Waterfall shader so I'm going to explain it first.

The idea is that you project a texture from 3 sides in world space. Because of the use of world space this effect is used on static objects, like environments.

First thing we need is the World Position. Split this up so we can use the different projections.

Create a Vector2 for all 3 sides

Use the 3 side projections as the UV of 3 different textures. Now they just need to be lerped together.

Use the WorldNormal.X (R) to lerp together the two sides horizontally, The Absolute node makes sure both sides are used.

For the vertical lerp, use the WorldNormal.y, to only use the top instead of top and bottom, don't use the absolute node, whether you want this or not depends on what effect you're going for. Instead use Saturate, to clamp the result so we don't go into a negative value here.

 Lerp the worldNormal.X result with the Top Texture, and you're done!

Final Graph image here 

Waterfall Shader

Original Code Shader Tip 

There is currently no way to do the edge foam/ intersection so that part of the original shader is missing

This one's a bit complicated, so let's start with what we just learned from the Triplanar setup. 

The waterfall shader needs to move, so this time we add in a Time node to scroll the textures.

Use the Time node to Add scrolling on the WorldPosition.y for the X and Z sides, and to WorldPosition.xz for the Top side

(I'm not adding the extra scaling here, turns it a bit spaghetti)

Just like before, lerp the 3 sides together using the WorldNormal, and Absolute and Saturate nodes

Now there's a nice animated world based noise

The next step is quite similar to the Snow Buildup effect from the last post, we take the Dot Product of the world normal.y, and the noise Blended with the normals.y, to get the top part of an object.

Create a Step of the dot product, then do it again inversed, with a slight offset, multiply these together to get an edge between the two.

It should look like this now, when rotating it, the effect stays on the same spot.

Add some color by lerping a Side Color (A) and Top Color(B) over the WorldNormal.Y, 

I've also added some extra foam specs by stepping through the Triplanar Noise texture, with a bit of Voronoi

End by adding the foam to Emission, the color lerp to Albedo, and the scrolling noise Normal Blend to Normal

Graph of this effect 

Graph of expanded effect with more options (Mostly Smoothsteps, and scales)

Both also attached as graph files

Thanks for reading and have fun!

Become a patron to

Unlock 110 exclusive posts
Be part of the community
Connect via private message