Unity Tutorial: Dissolve Shader (Part 2)

Add a glowing outline at the edge of the dissolve and animate UVs.

THIS TUTORIAL IS UNDER CONSTRUCTION (2024/07/01)

Intro

In the last part (Part 1), we setup the basis of our burn-dissolve shader. Now we’ll go the extra step and add some glowing outlines + scrolling UV animations.

We’ll be making this shader.

Unity’s post-processing bloom will take care of the actual ‘glow’ part, so we just need to pump the HDR intensity on our outline colour to ensure it will get picked up in the image effect.

---

Core/Algorithm/Implementation

There are two things to cover in this part, 1. Outline, and 2. Scrolling UVs.

---

1. Outline

We need to isolate some kind of ‘outline mask’.

This is quite easy- we just need to take the step of the noise (aka, alphaMask), and subtract that by another clipped noise mask with a smaller step/cutoff (alphaMask2).

Example: outlineMask = largerMask - smallerMask;

Let’s start by extracting alphaMask2, which is just another pass of our noise through the step function with some outlineWidth offset applied to cutoff.

[MEDIA]

float outlineWidth = 0.1;
float alphaMask2 = step(cutoff + outlineWidth, noise);

Now we can actually calculate our outline.

// Difference is the outline mask.
// outlineMask = largerMask - smallerMask;

float outline = alphaMask - alphaMask2;

Just remember to clamp to [0.0, 1.0] to prevent negative values (from the subtraction).

outline = saturate(outline);

We can use lerp to mix between our texture colour, and outline colour. Thus, where there’s an outline, render the outline colour, and sample the texture anywhere else.

float4 outputColour = lerp(textureColour.rgb, outlineColour.rgb, outline);

---

2. Scrolling UV Animation

The scrolling UVs are simply time * animationScale,
where animationScale is a float2 (a 2D vector, with x and y).

[MEDIA]

float2 noiseUVAnimation = time * animationScale;

That’s all there is to animating UVs. You can now add the animation vector to the UV coordinates used to sample your noise texture/function (from Part 1).

float noise = tex2D(noiseTexture, uv + noiseUVAnimation);

---

Conclusion

…

---

You can follow me on Twitter/X for more (@TheMirzaBeig)!

---