wtc-gl
    Preparing search index...

    Class ScrollHTML

    A ScrollScene variant that renders an arbitrary HTMLElement into a GPU texture using the experimental HTML-in-Canvas API and exposes it as two auto-managed uniforms:

    Uniform Type Description
    u_html sampler2D Live texture of the rendered HTML element.
    u_htmlSize vec2 Pixel dimensions of the capture canvas.

    Browser support: requires Chromium with chrome://flags/#canvas-draw-element enabled. The class feature-detects the API; if it is absent the uniforms are registered but the texture is never populated.

    const card = document.querySelector('.card')
    const anchor = document.querySelector('.card-anchor')
    const drawable = new Drawable(gl)
    const scene = new ScrollHTML({ gl, element: anchor, htmlElement: card, scene: drawable })
    new Mesh(gl, {
      geometry: new Plane(gl),
      program: new Program(gl, {
        vertex: vert,
        fragment: frag,
        uniforms: { ...scene.uniforms },
      }),
    }).setParent(drawable)
    renderer.addScene(scene)

    Hierarchy (View Summary)

    Index

    Constructors

    constructor

    Properties

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

    Accessors

    captureCanvas

    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.

    texture: Texture

    The underlying Texture wrapping the HTML capture canvas.

    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_html: Uniform

    The sampler2D uniform pointing at the HTML texture.

    u_htmlSize: Uniform

    The vec2 uniform containing the capture canvas pixel dimensions.

    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.

    Accessors

    • get captureCanvas(): HTMLCanvasElement

      The internal 2D <canvas layoutsubtree> that captures the HTML element. Style or position it to enable pointer events on contained form elements.

      Returns HTMLCanvasElement

    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
    Accessors
    Methods