Material
ChannelSplitMaterial
RGB channels drift apart
ChannelSplitMaterial takes the red, green and blue values of every pixel in your
text and lets them drift apart. You have seen the effect on an old CRT, on a worn VHS tape, and
in the coloured fringe where a projector’s light meets a wall. Green stays put; red and blue
slide away from it in opposite directions along an axis you choose.
Construction #
ChannelSplitMaterial extends Material, so
everything on a material, from uniforms to update(), works here
too. Construct it with no arguments and set uniforms afterwards.
import { ChannelSplitMaterial } from "blotter.ts/materials";
const material = new ChannelSplitMaterial();
material.uniforms.uOffset.value = 0.05;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.
uOffset
type "1f", a single float default 0.05
How far the red and blue channels travel from the green one, along the axis set by uRotation.
Value
A float from 0.0 to 1.0, as a fraction of the text’s total height, padding and line height included.
The blur behind this effect has an internal 200-pixel cap, so on a 400-pixel-tall text an offset of 1.0 renders as 0.5 would.
uRotation
type "1f", a single float default 45
The angle, in degrees, along which the channels split.
Value
A float from 0.0 to 360.0.
uApplyBlur
type "1f", a single float default 1
A switch. When on, a motion blur is drawn across the distance set by uOffset, so the channels smear into one another rather than sitting as three clean copies. Softer, ghostlier.
Value
A float used as a boolean: 0.0 for off, 1.0 for on.
uAnimateNoise
type "1f", a single float default 1
The blur samples the channels through a little noise, partly for speed and partly because it looks right. When this switch is on, that noise animates and the smear crackles like static.
Value
A float used as a boolean: 0.0 for off, 1.0 for on. Only matters while uApplyBlur is on.