SHADER / WebGL2 · GLSL ES 3.00 · TypeScript

Shader Surface Explorer

Compare four real-time GLSL fields, from warped noise to geometric interference.

LIVE SURFACE / 01

Change the field. Read the surface.

STUDIO / SHADER-SURFACE

The canvas is ready
when you are.

Nothing runs in the background. Open the preview to start the experiment.

CONTROL SURFACE / 08

Parameters

The four models use different GLSL equations. Time rate, field scale, palette and quality apply across all models. Detail changes fBM octave count for Organic Flow, Aurora and Topographic Contours; Interference uses paired periodic waves and does not consume noise octaves. Warp / angle affects the domain warp, ribbon profile or relative wave angle depending on model. Pointer and arrow keys perturb the field origin. Home recenters it.

Surface model

Select a distinct mathematical field rendered in GLSL.

Time rate

Scales shader time; zero holds the current static field.

Field scale

Changes the coordinate scale sampled by every model.

Field detail

Bounds the fBM octave count used by Organic Flow, Aurora and Topographic models.

Warp / angle

Controls domain warp, ribbon shape, or relative angle across models.

Material palette

Maps field values to a restrained three-stop material ramp.

Render quality

Changes backing-store resolution and shader work budget.

Reduce motionStop continuous time and draw a stable field; parameter and pointer changes still redraw.

One preview frame at a time · no camera, microphone, storage, or external demo URLs.

FIELD NOTES / WEBGL2

One fragment per pixel. Four different fields.

GPU, DOM and Canvas 2D

The DOM is strongest for semantic content, layout and a small number of independently interactive elements. Canvas 2D offers immediate drawing with JavaScript-managed geometry. WebGL2 sends geometry and uniforms to a GPU program that computes pixel color in parallel. This experiment draws a fullscreen triangle; it does not create a mesh or simulate a physical liquid.

Vertex and fragment stages

The vertex shader places three vertices at clip-space corners. The rasterizer covers the viewport and invokes the fragment shader for covered pixels. The vertex stage is intentionally minimal; the visual work happens per fragment in GLSL ES 3.00.

UV coordinates and uniforms

gl_FragCoord is converted into normalized screen coordinates and corrected for canvas aspect ratio. Uniforms carry resolution, elapsed shader time, field scale, model, palette, detail, distortion and pointer position. They are a compact CPU-to-GPU interface; no pixel readback or per-frame buffer upload is used.

Organic Flow: warped fBM

A smooth value-noise function is summed over a bounded number of octaves. Each octave doubles spatial frequency and halves amplitude; this is fractional Brownian motion (fBM), a useful layered texture model. Slowly changing sine offsets warp the domain before noise is sampled, producing an organic moving field without solving fluid equations.

Aurora Field: shaped ribbons

Four wave bands bend across the field. Their distance from the fragment drives a soft exponential ridge, and height and low-frequency noise modulate intensity. This is a controlled glow approximation inside the shader, not a post-processing bloom pass or atmospheric simulation.

Topographic Contours: isolines

A scalar terrain field combines fBM and a broad sine component. Multiplying by contour density and wrapping the fractional part creates repeated level sets. GLSL fwidth estimates the local change of that value across neighboring fragments; smoothstep uses it to soften each line at the display scale and reduce jagged edges.

Interference: periodic superposition

Two oriented periodic fields are evaluated at each coordinate and combined through a cosine. Their spatial frequencies and relative angle create moiré-like bands. Quality does not increase its octave count; render resolution still changes sampling density. The field is static when time rate is zero and avoids rapidly alternating frames.

Pixels, quality and cost

The canvas uses a maximum two-million-pixel backing store and caps device pixel ratio at 2. Low, Balanced and High use up to 0.5×, 0.75× and 2× CSS density respectively, subject to that shared pixel budget. Fragment work scales with rendered pixels; the noise detail setting bounds the loop at two through six octaves. These are allocation and shader-work limits, not frame-time guarantees.

Frame scheduling and GPU trade-offs

Only the active preview schedules requestAnimationFrame, and only while time changes. Each frame updates uniforms and draws three vertices; it does not read GPU pixels. Parameter changes draw one new frame, and zero speed or reduced motion schedules no continuing loop. Resolution scaling trades detail for fragment count without claiming a measured speedup on unknown devices.

Context loss and resource ownership

The runtime owns its WebGL program, vertex array and buffer. It stops frame scheduling on webglcontextlost and issues no GL calls until restoration. On webglcontextrestored it recompiles resources and reapplies validated current parameters. Preview close removes listeners and deletes owned resources when the context is available.

Progressive enhancement and accessibility

Browsers without WebGL2 receive an explicitly labeled Canvas 2D study and the same host controls; the message identifies that it is not the GLSL renderer. The canvas has a concise accessible description, arrow keys move the same normalized interaction point as pointer input, and Home centers it. Reduced motion holds shader time while preserving deliberate parameter and pointer updates. Shader texture itself has no semantic data; the model notes explain the field without relying on color or animation.

Where it fits

Shader fields can support abstract hero art, subtle ambient surfaces, data-independent transitions, and material explorations where content remains in the DOM. Avoid them for essential text, precise charts, information that must be read by assistive technology, or devices where a GPU-heavy effect has not been profiled. Keep a static or DOM explanation available and respect reduced-motion preferences.

SOURCE / LICENSE

Original implementation · MIT · no external assets

View source