recipe-webgl-reveal / Shader / field

Forensic material reveal

Original FORM//GRAPH synthesis · design proposal

A minimal fragment shader mixes source and interpreted images through a pointer-driven noisy mask, turning inspection into the core interaction.

WebGLGLSLPointer

Where it belongs

Best for before/after, source/meaning, garment/detail and archive/restoration stories.

Two textures, pointer, viewport and one noise function are enough; the surrounding explanation stays real HTML.

Production sequence

  1. Align two equal-size images: raw evidence and interpreted layer.
  2. Pass pointer position and viewport dimensions as uniforms.
  3. Build a circular signed-distance mask disturbed by low-cost hash noise.
  4. Mix textures inside the mask and add a one-pixel threshold edge for forensic precision.
  5. On touch use press-and-drag; on reduced motion provide a labeled comparison slider.

Handoff contract

Deliverables
Dependency-free WebGL module + comparison fallback
Proposed runtime budget
Textures dominate; code ≤ 12 KB

This is a production brief, not a downloadable implementation. Budgets are proposed targets; validate them on the intended devices before release.