wtc-gl
    Preparing search index...

    Class ScrollRenderer

    Renders multiple independent WebGL scenes on a single fixed canvas, each scissor-tested to a DOM element's exact pixel bounds.

    A single requestAnimationFrame loop drives all registered ScrollScene instances. Scenes outside the viewport are skipped automatically via IntersectionObserver. The canvas is cleared to transparent once per frame before the scissored passes run.

    const renderer = new ScrollRenderer()
    Object.assign(renderer.canvas.style, {
      position: 'fixed', inset: '0', width: '100%', height: '100%',
      pointerEvents: 'none', zIndex: '0',
    })
    document.body.appendChild(renderer.canvas)

    const scene = new ScrollScene({ element: document.querySelector('.hero'), scene: drawable })
    renderer.addScene(scene)
    renderer.playing = true

    // In your component:
    const canvasRef = useRef<HTMLCanvasElement>(null)
    useEffect(() => {
      const renderer = new ScrollRenderer({ rendererProps: { canvas: canvasRef.current! } })
      renderer.playing = true
      return () => { renderer.destroy() }  // canvas stays in the DOM; React removes it
    }, [])
    // In JSX:
    <canvas ref={canvasRef} style={{ position: 'fixed', inset: 0, width: '100%', height: '100%', pointerEvents: 'none' }} />
    Index

    Constructors

    constructor

    Properties

    gl onAfterRender onBeforeRender renderer

    Accessors

    canvas playing

    Methods

    addScene destroy removeScene render resize

    Constructors

    Properties

    gl: WTCGLRenderingContext

    The WebGL rendering context.

    onAfterRender: (delta: number) => void

    ScrollRendererOptions.onAfterRender

    onBeforeRender: (delta: number) => void

    ScrollRendererOptions.onBeforeRender

    renderer: Renderer

    The underlying Renderer instance.

    Accessors

    Methods

    • Stops the render loop, removes the resize listener, and destroys all registered scenes (disconnecting their IntersectionObservers).

      When the renderer created its own canvas, the WebGL context is also released immediately (via WEBGL_lose_context) rather than lingering until garbage collection — browsers cap the number of live contexts per page and drop the oldest when the cap is hit. A caller-supplied canvas (via rendererProps.canvas) is left untouched: a canvas can only ever hold one context, so losing it would break callers that keep the element and construct a new ScrollRenderer against it (React StrictMode does exactly this).

      Returns the underlying <canvas> element so callers can remove it from the DOM if they own it. When using a React-managed canvas you don't need the return value — React will remove the element itself on unmount.

      Returns HTMLCanvasElement

      The canvas element.

    • Synchronises the GL canvas buffer size with the layout viewport.

      Uses document.documentElement.clientWidth/clientHeight rather than window.innerWidth/innerHeight because on systems with classic (non-overlay) scrollbars innerWidth includes the scrollbar gutter, while a position:fixed; width:100% canvas does not — causing every scissor rect to clip a few pixels short on the trailing edge.

      Called automatically on construction and on every resize event.

      Returns void

    Settings

    Member Visibility

    On This Page

    Constructors
    Properties
    Accessors
    Methods