Core Render Methods

• play(onPreStep?)
• step(options?)
• draw(options?)
• clear()
• clearHistory()
• pause()
• rewind()
• reset()
• destroy()

Uniform Methods

• initializeUniform(name, type, value, options?)
• updateUniforms(updates, options?)

Texture Methods

• initializeTexture(name, source, options?)
• updateTextures(updates)

Event Methods

• on(name, callback)
• off(name, callback)

Method Details

play(onPreStep?)

play(onPreStep?: (time: number, frame: number) => StepOptions | void): void

play() starts or resumes the animation loop and updates u_time, u_frame, and output history on each frame.

play() Parameters

shader.play((time, frame) => {
	shader.updateUniforms({ u_speed: Math.sin(time) });
	if (frame < 5) {
		return { skipHistory: true };
	}
});

This overlaps with the preStep event, but they are not identical:

• Use the play() callback for simplicity if your app only calls play() once.
• Use the play() callback if the logic only belongs to this specific play() call.
• Use preStep when you want a reusable listener that fires for any play() or step() calls.
• Only the play() callback can return StepOptions to affect the current frame.

step(options?)

step(options?: StepOptions): void

step() advances exactly one frame, updates u_time and u_frame, renders, and writes to history unless disabled.

draw(options?)

draw(options?: StepOptions): void

draw() renders immediately without advancing time, frame, or history.

clear()

clear(): void

clear() clears ShaderPad’s current render target immediately. Use it for advanced manual render flows; it does not advance time, frame, or history.

clearHistory()

clearHistory(): void

clearHistory() clears all output and texture history buffers without clearing the current output or changing ShaderPad time/frame state. Use it when stale feedback, trails, or delayed texture frames should be discarded while playback continues from the same clock and frame.

pause()

pause(): void

pause() stops the animation loop started by play(). Calling play() again resumes from the same ShaderPad time and frame.

rewind()

rewind(): void

rewind() resets ShaderPad time and frame state to 0 without clearing the current output or history buffers.

reset()

reset(): void

reset() rewinds ShaderPad time and frame state, clears the current output, and resets history buffers. Use clearHistory() instead when you only need to discard history.

destroy()

destroy(): void

destroy() stops playback and releases WebGL resources and event listeners.

Render Step Options Reference

step(options?), draw(options?), and the return value from play(onPreStep) all accept the same object shape:

initializeUniform(name, type, value, options?)

initializeUniform(
  name: string,
  type: 'float' | 'int' | 'uint',
  value: number | number[] | (number | number[])[],
  options?: { arrayLength?: number, allowMissing?: boolean },
): void

Registers a shader uniform and seeds it with an initial value.

initializeUniform() Options

updateUniforms(updates, options?)

updateUniforms(
  updates: Record<string, number | number[] | (number | number[])[]>,
  options?: { startIndex?: number, allowMissing?: boolean },
): void

Updates one or more initialized uniforms.

When updating built-in u_time or u_frame, ShaderPad also updates its internal clock or frame counter so the value persists as the baseline for the next step() or play() frame.

updateUniforms() Options

initializeTexture(name, source, options?)

initializeTexture(
  name: string,
  source: TextureSource,
  options?: TextureOptions & { history?: number },
): void

initializeTexture() registers a named texture input. If source is another ShaderPad instance and you omit texture options, the destination texture inherits the source instance’s internal render-texture settings.

Texture Options Reference

updateTextures(updates)

updateTextures(updates: Record<string, UpdateTextureSource>): void

Updates one or more previously initialized textures.