Shader: Mesh Drift

=== ARCHITECTURE & VISION ===
A full-viewport animated WebGL fragment shader called Mesh Drift: five colours weighted by inverse distance. Five drifting points each carry a colour; every pixel is the inverse-distance-weighted average of all five, so the field changes direction as well as value. The page contains nothing but the canvas. A shared GLSL preamble provides a hashed value noise, a six-octave fbm and a two-level domain-warp helper; this effect draws on them and adds its own body. Pointer movement raises a smoothed intensity uniform so the effect strengthens under the cursor and relaxes when it leaves.

=== STYLE & DIRECTION ARTISTIQUE ===
• description: Generative light on a committed ground. Every colour is computed per pixel from a clock and a coordinate; nothing is sampled from an image.
• prompt: Ground #DCDCD8 with accents ["#F5C7B8", "#C9D8F0"]. There is no typography and no page chrome: the shader is the entire surface. Keep the palette to two or three values so the effect reads as one material rather than a rainbow.

=== STRUCTURE & SECTIONS ===
• description: A single full-viewport canvas, fixed to the viewport, with a hidden fallback panel behind it.
• prompts: [{"part":"Canvas","prompt":"One canvas fixed at inset 0 filling the viewport, with html and body at 100 percent height, margin 0 and overflow hidden. Behind it a hidden panel that is only shown when no WebGL context can be created."},{"part":"The shader","prompt":"Five colours weighted by inverse distance. Five drifting points each carry a colour; every pixel is the inverse-distance-weighted average of all five, so the field changes direction as well as value."}]

=== COMPOSANTS CLÉS ===
• Full-bleed fragment shader with no surrounding page
• Smoothed pointer-intensity uniform
• No-WebGL fallback panel
• Reduced-motion single-frame path

=== NOTES TECHNIQUES ===
Raise the distance to a power above two for definition. At exactly one over distance the field is mush; the exponent is what gives it structure. Build one WebGL program, draw two triangles, and pass resolution, time and an intensity uniform. Cap the drawing buffer below device pixel ratio (this one uses 0.85 to 0.95 of a 1.5x cap) because two-level warping costs about 18 noise samples per pixel. Under prefers-reduced-motion draw exactly one frame and never start the loop. Verification note: readPixels on a live WebGL canvas returns zeros because it reads the back buffer after present, so judge from a rendered screenshot rather than sampled pixels.

Superdesign UI · Texte publié par la source. Les références et réglages peuvent être nécessaires ; le résultat identique n’est pas garanti.