Class TinyShade

canvas

device

frameCounter

addAtomicCompute

• addAtomicCompute(
      name: string,
      wgsl: string,
      bufferSize: number,
      deps?: string[],
  ): this

  Adds a compute pass optimized for atomic operations (e.g., histograms, particle counters).

  Parameters

  • name: string
  • wgsl: string
  • bufferSize: number
  • Optionaldeps: string[]

  Returns this

addAudio

• addAudio(plugin: IAudioPlugin): this

  Connects an audio plugin to synchronize uniforms with audio data.

  Parameters

  • plugin: IAudioPlugin

  Returns this

addCommon

• addCommon(wgsl: string): this

  Adds WGSL code that will be prepended to all subsequent pass shaders. Useful for shared structs and constants.

  Parameters

  • wgsl: string

  Returns this

addCompute

• addCompute(name: string, wgsl: string, size?: number, deps?: string[]): this

  Adds a GPGPU compute pass.

  Parameters

  • name: string

    Used to reference this pass result in others.

  • wgsl: string

    Compute shader code. Use '##WORKGROUP_SIZE' for auto-optimization.

  • size: number = 0

    Optional size for a storage buffer (array).

  • Optionaldeps: string[]

    List of pass names to read from.

  Returns this

addPass

• addPass(name: string, wgsl: string, deps?: string[]): this

  Adds a full-screen fragment pass. This automatically manages two textures for feedback loops (ping-ponging).

  Parameters

  • name: string

    Name of the texture variable in WGSL.

  • wgsl: string

    Fragment shader code.

  • Optionaldeps: string[]

    List of pass names to read from.

  Returns this

addSequencer

• addSequencer(sequencer: TSSequencer): this

  Attaches a sequencer to the engine to drive sceneId, progress, and flags.

  Parameters

  • sequencer: TSSequencer

  Returns this

addTexture

• addTexture(
      name: string,
      src: string | HTMLCanvasElement | HTMLImageElement,
  ): Promise<TinyShade>

  Loads an image into a global texture accessible by all passes.

  Parameters

  • name: string

    Name of the variable in WGSL (e.g., 'var tex: texture_2d').

  • src: string | HTMLCanvasElement | HTMLImageElement

    URL or image element source.

  Returns Promise<TinyShade>

main

• main(wgsl: string, deps?: string[]): Promise<TinyShade>

  The final output pass that renders to the canvas. Calling this triggers the shader compilation process.

  Parameters

  • wgsl: string

    Final fragment shader code.

  • Optionaldeps: string[]

    Pass names to be sampled in the final output.

  Returns Promise<TinyShade>

run

• run(timer?: WebGPUTiming): this

  Starts the render loop.

  Parameters

  • Optionaltimer: WebGPUTiming

    Optional WebGPUTiming plugin for profiling.

  Returns this

setUniforms

• setUniforms(callback?: (layout: UniformLayout) => void): this

  configures the global uniform layout.

  Parameters

  • Optionalcallback: (layout: UniformLayout) => void

    Use this to add custom uniforms via layout.add().

  Returns this

Staticcreate

• create(canvasId: string): Promise<TinyShade>

  Initializes the WebGPU context and creates a TinyShade instance.

  Parameters

  • canvasId: string

    The ID of the HTML canvas element.

  Returns Promise<TinyShade>