We conceived of a wearable interactive character made out of iridescent goo. The character becomes one with the user’s face, blinking when the user blinks and belching bubbles when the user opens their mouth.

We used a technique called ray marching to help us achieve this look. Ray marching is similar to ray tracing, wherein a ray is cast from the camera towards the geometry you’d like to render. We start at the camera, and move along the ray in tiny steps until we hit the thing we’re trying to render.

The scene itself is defined by what are known as 'signed distance fields.' One way to think about these is to imagine a gradient in 3-D, kind of like a cloud with soft edges. Part of the challenge of working this way is that you’re doing all your modeling entirely in the shader. The tools at our disposal are essentially just math for primitive shapes, and operations to join them together.

First, the ray marching algorithm is run to create the distance field.

Once we have the distance information, we can calculate normals for use in lighting calculations.

With the normals in hand, we can shade and light the blobs. This is also where we calculate the refractive ‘gooey’ look.

The ray marched geo is drawn into a separate texture and blended with past frames. This is used for the camera displacement effect.

We also render a texture where the main bubbles are grey and the mouth bubble is white. This is used in the next pass to composite the mouth bubble over everything else.

Finally, the eyes are composited on top, and vignette and color correction are applied. A magenta LUT and some chromatic aberration finish the effect. Ta-da!

Credits

Coming soon!