minionsart
patreon
Shader Graph - Vertical Dissolve/Teleport
🕑 Added 2020-04-08 18:19:23 +0000 UTCHi!
Here is the Shader Graph version of this code shader : Vertical Dissolve/Teleport from a few weeks ago :)
Let's go over it step by step, (Graph Files are attached if you don't want to follow along!)
Start with a new PBR Graph
Triplanar Noise
Start by adding a Triplanar Node based on a new Texture2D Property (Noise Texture) and the Position Node set to Absolute World. Also plug in a new Vector1 Property(Noise Scale) to control the noise size
Adding Scrolling
To make the noise move, we need to adjust the Y(G) value (to scroll down) of the World Position. Split the Position node and Add Time multiplied by a new Vector1(Noise Scroll Speed).
Reconstruct the World Position by plugging the new Y value, and the original X and Z into a new Vector3 node that goes into the Triplanar Node.
Object Position with Noise Cutoff
Moving Position
The cutoff for where the model will disappear is based on a position on the model.
For this position add a Position Node set to Object. Just like with the Triplanar Noise Scrolling, we only need to adjust the Y value.
So Split the Position, and Add a new Vector1(Dissolve Amount)
Added Noise
We want the noise to be added to the Moving Position, so Add the Triplanar Noise to the Y position, before the Dissolve Amount is added.
Cutoff Noise
To create a nice cutoff point, add a Smoothstep, using the Moving Noise Position on the In Input.
To control the cutoff, add a Vector1(Noise Cutoff), and another Vector1(Noise Cutoff Smoothness)
Main Texture
Now we can add in the Main Texture via a new Texture2D(Main Texture), multiply it with the SmoothStep result
Extra Edge
The effect will look nicer if there's a glowing edge around the cutoff point. To make this just add another smoothstep, with the same Noise Cutoff and Noise Cutoff Smoothness. Only before plugging in these values, Subtract a new Vector1(Edge Width).
Then Subtract the first Noise Cutoff, and Multiply with a new Color(Edge Color).
This is going into the Emission Plugin of the PBR graph for that glowy effect!
Clip
Plug the result of the Smoothstep Extra Edge into the Alpha slot to discard the black pixels
Vertex Displacement
Finally to give the effect a little extra oomph, we're going to add vertex displacement.
For this we need the Moving object position again, but without the noise. So copy those nodes and take out the noise part.
Because the Position of the displacement can be dependant on the texture you use, add an addition Vector1(Vertex Displacement Offset).
Displacement Range
Using the Moving Position + Offset as a base for two smoothsteps we can create a soft range where the displacement will happen.
In Both Smoothsteps, have a new Vector1(Displacement Width), and a Vector1(Displacement Smoothness). With the top one Negating the Width so they move equal distance from the Moving Position line.
Multiply these together for the range result.
To expand nicely, we base the displacement on the Normals, but only the XZ because we expand outward. So Split a Normal Vector node set to Object, and reconstruct in a Vector3 with a 0 Y.
Now Multiply the normal.xz with the displacement range. Then Split off the XZ into a Vector3 with 0 Y again.
To control the size of the displacement, add a new Vector1(Displacement Scale)
And finally, add this result to the Object Position before plugging it into the Vertex Position of the PBR Master.
And that's it! A cool Dissolve/Teleport effect :)
Invert
Maybe you want to invert the effect, in that case, add a new Keyword > Boolean (Invert)
And plug this in in 3 places:
In the Scrolling group, set the Off version to Subtract the Time * ScrollSpeed from the WorldPosition.y, the On version is the existing Add result
Also after the Noise Cutoff group, add the result to On version, and run the result through a One Minus node before going into the Off version.
Before adding to the Alpha, set the Off to the current Alpha, and On to the result of the Extra Edge group
Now you can Invert the effect with the toggle!
Additional things I added:
Multiply the Edge with the noise, and a brightness slider. This gives the effect a bit more depth
Attached is the Graph from this Tutorial, and the one from the stream that's a lot messier but has a slighty different approach
Settings for the Sphere Material:
Have fun!
