VFX-JS
    Preparing search index...

    Type Alias EffectContext

    Context passed to each Effect lifecycle hook.
    Fields are updated each frame automatically.

    type EffectContext = {
        time: number;
        deltaTime: number;
        pixelRatio: number;
        resolution: readonly [number, number];
        mouse: readonly [number, number];
        mouseViewport: readonly [number, number];
        intersection: number;
        enterTime: number;
        leaveTime: number;
        src: EffectTexture;
        target: EffectRenderTarget | null;
        uniforms: Readonly<Record<string, EffectUniformValue>>;
        vfxProps: EffectVFXProps;
        dims: EffectDims;
        quad: EffectQuad;
        gl: WebGL2RenderingContext;
        createRenderTarget(opts?: EffectRenderTargetOpts): EffectRenderTarget;
        wrapTexture(
            source: EffectTextureSource,
            opts?: {
                size?: readonly [number, number];
                autoUpdate?: boolean;
                wrap?:
                    | EffectTextureWrap
                    | readonly [EffectTextureWrap, EffectTextureWrap];
                filter?: EffectTextureFilter;
            },
        ): EffectTexture;
        draw(opts: EffectDrawOpts): void;
        onContextRestored(cb: () => void): () => void;
    }
    Index

    Properties

    time deltaTime pixelRatio resolution mouse mouseViewport intersection enterTime leaveTime src target uniforms vfxProps dims quad gl

    Methods

    createRenderTarget wrapTexture draw onContextRestored

    Properties

    time: number
    deltaTime: number
    pixelRatio: number
    resolution: readonly [number, number]

    Canvas resolution, physical px.

    mouse: readonly [number, number]

    Mouse position on the element (element-local, bottom-left origin).

    mouseViewport: readonly [number, number]

    Mouse position on the canvas (canvas-local, bottom-left origin).

    intersection: number
    enterTime: number
    leaveTime: number
    src: EffectTexture

    Element capture texture (read-only input for the first stage).

    target: EffectRenderTarget | null

    Destination assigned to this stage. null means the canvas.

    uniforms: Readonly<Record<string, EffectUniformValue>>

    User-defined uniforms from VFXProps.uniforms
    Values are re-evaluated every frame efore update().
    Built-in uniforms (time etc) are exposed as top-level ctx fields instead.

    vfxProps: EffectVFXProps
    dims: EffectDims

    Per-stage layout snapshot — same shape as Effect.outputRect's
    dims argument. Fresh in update and render; in init it
    holds placeholder values until the first frame resolves.

    quad: EffectQuad

    Default fullscreen quad (NDC -1..1), mapped to the target's viewport.

    gl: WebGL2RenderingContext

    Raw WebGL2 context, for low-level operations
    (DataTexture upload, extensions, MRT, etc).

    Resources allocated here are the caller's responsibility: free in
    dispose(), rebuild in onContextRestored(cb).

    Methods

    • Wrap an externally-produced texture for use as a uniform.

      Each call allocates a new GPU texture (no caching), so call this
      once in init() and reuse the result across frames.

      • DOM sources: dimensions are read automatically, and the texture
        is restored after WebGL context loss.
      • WebGLTexture: you must pass opts.size, and you must re-wrap
        the texture yourself from onContextRestored(cb).

      autoUpdate defaults to true for HTMLVideoElement,
      HTMLCanvasElement, and OffscreenCanvas, and false for
      everything else.

      Parameters

      Returns EffectTexture

    • Subscribe to webglcontextrestored to rebuild resources allocated
      via raw ctx.gl. High-level API resources (createRenderTarget,
      wrapTexture, EffectGeometry) are restored automatically.

      Returns an unsubscribe function; auto-unsubscribed on dispose.

      Parameters

      • cb: () => void

      Returns () => void

    Settings

    Member Visibility

    On This Page

    Properties
    Methods