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.

    Note that in a renderer using layout: 'absolute' the canvas extends renderer.overscanPx beyond the viewport on both ends, so "canvas space" is larger than the viewport.

    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.

      • offsetY: number = 0

        Distance in CSS px that the canvas top sits above the viewport top (the overscan band in absolute layout). 0 in fixed layout.

      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