Miguel Santirso

Videogame programmer and designer.

Feb 23, 2018

A simple erosion effect I used in La Última Flor de Lazlar (Unity shader inside)

After my last tutorial on revealing texts better, some people asked about the effect I use to reveal images in La Última Flor de Lazlar. It’s an effect that tries to evoke painting with a brush:

sample

It is a super simple effect that uses a second texture to control how the first one should be revealed.

This extra texture has a specific gradient, from white to black, and the shader decides the alpha of each pixel in the output based on the darkness of the equivalent pixel in the extra texture.

A GIF is worth a thousand words:

explanation

In the top-right image, the red pixels mark the threshold between the visible and invisible parts of the output image. There is a “softness” parameter that controls how hard or soft that edge should be.

As you can see, this shader is super flexible and can create very different effects depending on what you do with your second texture!

Here’s a link to the shader, feel free to modify it and tell me if you improve it! :P

Erosion shader used in La Última Flor de Lazlar

I wrote this shader over a year ago and I have learned much more about visual effects in the last months. I want to share but it takes a lot of time and motivation to prepare these posts. Follow me on Twitter and tell me something if you like what I write, that helps a lot :)