Recipes

ScrollImage & ScrollHTML

Two extensions of ScrollScene that bridge the DOM and the GPU. ScrollImage uploads any HTMLImageElement as a live texture. ScrollHTML goes further — it captures an arbitrary DOM subtree via the experimental HTML-in-Canvas API and renders it as a texture, keeping the underlying HTML fully interactive.

Scene 1: move your cursor over the image — Scene 3: click into the cloth to fill the form (requires chrome://flags/#canvas-draw-element).

Scene 1 — ScrollImage

Hue Cycling at Cursor

ScrollImage exposes the image as u_image (sampler2D) and u_imageSize (vec2). Here a simple flat quad runs a fragment shader that ripples the hue around the mouse cursor using Rodrigues rotation on the RGB colour vector.

const scene = new ScrollImage({
  gl, element: imgEl, scene: drawable
})

// Add your own mouse uniform
scene.uniforms.u_mouse = new Uniform({
  name: 'u_mouse',
  value: [0.5, 0.5],
  kind: 'float_vec2'
})

Scene 2 — ScrollImage

Verlet Cloth

The top row of cloth particles is pinned; gravity and a time-varying wind force drive the rest. Constraint resolution runs on the CPU each frame, then positions are written back to the geometry via needsUpdate. Scroll to inject inertia — click and drag to grab.

scene.onBeforeRender = (delta) => {
  sim.step(delta, scene.u_time.value)
  sim.writePositions(posAttr.data)
  posAttr.needsUpdate = true
}

Name

Message

Scene 3 — ScrollHTML

HTML as a Cloth Texture

ScrollHTML moves the target element into an internal <canvas layoutsubtree>, captures each frame with drawElementImage(), and feeds the result into the same verlet cloth as Scene 2 — but now the texture is live HTML. The canvas is placed over the panel so the form is still interactive.

const scene = new ScrollHTML({
  gl,
  element: panelEl,   // positional anchor
  htmlElement: formEl, // captured as texture
  scene: drawable,
  useViewport: false,
  elementSpace: true
})

// u_html and u_htmlSize in scene.uniforms