• Use play() for animation loops

• Use step() for manual time/frame advancement

• Use draw() when time, frame, and history should remain unchanged

play(onPreStep?)

play() starts the animation loop. u_time and u_frame uniforms are updated automatically, and history is kept up to date.

shader.play((time, frame) => {
	shader.updateUniforms({ u_speed: Math.sin(time) });
});

Use it when:

• You want to animate the shader over time
• You don’t need manual control over timing
• You’re rendering a single shader or a straightforward rendering pipeline

step(options?)

step() advances exactly one frame, and renders without triggering an ongoing animation loop. u_time and u_frame uniforms are updated automatically, and history is kept up to date.

shader.step({ skipHistory: true });

Use it when:

• You want deterministic manual control over the animation frame
• You are building a chained pipeline, and/or another loop owns timing
• Inputs change infrequently, or you want fine control over frame rate

draw(options?)

draw() renders without updating u_time, u_frame, or history.

shader.draw({ skipClear: true });

Use it when:

• You want to redraw the last frame without updating time, frame, or history
• You want a lightweight “no-frills” render pass
• The output should not count as a new animation step

Pause, Reset, Destroy

• pause() stops the animation loop started by play() and preserves ShaderPad time/frame state
• rewind() resets the clock and frame counter
• clearHistory() clears output and texture history buffers without changing time/frame state or the current output
• reset() rewinds the clock and frame counter, and also clears history buffers
• destroy() stops everything and releases WebGL resources and event listeners