Animated Outline Shader

Growing up watching all sorts of anime, it was great to see when the protagonists would power up and do their most powerful attacks. Having watched a lot of Dragon Ball Z and Saint Seiya episodes has sort of ingrained an idea in me of how a character should be powered up.

Not too long ago, this game called Saint Seiya: Soldier’s Soul came out and they really turned up the fidelity on all the graphics, especially when it comes to the energy auras.

This is how the energy aura looks on the Saint Seiya TV show:

This is how the energy aura looks on the game:

The idea here being that there is some sort of animated outline to show off the state of a character.

After researching the web, and finding various posts asking about how one would implement it, I came across Glow Highlighting in Unity where a great starting point for the implementation is shown using Unity’s Command Buffers.

Luckily, I’d already spent some time looking at MRT, which helped a lot to understand the theory behind this technique.

Essentially, once the outline is set up on your geometry, and its placed on a render target then there are a lot of things that can be done to it, for example, using UV scrolling with a pre-made texture to give it a sense of movement.

This is the animated version of this, all made with Unity:

You can check out the WebGL demo version of this here:

The way this works is the following, in shader code:

1. Render your target geometry, but make sure its only 1 color that you pick
2. Blur the flood filled image a few times to give it some additional width
3. Apply a distorted texture to the blurred render target, which is scrolled over time (and try to make the scrolling non-repetitive)
4. Combine this with the back buffer that has your already rendered scene
5. Apply bloom!

You can see on this image how the frame is built up step by step:

And presto, you have an animated outline, in realtime 🙂