wtc-gl
    Preparing search index...

    Class ScrollImage

    A ScrollScene variant that automatically loads an HTMLImageElement into a GPU texture and exposes it as two additional auto-managed uniforms:

    Uniform Type Description
    u_image sampler2D The image texture.
    u_imageSize vec2 Natural pixel dimensions of the source image.

    If the image has not yet loaded when the constructor runs, both uniforms are updated automatically once the load event fires.

    const imgEl = document.querySelector('img.hero')
    const drawable = new Drawable(gl)
    const scene = new ScrollImage({ gl, element: imgEl, scene: drawable })
    new Mesh(gl, {
      geometry: new Plane(gl, { widthSegments: 30, heightSegments: 22 }),
      program: new Program(gl, {
        vertex: clothVert,
        fragment: clothFrag,
        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_image u_imageSize 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.

    texture: Texture

    The underlying Texture wrapping the source image element.

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

    The sampler2D uniform pointing at the image texture.

    u_imageSize: Uniform

    The vec2 uniform containing the image's natural 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.

    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