Three.js WebGPU & TSL Skills for AI Coding Agents

Implementation ≠ acceptance

The matrix is built. Evidence still has veto power.

All 39 primary targets are loadable from canonical source. Acceptance is a separate runtime claim: only the non-rendering router suite is accepted today; 37 native-WebGPU surfaces remain explicitly pending current-adapter capture, timing, lifecycle, and visual review.

canonical27skill-owned labs built from native source

support7focused integrations and mechanism benches

startup contracts494167 scenarios · 217 mechanisms · 110 tiers

preserved47secondary records, none counted as primary proof

rendererr185.1exact Three.js revision across the matrix

toolchain8.1.3Vite · Playwright 1.61.1

Source implementation39 / 39

Browser entry, fixed route, local build, capture wiring, canonical source hash.

Accepted runtime evidence2 / 39

No GPU timing, lifecycle, or visual claim is promoted without current-adapter evidence.

2 accepted non-rendering suite 37 native evidence runs pending Inspect the versioned registry

Five systems. Five ownership stress tests.

The flagships are where individually correct algorithms must share world units, temporal state, signals, render submissions, and final-image ownership without quietly duplicating expensive work.

Final image systems

Final Image Flight

Camera and motion state feed one shared signal graph for shadows, honest material-context AO, emissive bloom, exposure, grading, and final output.

6 mechanisms3 locked tiersEvidence pending

Planetary environment

Weathered World

Planet, atmosphere, clouds, oceans, bounded water, precipitation, vegetation, and shadows share units, weather, and one HDR composition.

6 mechanisms3 locked tiersEvidence pending

Authored procedural world

Procedural District

One causal field drives terrain, zoning, wear, wetness, and placement while geometry, buildings, materials, AO, and shadows keep strict ownership.

6 mechanisms3 locked tiersEvidence pending

Actors and environment

Creature Habitat

Creatures, vegetation, local water, weather, camera, shadows, and outline effects exchange contact signals without rewriting static spawn state.

5 mechanisms3 locked tiersEvidence pending

Relativistic cinematic

Relativistic Space Shot

Curved-ray HDR, analytic motion, pooled effects, shared emissive bloom, exposure, camera jitter, and temporal history converge under one owner graph.

6 mechanisms3 locked tiersEvidence pending

The complete primary lab matrix

Every card is a distinct published base route generated from the canonical source revision. “Evidence pending” means the implementation exists and loads, but its v2 runtime bundle has not yet earned acceptance.

Canonical skill labs

One native implementation surface per rendering skill, plus the non-rendering router and explicit fallback harness.

27 routes

Explicit WebGPU Fallback Teaching Harness

Three.js Compatibility Fallbacks

7 scenarios · 6 mechanisms · 0 tiers Preview capture pendingdebugging-contract-lab Canonical labAccepted

Three.js Debugging Decision Lab

Three.js Debugging

7 scenarios · 5 mechanisms · 0 tiers

Node Selective Bloom

Bloom

6 scenarios · 6 mechanisms · 4 tiers

Skill Router Manifest Lab

Three.js WebGPU/TSL Choose Skills

16 scenarios · 8 mechanisms · 0 tiers

Semantic Mesh Writer

Procedural Geometry

6 scenarios · 6 mechanisms · 3 tiers

Native WebGPU Structured Ash Growth

Procedural Vegetation

6 scenarios · 4 mechanisms · 3 tiers

TSL Curved Ray

Black Holes and Space Effects

6 scenarios · 6 mechanisms · 4 tiers

TSL Procedural PBR

Procedural Materials

6 scenarios · 6 mechanisms · 3 tiers

WebGPU Bounded Water

Water Optics

1 scenarios · 6 mechanisms · 4 tiers

Native WebGPU Cached Clipmap Shadow Lab

Scalable Real-Time Shadows

9 scenarios · 9 mechanisms · 3 tiers

WebGPU Camera Rig

Camera Controls And Rigs

1 scenarios · 6 mechanisms · 3 tiers

Native WebGPU Dense Grass

Procedural Vegetation

7 scenarios · 3 mechanisms · 4 tiers

WebGPU Exposure Color Pipeline

Exposure And Color Grading

5 scenarios · 6 mechanisms · 3 tiers

WebGPU FFT Ocean

Spectral Ocean

1 scenarios · 6 mechanisms · 4 tiers

WebGPU Field Bake

Procedural Fields

6 scenarios · 6 mechanisms · 3 tiers

WebGPU Image Pipeline

Image Pipeline

1 scenarios · 6 mechanisms · 3 tiers

Native WebGPU LUT Atmosphere

Sky, Atmosphere, and Haze

6 scenarios · 6 mechanisms · 3 tiers

WebGPU Material Slot Compiler

Procedural Buildings and Cities

6 scenarios · 6 mechanisms · 3 tiers

WebGPU Node GTAO

Ambient Contact Shading

7 scenarios · 6 mechanisms · 3 tiers

WebGPU Pooled Effects

Particles, Trails, and Effects

7 scenarios · 7 mechanisms · 3 tiers

WebGPU Procedural Creature Lab

Procedural Creatures

7 scenarios · 7 mechanisms · 3 tiers

WebGPU Procedural Timelines

Procedural Motion Systems

3 scenarios · 6 mechanisms · 3 tiers

Native WebGPU Quadtree Planet

Procedural Planets

7 scenarios · 7 mechanisms · 3 tiers

WebGPU Rain Snow And Wet Surfaces

Rain, Snow, and Wet Surfaces

1 scenarios · 6 mechanisms · 3 tiers

WebGPU Touch History Frost

Dynamic Surface Effects

1 scenarios · 6 mechanisms · 3 tiers

Native WebGPU validation harness

Visual Validation

8 scenarios · 6 mechanisms · 5 tiers

Native WebGPU Weather Volume Clouds

Volumetric Clouds

4 scenarios · 7 mechanisms · 4 tiers

Cross-skill flagships

The five ownership-critical scenes where independent systems must compose without duplicate render, signal, tone-map, or output owners.

5 routes

Final Image Flight

Image Pipeline

1 scenarios · 6 mechanisms · 3 tiers

Weathered World

Image Pipeline

1 scenarios · 6 mechanisms · 3 tiers

Procedural District

Image Pipeline

1 scenarios · 6 mechanisms · 3 tiers

Creature Habitat

Image Pipeline

1 scenarios · 5 mechanisms · 3 tiers

Relativistic Space Shot

Image Pipeline

1 scenarios · 6 mechanisms · 3 tiers

Focused integrations and benches

Five focused integration hosts and two mechanism benches that prove temporal, AO, vegetation, precipitation, and shadow composition.

7 routes

Image Pipeline and Material-context AO Integration

Ambient Contact Shading

2 scenarios · 3 mechanisms · 3 tiers

Integration Precipitation Image Pipeline

Rain, Snow, and Wet Surfaces

2 scenarios · 4 mechanisms · 3 tiers

Integration Temporal Surface

Dynamic Surface Effects

2 scenarios · 5 mechanisms · 3 tiers

WebGPU Directional Shadow Architecture Bench

Scalable Real-Time Shadows

4 scenarios · 4 mechanisms · 1 tiers

WebGPU Cached Shadow Pipeline Integration

Scalable Real-Time Shadows

1 scenarios · 3 mechanisms · 1 tiers

WebGPU Temporal History

Image Pipeline

1 scenarios · 1 mechanisms · 1 tiers

Host-Owned Planet, Terrain, Dense Grass, and Ash Integration

Procedural Vegetation

2 scenarios · 3 mechanisms · 3 tiers

The 26-skill expert system

Each skill owns a bounded technical domain. Cards report implementation surface and evidence separately, so substantial source work is visible without laundering it into a runtime claim.

Planning and Validation

Route requests to the right experts, diagnose version-dependent failures, and prove results with reproducible evidence.

01Accepted evidence

Three.js WebGPU/TSL Choose Skills

Choose the smallest expert skill set and the correct rendering architecture for general-purpose Three.js WebGPU/TSL work: scientific visualization, product/configurator scenes, architecture, cinematic art, digital twins, dense data scenes, and procedural worlds. Use when a request spans geometry, fields, materials, simulation, cross-skill physics coupling, scale, temporal effects, shared passes, final-image treatment, or sustained low-end/mobile performance.

1 primary · 8 mechanisms · 0 tiers 02Accepted evidence

Three.js Debugging

Diagnose unexpected Three.js runtime, rendering, API, asset, and version-dependent behavior. Use when observed output disagrees with expected behavior, installed source, types, documentation, or examples; when a regression or known upstream issue may exist; when a project is behind and a later fix may justify upgrading; or when choosing among an application fix, dependency upgrade, bounded workaround, upstream report, and blocker. Do not use for ordinary scene design without a concrete failure, suspicious behavior, or audit request.

1 primary · 5 mechanisms · 0 tiers 03Native evidence pending

Visual Validation

Validate advanced Three.js WebGPU/TSL scenes with falsifiable visual contracts, mechanism diagnostics, sustained CPU/GPU timing, refresh-derived budgets, quality-governor traces, tile-GPU resource models, visual-error metrics, leak loops, and stable JSON+PNG evidence.

1 primary · 6 mechanisms · 5 tiers 04Native evidence pending

Three.js Compatibility Fallbacks

Use only for teaching how to apply fallback when WebGPU is unavailable after the user explicitly requests it. Never activate for canonical WebGPU/TSL work, low-end tuning, mobile optimization, capability preflight, or general target support.

1 primary · 6 mechanisms · 0 tiers

Cameras, Lighting, and Final Image

Who owns depth, tone mapping, and the last pass — the difference between a demo and an image.

05Native evidence pending

Camera Controls And Rigs

Build general-purpose Three.js WebGPU/TSL camera systems for product inspection, architecture, scientific visualization, geospatial scenes, and authored cinematography. Use for bounds-derived framing, perspective and orthographic projection, controls/shot ownership, temporal jitter, camera-relative coordinates, large-world precision, constraints, and lifecycle restoration.

1 primary · 6 mechanisms · 3 tiers 06Native evidence pending

Scalable Real-Time Shadows

Design scalable directional cast shadows for Three.js r185 WebGPU/TSL scenes. Use for bounded shadow projections, cascades, tiled array shadows, cached clipmaps, stable texel snapping, filter/bias footprints, cache invalidation, caster parity, binding pressure, and sustained mobile budgets.

3 primary · 16 mechanisms · 5 tiers 07Native evidence pending

Ambient Contact Shading

Design and implement ambient visibility in Three.js r185 WebGPU/TSL, including the forward-lighting placement cost, GTAO input/reconstruction choices, temporal gates, mobile bandwidth, and optional bent normals.

2 primary · 9 mechanisms · 6 tiers 08Native evidence pending

Bloom

Design workload-selected bloom in Three.js r185 WebGPU/TSL, choosing physical HDR scene bloom versus selective MRT contribution, with exact BloomNode pyramid costs, transparent blending rules, PSF limits, and mobile/tile-GPU gates.

1 primary · 6 mechanisms · 4 tiers 09Native evidence pending

Exposure And Color Grading

Build a workload-selected WebGPU/TSL exposure and grading path in Three.js. Use for fixed, sampled, reduced, or histogram luminance metering; GPU-resident EV adaptation; explicit tone-map/output ownership; and domain-correct lut3D grading chosen from measured scene and target requirements.

1 primary · 6 mechanisms · 3 tiers 10Native evidence pending

Image Pipeline

Build a minimal, workload-selected WebGPU/TSL final-image pipeline for advanced Three.js scenes. Use for RenderPipeline ownership; conditional pass()/mrt() depth, normal, albedo, emissive, velocity, and history signals; GTAONode, BloomNode, TRAANode, exposure, tone mapping, 3D LUT grading, outputColorTransform, diagnostics, and measured quality/performance tradeoffs.

7 primary · 36 mechanisms · 19 tiers

Worlds and Environments

Skies, oceans, weather, and water that share causes instead of fighting each other.

11Native evidence pending

Sky, Atmosphere, and Haze

Implement physically coherent sky, atmosphere, and haze in Three.js r185 native WebGPU/TSL using unit-consistent scattering LUTs, depth-aware aerial perspective, ellipsoid-aware geometry, explicit invalidation, and measured pipeline evidence.

1 primary · 6 mechanisms · 3 tiers 12Native evidence pending

Volumetric Clouds

Implement workload-selected volumetric cloud systems in Three.js r185 with WebGPURenderer, TSL, NodeMaterial, node RenderPipeline passes, compute/storage textures, temporal reprojection, cloud shadows, and error-bounded quality tiers.

1 primary · 7 mechanisms · 4 tiers 13Native evidence pending

Spectral Ocean

Build broad-band offshore procedural oceans in Three.js r185 WebGPU/TSL using dimensioned directional spectra, compute FFT cascades, StorageTexture ping-pongs, exact spectral derivatives, displaced-surface Jacobians, transported foam, water optics, CPU query bounds, falsifiable GPU evidence, and phase-resolved or phase-averaged handoff to a separate bathymetry-aware coastal owner.

1 primary · 6 mechanisms · 4 tiers 14Native evidence pending

Water Optics

Build workload-selected analytic, bounded, and coastal water in Three.js r185 WebGPU/TSL. Use for generated archipelagos and shorelines, bathymetry-aware shoaling/refraction, mild-slope or shallow-water wet/dry solver selection, sparse active tiles, StorageTexture heightfields, exact displacement and normals, local disturbances, transported foam and wetness, receiver-space caustics, depth-aware refraction, absorption, Fresnel, and offshore/nearshore handoffs.

1 primary · 6 mechanisms · 4 tiers 15Native evidence pending

Rain, Snow, and Wet Surfaces

Build coupled WebGPU/TSL rain, snow, and wet-surface systems in Three.js. Use for compute-driven falling snow, rain streaks, snow accumulation, model snow caps, wet asphalt puddles, procedural or generated ripple normals, splash flipbooks, shared weather envelopes, and surface wetness or coverage transitions.

2 primary · 10 mechanisms · 6 tiers

Procedural Content

Fields, materials, geometry, buildings, planets, vegetation, creatures — authored systems, not noise soup.

16Native evidence pending

Procedural Fields

Build coherent WebGPU/TSL procedural scalar and vector fields for Three.js. Use for local terrain and archipelago support, metric coast distance and frames, coupled elevation and bathymetry, drainage/exposure and placement factors, NodeMaterials, compute bakes, storage textures, planets, wear, biomes, clouds, water masks, displacement, roughness, normals, domain warping, and visuals where many channels derive from shared causes.

1 primary · 6 mechanisms · 3 tiers 17Native evidence pending

Procedural Materials

Author workload-selected WebGPU/TSL procedural materials in Three.js. Use for coupled terrain/coast/seabed response bundles, grass, rock, dry/wet sand and reef identities, NodeMaterial PBR fields, atlas and triplanar filtering, footprint filtering, specular AA, terrain wetness, stylized palette/facet policies, emissive or raymarched fields, per-instance dissolve, derivative normals, and explicit physical-response bundles.

1 primary · 6 mechanisms · 3 tiers 18Native evidence pending

Procedural Geometry

Build workload-selected procedural mesh systems in Three.js r185 WebGPU/TSL. Use for local terrain/coast contour compilation, terraced caps, cliffs, beaches, seabeds, sculpted profiles, oriented branch rings, semantic indexed BufferGeometry writers, explicit material slots, BatchedMesh versus InstancedMesh decisions, typed-array update paths, NodeMaterial surfaces, and projected-error geometry budgets.

1 primary · 6 mechanisms · 3 tiers 19Native evidence pending

Procedural Buildings and Cities

Build authored procedural buildings, facades, cities, and semantic site-asset assemblies in Three.js r185 WebGPU/TSL. Use for massing grammars and for deterministic placement/compilation of supplied or separately generated ruin, dock, boat, rock, vegetation, and prop families; anchors, sockets, exclusions, exposed-edge analysis, profiles, ornaments, material-slot BatchedMesh or merged BufferGeometry, stable IDs, NodeMaterial identities, spatial paging, LOD, and asset-manifest validation.

1 primary · 6 mechanisms · 3 tiers 20Native evidence pending

Procedural Planets

Author scalable procedural planetary bodies in Three.js r185 native WebGPU/TSL with explicit cube-sphere/clipmap selection, conservative error-driven LOD, balanced transitions, shared causal fields, validated normals, instanced/indirect submission, and explicit atmosphere handoff.

1 primary · 7 mechanisms · 3 tiers 21Native evidence pending

Procedural Vegetation

Generate authored procedural trees, grass, and vegetation in Three.js r185 with WebGPURenderer, TSL, and NodeMaterial. Use for terrain/coastal ecology, windward/leeward and salt/moisture placement, deterministic chunk-safe populations, species presets, trunks, branches, roots, canopies, leaf cards, trellises, rooted wind, optional compute/storage, chunked LOD and impostors, and vegetation diagnostics.

3 primary · 10 mechanisms · 10 tiers 22Native evidence pending

Procedural Creatures

Build workload-selected procedural and generated creatures in Three.js r185 WebGPU/TSL. Use for spec-driven bodies, semantic rigs, field-extracted skinned reference meshes, diagnostic SDF shells, procedural gait/hop/flight/swim locomotion, support-relative foot planting, 2-bone IK, verlet appendages, repeated populations, deterministic creature labs, and genetic variation. Not for imported glTF skinned-clip pipelines.

1 primary · 7 mechanisms · 3 tiers

Motion and Effects

Kinematics, particles, surface history, and spacetime — motion with frame-rate-independent discipline.

23Native evidence pending

Procedural Motion Systems

Build representation-selected procedural motion systems in Three.js WebGPU/TSL. Use for launch kinematics, gravity turns, staging, spin docking, target-frame decomposition, spring-follow motion, rotating-frame alignment, analytic transform timelines, frame-rate-independent response, storage/instanced animation, and quaternion control.

1 primary · 6 mechanisms · 3 tiers 24Native evidence pending

Particles, Trails, and Effects

Author workload-selected WebGPU/TSL particles, trails, and real-time effects in Three.js. Use for flow-conforming shells and wakes, reentry plasma, instanced sparks, timed dissolves, GPU particle pools, deterministic compaction, and conditional scene-relative HDR emission signals.

1 primary · 7 mechanisms · 3 tiers 25Native evidence pending

Dynamic Surface Effects

Build dynamic screen-space surface effects in Three.js r185 WebGPU/TSL. Use for StorageTexture touch-history ping-pong, dt-correct frost/thaw masks, reduced-resolution node blur, static crystalline structure targets, and two-scale TSL normal refraction.

2 primary · 11 mechanisms · 6 tiers 26Native evidence pending

Black Holes and Space Effects

Build WebGPU/TSL black holes, wormholes, accretion disks, and curved-ray space effects in Three.js. Use for black-hole lensing, accretion disks, wormholes, curved-ray integration, procedural star fields, relativistic-looking distortion, bounded volumetric structures, and GPU effects that need controlled numerical integration.

1 primary · 6 mechanisms · 4 tiers

A validation protocol designed to reject pretty lies.

The schema-v2 contract separates what was authored, derived, measured, and gated; its verdicts cannot collapse missing GPU timing or mechanism proof into an aggregate pass.

numeric provenance

Four labels

Authored · Derived · Measured · Gated. Every normative number names where it came from.

claim verdicts

Four outcomes

PASS · FAIL · INSUFFICIENT_EVIDENCE · NOT_CLAIMED. Silence cannot masquerade as success.

bundle

14 ledgers

Pipeline, timing, resources, bandwidth, errors, lifecycle, mechanisms, and the exact visual contract travel together.

readback

256-byte alignment

Odd-size and padded-row tests prevent valid WebGPU frames from becoming striped or falsely nonblank PNGs.

single-owner graph

One final image path

scene HDR
shared MRT
physical stages
exposure
tone map
output

lifecycle

50–100 cycles

Create, render, resize, switch mode and tier, then dispose—measured repeatedly rather than inferred from one clean frame.

mutations

Failure must fail

Bad stride, duplicate owners, false diagnostics, self-comparison, leaked storage, and missing timestamps are blocking cases.

Install the whole research stack.

The router selects the smallest relevant expert set after installation. Directory presence is never interpreted as runtime proof; the registry remains the public source of coverage truth.

List the pack, then install all top-level skills for your agent.

npx skills@latest add linegel/threejs-complete-set-of-skill --list
npx skills@latest add linegel/threejs-complete-set-of-skill --skill '*'

Open repository ↗

Harness-specific installation recipes 4 targets

skills CLI

Use the open skills installer to list the pack, then install every top-level threejs-* skill folder as one coherent graphics skill pack for your selected agent.

npx skills@latest add linegel/threejs-complete-set-of-skill --list
npx skills@latest add linegel/threejs-complete-set-of-skill --skill '*'

Claude Code

Install through skills CLI, or symlink/copy the skill folders into a personal or project skills directory.

npx skills@latest add linegel/threejs-complete-set-of-skill --skill '*' -a claude-code -g -y
# manual fallback:
git clone https://github.com/linegel/threejs-complete-set-of-skill.git
ln -s "$PWD/threejs-complete-set-of-skill"/threejs-* ~/.claude/skills/

Codex CLI

Install the whole pack through skills CLI when available. For local checkouts, keep AGENTS.md pointed at the repo-local threejs-*/SKILL.md files as the authoritative source.

npx skills@latest add linegel/threejs-complete-set-of-skill --skill '*' -a codex -g -y
# local checkout fallback: read ./threejs-*/SKILL.md when a task matches

Cursor / Gemini / generic agents

Any harness that can read local files works: each skill is a self-contained folder with SKILL.md, references/, agents/, and examples/. The machine-readable index lives at skills.json; a plain-text overview at llms.txt.

git submodule add https://github.com/linegel/threejs-complete-set-of-skill.git skills/threejs
curl -s https://threejs-skills.com/skills.json | jq '.install.source, .skills[].name'
curl -s https://threejs-skills.com/llms.txt

Historical evidence and generated inputs

These frames are preserved diagnostic or asset previews. They are useful inputs and historical context, but none become canonical renderer evidence merely by looking convincing.

Open the preview archive 14 frames

**Ocean input — generated wave seeds**threejs-spectral-ocean · generated-asset preview; not FFT renderer evidence

**Planet input — generated crater field**threejs-procedural-planets · generated-asset preview; not quadtree renderer evidence

**Water input — generated caustics**threejs-water-optics · generated-asset preview; not caustic transport evidence

**Rain input — generated ripple normals**threejs-rain-snow-and-wet-surfaces · generated-asset preview; not dynamic weather evidence

**Cloud input — weather maps**threejs-volumetric-clouds · generated-asset channel preview; not volume-renderer evidence

**Surface input — frost crystals**threejs-dynamic-surface-effects · generated-asset preview; not StorageTexture history evidence

**Material input — lava causes**threejs-procedural-materials · generated-asset preview; not PBR energy or timing evidence

**Vegetation input — meadow density**threejs-procedural-vegetation · generated-asset preview; not placement GPU evidence

**Space input — starfield tiles**threejs-black-holes-and-space-effects · artistic generated-asset preview; not geodesic evidence

**Field input — biome maps**threejs-procedural-fields · generated-asset preview; not compute-bake parity evidence

**Diagnostics mosaic — generated crater field**threejs-visual-validation · generated asset-channel mosaic; not runtime g-buffer evidence

**Diagnostics mosaic — generated weather**threejs-visual-validation · generated-asset channel preview for cloud inputs

**Diagnostics mosaic — generated fields**threejs-visual-validation · generated-asset channel preview for biome inputs

**Generated texture asset contact sheet**deterministic PNG variants shipped under assets/generated-variants/

Preserved secondary surfaces

Concept proxies, generated-asset previews, fixtures, and the legacy reference retain their public URLs and explicit limitations. They contribute exactly zero primary acceptance.

Open the secondary archive 26 published previews