Explosion Shockwave VFX

:memo: Source code
:eyes: Step-by-step breakdown gifs

A tiny codepen example of a depth-aware, instantiable explosion with a shockwave - inspired by this guide and how a lot of games use broken UVs to create their VFX.

The effect is created by making the sphere face the camera with one of its poles (since the default UVs are mapped from the top to the bottom of the sphere) on each frame, and applying a scrolling .thicknessMap to it.
Since transmission already takes care of refraction and light bending, there’s no post-processing necessary - the scrolling thickness map visually moves from the centre of the explosion outwards, bending the light on the way :boom:

5 Likes