Software developer

This effect consists in distorting the rendered image, which can be used to model phenomena like heat distortion, e.g. around fire and explosions.

It is pretty simple to implement. We first render the particles to a render target, which we’ll use as a mask for the effect since we don’t want to distort the whole image. Then we draw the full scene in another render target, and lastly we render a post-processing pass where we do the distortion effect and compose the final image that is presented to the screen. Three.js’ EffectComposer API is used to do this.

The fragment shader in the post-processing pass takes three textures as input: one with the scene without the distortion effect (screenTex), one with the mask, and a noise texture, which is used to offset the uv values.