wtc-gl
    Preparing search index...

    Class ScrollScene

    A single WebGL scene anchored to a DOM element inside a ScrollRenderer.

    Each ScrollScene tracks its element's position via getBoundingClientRect() every frame and exposes a set of uniforms that are updated automatically:

    Uniform Type Description
    u_time float Elapsed time (increments by delta * 0.00005 per frame).
    u_resolution vec2 Element size in physical pixels.
    u_origin vec4 .xy — element bottom-left in physical pixels, GL canvas space (Y-up). Use with gl_FragCoord for element-relative fragment math. .zw — element centre in canvas NDC [-1, 1]. Use for vertex positioning when useViewport is false.

    An IntersectionObserver automatically pauses rendering when the element leaves the viewport.

    const drawable = new Drawable(gl)
    const scene = new ScrollScene({ element: document.querySelector('.hero'), scene: drawable })
    new Mesh(gl, { geometry: new Triangle(gl), program }).setParent(drawable)
    renderer.addScene(scene)

    Hierarchy (View Summary)

    Index

    Constructors

    constructor

    Properties

    camera? clearOnRender clipToViewport element elementSpace initializedClass? onAfterRender onBeforeRender scene u_elementSize? u_origin u_resolution u_time uniforms useViewport visible

    Methods

    destroy glRect

    Constructors

    Properties

    camera?: Camera

    Optional camera used when rendering this scene.

    clearOnRender: boolean

    Whether to clear the scissored region before rendering.

    clipToViewport: boolean

    Whether to clip the GL viewport to the element's bounds.

    element: HTMLElement

    The DOM element this scene tracks.

    elementSpace: boolean

    Whether to expose element-space coordinate helpers via u_elementSize.

    initializedClass?: string

    ScrollSceneOptions.initializedClass

    onAfterRender: (delta: number, rect: DOMRect) => void

    ScrollSceneOptions.onAfterRender

    onBeforeRender: (delta: number, rect: DOMRect) => void

    ScrollSceneOptions.onBeforeRender

    scene: Obj

    The scene graph root passed to the renderer each frame.

    u_elementSize?: Uniform

    Element dimensions in canvas NDC units (vec2). Only present when elementSpace: true. Use in a vertex shader to map element-local coordinates to canvas NDC:

    gl_Position = vec4(a_position.xy * u_elementSize + u_origin.zw, a_position.z, 1.0);
    u_origin: Uniform

    Packed origin uniform (vec4):

    • .xy — element bottom-left in physical pixels, GL canvas space (Y-up).
    • .zw — element centre in canvas NDC [-1, 1].
    u_resolution: Uniform

    Element size in physical pixels (vec2).

    u_time: Uniform

    Elapsed time uniform (float). Increments by delta * 0.00005 per frame.

    uniforms: WTCGLUniformArray

    All auto-updated uniforms, ready to spread into a Program's uniforms option.

    useViewport: boolean

    Whether to lock the GL viewport to the element's bounds.

    visible: boolean = true

    Whether the element is currently intersecting the viewport.

    Methods

    • Converts the element's current bounding rect to GL viewport coordinates.

      Parameters

      • canvasHeight: number

        Canvas height in physical pixels (renderer.dimensions.height * dpr).

      • dpr: number

        Device pixel ratio from the renderer.

      Returns { height: number; rect: DOMRect; width: number; x: number; y: number }

      GL-space x, y, width, height (all in physical pixels) plus the raw DOMRect.

    Settings

    Member Visibility

    On This Page

    Constructors
    Properties
    Methods