Examples

The flagship verve.gl showcase: one declarative ctx.glScene hero — multi-light PBR/IBL under three simultaneous shadow casters (spot + directional + LTC area), a live world-space cross-section that also clips the shadow pass, and click-to-inspect picking — plus a tour linking every GL feature demo.

A full procedural diorama in one island: heightmapped terrain + carved pond, instanced trees/rocks/crystals, a reflective animated water plane, drifting dust motes, three-point lighting + shadows + fog + IBL — all materialized client-side from ~0.25 KB of server-authored parameters (no bulk arrays, no draw commands).

Hydration lifecycle end-to-end: z-bind, z-on-click, forms that work with JS off, and a typed call round-trip.

Client-only signals driven by a timer — start, stop, lap, reset.

Multiple signals and derived state behind plain button exports.

Keyboard events in an island: z-on-keydown, event key reads, modifier state.

Server functions from an island: vote, fetch tallies, re-bind the bars.

Progressive enhancement with actionForm + CSRF — fully working with JavaScript disabled.

Live GFM preview — textarea input round-trips through a server function.

Server-push over SSE: post a message, every connected tab sees it.

A full smooth-scrolled landing page: SplitText hero, scrubbed MotionPath, scrubbed MorphSVG, a pinned snap panel, a zero-wasm Draggable playground, and one FLIP gallery island — the one-stateful-chunk rule end to end.

The control-API counterpart: one island builds a timeline and exposes pause/play/reverse/speed, plus imperative Draggable, Sortable, and FLIP shuffle/counter-scale.

Drag-to-reorder list (FLIP sibling-shift) plus a two-column cross-list board that fires on_reorder / on_enter_group.

Native scrolling with eased visuals, parallax layers, snap decks, and transform pinning.

Interactive force graph with zoom/pan/drag, plus live server-pushed wire deltas over SSE.

Two independent interactive graphs on one page (SVG islands, per-instance state) — plus a canvas2d render path for large graphs, also multi-instance.

Zig-computed scene graph and draw-command stream; JS is a dumb interpreter — WebGPU when available, WebGL2 fallback.

ctx.glScene: orbit camera, lighting, picking, and scroll-scrubbed rotation — WebGPU or WebGL2.

A two-route PBR product viewer built from one ctx.glScene declaration: scroll-scrub turntable here, plain orbit + gentle auto-rotate on the companion page.

Per-submesh shader variants: a full-PBR cube beside a base-color-only cube, one draw stream, no über-shader.

P9 directional shadow map: a cube casts a real depth-mapped shadow (3×3 PCF) onto a floor.

Three-light scene: spot caster (perspective shadow), fill directional, and a colored point accent.

Omnidirectional point-light shadow via a 6-face RGBA8 distance atlas with 3×3 PCF face-select.

Slice 1 capstone: directional + spot + point lights all cast real shadows simultaneously.

Slice 2 capstone: ONE directional caster split into 4 cascades — near-crisp, far-covered, seamless.

Slice 3 capstone: rect area light + soft shadow via Linearly Transformed Cosines (Heitz 2016).

Runtime reflection probe (v0.44): the scene is captured into a cubemap from a fixed point, box-filtered into a roughness mip chain, and bound as the specular IBL — so a near-mirror model reflects the ACTUAL surrounding geometry, not a static studio env.

Linear fog fades a 7×7 cube grid into a blue-grey haze — applied after PBR, before tonemap, on WebGL2 and WebGPU.

Three blend shapes (Bulge/Wave/Twist) driven by a baked clip; runtime button overrides target 0 independently.

GPU-instanced cube fields: non-uniform-scale normals, per-instance frustum culling, multi-submesh materials, and instanced shadow cast+receive — one draw call per slice.

MASK and BLEND quads with doubleSided:true — back-face normals flipped in the shader so both sides are lit.

MASK material with texture-alpha holes and a scroll-driven baseColorA dissolve; click to pick (verve:glpick-cutout).

Image-quality slice 2: 6 selectable tone-mapping operators (Linear→AgX→Uncharted2) plus an optional vignette, on WebGPU or WebGL2.

Slice 3: screen-space ambient occlusion from the depth+normal G-buffer — 16-point hemisphere kernel, blurred into the scene.

Slice 4: screen-space reflections — a fixed 32-step ray-march of the reflected view vector against the G-buffer, with Fresnel.

Slice 5: circle-of-confusion blur from G-buffer depth — sweep the focus band near/far over receding cubes.

Slice 6: weighted-blended OIT — overlapping translucent quads with no depth sort; one MRT pass on WebGPU, two passes on WebGL2.

A rolling wave from 16 phased blend shapes — up to 32 active influences (cap-32).

Combined variant: a rigged bar that also morphs — morph deltas (incl. TANGENT) apply before the skin matrix (glTF order).

vmesh v15 packs 3 LOD levels in one mesh; the runtime picks the level by squared camera distance. HUD shows the active level.

Primitives slice: camera-facing billboard quads — a ~2000-point additive drifting cloud plus a textured disc sprite, with attenuation / additive / freeze controls.

Primitives slice: Line2/LineSegments2 — instanced screen-space quad segments forming an opaque wireframe cube plus an animated translucent trail, with width and world/screen-units controls.

Primitives slice: forward DecalGeometry — a crosshair/ring decal projected onto a lit PBR sphere via gl.decal.projectDecal, with move/grow/shrink controls and live re-projection.

Perspective vs orthographic side by side on the same 7×7 cube grid, plus an orthographic-aware cascaded shadow map demo — each cascade fits a rectangular slab instead of a frustum wedge.

World-space clipping planes slice a cube open to reveal its interior; a linked demo also clips the shadow-map depth pass so clipped geometry casts no shadow.

P7 multi-instance GlScene: a model and a cube-on-floor as two independent GlScene islands on one page, each with its own camera, light, and opposite auto-rotation.

Renders a UV sphere's triangle edges as thin native lines via the standalone variant_wireframe shader — a pure-replace of the shaded surface, three.js material.wireframe parity.

Comptime-baked custom PBR shader: frag_albedo tint gradient + a u_time frag_final scanline pulse, spliced into the PBR über-shader. Live tint buttons swap the uniform via glmat_set with no reload.

Build-time BC7/BC1/BC3 KTX2 encode with capability-priority delivery (BC7 → S3TC → PNG) and a live format HUD; this alpha-cutout scene forces the BC3 path — see gl-material for the BC1 opaque path.

Two same-name islands subscribe to one push channel, each by its own vid — frames route to the right instance (P7).

Nested layouts, ctx.outlet, path params, active links, and a route guard.

Typed server-fn POSTs from WASM with correlated replies via the shared JSON service.

One stateful VizGraph island composed with split-text, staggered, and scroll-triggered declarative entrances — all on one page under the one-stateful-chunk rule.