Masking WebGL Demos

Showcase of advanced masking effects in WebGL

I wanted to put together an article to showcase various masking techniques and how they can be used in design. I leveraged WebGL and Three.js in building these demos with custom shaders and off-canvas rendering techniques used to achieve the effects. The article contained numerous demos featuring masking.

The Eclipse

The first demo was the eclipse which simulated a corona as the masked moon object with its own mesh animation clipped inside blocks out the glowing sun. There were also numerous gradient masks applied to the mesh effects.

Hands

The next demo involved animated hand models which moved around opening and closing. The hands themselves were masks revealing hexagon particles. We also used the Leap Motion allowing users to control the hand models.

Love & Hate

This demo used letters to mask lines and pixels. The letters were drawn onto an offscreen canvas, animated, and turned into textures that were sent to a custom shader, using it to mask the lines. We then transitioned from one word to another. You can see an isolated version of this demo below.

See the Pen Masking #4: Text by CJ Gammon (@cjgammon) on CodePen.

Globe

This demo simulated a textured sphere fading into a globe with a geometric satellite floating around it. The globe sphere had a number of layers to give it realistic lighting. We then used a simple gradient shader to fade it to transparent.

Dance

This demo transitioned between still frames of dancers. A custom noise shader was used to distort the images when transitioning from one to another.

Tops

This demo sycronized with audio playing in the site, the diamonds rotate around the center. The echos are masked by a rotating shadow from the original and they change frequency based on the audio.

The result was a fun demo that played with scroll effects, audio, and other fun techniques to showcase how masking can be used for visual interest.