Website powered by
Elias Ayberk
VFX Artist
Home
Resume

Distortion Shield

This was one of the most interesting projects—I had a blast working on it.
While originally designed as a distortion shield, the shader can be easily adapted for other use cases, such as sound waves or a bubble shield.

In the breakdown below, I showcase a much simplified version of the original shader. The underlying math is fairly straightforward; what really sets it apart is how it’s applied. The small details and final polish play a crucial role in bringing the effect to life.

The core part of the hit effect uses a sphere mask in world space to create a gradient from the hit point, with a controllable radius.

The core part of the hit effect uses a sphere mask in world space to create a gradient from the hit point, with a controllable radius.

Then multiply the mask by a frequency value and feed it into a sine function to create the ripple effect.

Then multiply the mask by a frequency value and feed it into a sine function to create the ripple effect.

And to get it to move, simply add the time node before the sine function.

And to get it to move, simply add the time node before the sine function.

To get rid of the flashing at the end of each wave, a simple and efficient trick is multiplying it by the original mask.

To get rid of the flashing at the end of each wave, a simple and efficient trick is multiplying it by the original mask.

So far we used it on the emissive just to visualize the values, but the real use is to drive vertex animation with it.

So far we used it on the emissive just to visualize the values, but the real use is to drive vertex animation with it.

I wanted it a bit smoother, so I divided it by two and then subtracted it, as shown here.

I wanted it a bit smoother, so I divided it by two and then subtracted it, as shown here.

Now it’s time to make it visible: I distorted the scene behind it by adding the ripple value to the screen position and plugging it into the scene color UV. I also added a Fresnel to get a slight edge distortion.

Now it’s time to make it visible: I distorted the scene behind it by adding the ripple value to the screen position and plugging it into the scene color UV.
I also added a Fresnel to get a slight edge distortion.

And to make the ripples more noticeable, I added another Fresnel. The real effect shows when multiple hits happen at the same time.

And to make the ripples more noticeable, I added another Fresnel. The real effect shows when multiple hits happen at the same time.

By smooth stepping the ripple, we get ring shapes that pair well with the ripples.

By smooth stepping the ripple, we get ring shapes that pair well with the ripples.

Finally, to smooth the fade-out, we multiply it once more by the sphere mask. To support multiple simultaneous hits, simply repeat this setup—just be sure to wrap it in a material function, or things will get messy pretty quickly.

Finally, to smooth the fade-out, we multiply it once more by the sphere mask.
To support multiple simultaneous hits, simply repeat this setup—just be sure to wrap it in a material function, or things will get messy pretty quickly.

Report