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).

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

      Returns HTMLCanvasElement

      The canvas element.

    • The main render loop — called internally via requestAnimationFrame. Do not call this directly; use the playing setter instead.

      Parameters

      • t: number

        Timestamp provided by requestAnimationFrame.

      Returns void

    • 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