LiquidDistortMaterial

LiquidDistortMaterial is the view of the tiles at the bottom of a swimming pool. A slow field of noise washes over the text and bends it, never quite the same way twice. Three uniforms: how fast the water moves, how much it bends the letters, and where in the noise to look when it is standing still.

Construction #

LiquidDistortMaterial extends Material, so everything on a material, from uniforms to update(), works here too. Construct it with no arguments and set uniforms afterwards.

import { LiquidDistortMaterial } from "blotter.ts/materials";

const material = new LiquidDistortMaterial();
material.uniforms.uSpeed.value = 1;

Uniforms #

Each entry in material.uniforms is a live UniformInterface: assign to its value and the running effect changes. Set a value through a text’s render scope to change that text alone.

uSpeed

type "1f", a single float default 1

How fast the distortion moves. While it moves, uSeed has no effect.

Value

Any float, though values under 1.0 read as water rather than weather. It multiplies uGlobalTime; 0.0 stops the animation entirely.

uVolatility

type "1f", a single float default 0.15

How much the noise displaces the letters: the distance between a legible word and an abstract one.

Value

Any float. 1.0 is the amount the material was designed around; going past it is allowed and gets wild quickly.

uSeed

type "1f", a single float default 0.1

Where in the noise field to sample. Animation moves through the field on its own, so this only matters once uSpeed is 0.0 and you want a particular still frame.

Value

Any float.