class · blotter.ts
Material
A fragment shader with named uniforms. The plain Material draws text unchanged; subclasses and options make effects.
extends Emitter<MaterialEvents>
import { Material } from "blotter.ts";A material is a Shadertoy-style mainImage function plus the uniforms it reads. Blotter wraps the function in a full fragment shader, declares your uniforms alongside its built-ins (uResolution, uGlobalTime, uTimeDelta, uBlendColor, uPixelRatio), and exposes each uniform as a live UniformInterface.
Construct it with no options for a passthrough, pass mainImage and uniforms for a one-off, or subclass it for an effect you will reuse. The custom materials guide walks through all three.
import { Material } from "blotter.ts";
const material = new Material({
mainImage: `
void mainImage( out vec4 mainImage, in vec2 fragCoord ) {
vec2 uv = fragCoord / uResolution;
uv.x += sin(uv.y * 20.0 + uGlobalTime) * uAmount;
mainImage = textTexture(uv);
}
`,
uniforms: { uAmount: { type: "1f", value: 0.01 } },
});Members #
constructor constructor
Takes an optional MaterialOptions with the shader body and the uniform declarations.
mainImage get / set
The GLSL body: a mainImage(out vec4, in vec2) function that samples the text with textTexture(uv). Assigning a falsy value restores the passthrough. A new value takes effect after the owning Blotter rebuilds.
uniforms get / set
The live uniforms, keyed by name. Reading gives UniformInterfaceMap; assign to a uniform’s value to change the running effect. Assigning a whole new map replaces every uniform and triggers a rebuild. The built-in uniforms always win over user uniforms with the same name.
update method
Notifies observers that the material changed, which makes every Blotter using it rebuild. Setting mainImage or uniforms calls it for you.