Three.js WebGPU skills for experienced WebGL developers

This pack is a strong fit for experienced Three.js developers moving an existing WebGL codebase toward WebGPURenderer, TSL, and RenderPipeline. It supports the engineering around that move; the migration guides own the complete source-to-target procedures.

Strong fit

• Your repository depends on WebGLRenderer, GLSL ShaderMaterial, WebGL-only extensions, EffectComposer, implicit output conversion, or old readback assumptions.
• You need an agent to inspect the installed revision and move one observable contract at a time instead of replacing renderer names mechanically.
• You can run the old and new paths under fixed scenes, cameras, inputs, browsers, and devices while collecting explicit acceptance evidence.

Poor fit

• You need no-code migration, beginner JavaScript instruction, a turnkey engine, or generic prompt snippets.
• You expect an automatic codemod, complete backward compatibility, or a direct WebGPU equivalent for every WebGL extension.
• You require transparent fallback as the canonical result; compatibility teaching is a separate, explicit branch.

Three recurring jobs

1. Resolve revision, API, and backend disagreements — threejs-debugging. Inspect the resolved package, runtime THREE.REVISION, export map, implementation, renderer initialization, and exact failure before adopting examples or upstream claims.
2. Move material intent from GLSL to TSL — threejs-procedural-materials. Preserve owned inputs, outputs, coordinate spaces, filtering, surface identity, emission, and normal behavior rather than translating shader text line by line.
3. Redesign pass and output ownership — threejs-image-pipeline. Declare scene outputs, histories, pass order, tone mapping, and display conversion; keep exactly one final-output owner and invalidate the graph when that policy changes.

The WebGPURenderer versus WebGLRenderer comparison owns the choice between renderers. The WebGLRenderer to WebGPURenderer and GLSL ShaderMaterial to TSL guides own the migration procedures.

Representative workflow: migrate one material and its post chain

1. Inventory the existing slice: renderer, GLSL material inputs and outputs, extensions, composer passes, depth/camera conventions, readback, color conversion, and target observable.
2. Freeze Three.js 0.185.1/r185, import entrypoints, runtime revision, old renderer, initialized WebGPURenderer backend, browser/GPU, representative scene, fixed camera, viewport, DPR, and acceptance bounds.
3. Establish a no-post material baseline, then move the material contract to TSL. Compare surface identity and channel diagnostics, not source-code similarity.
4. Rebuild the scene pass, required shared signals, and final output under RenderPipeline; add optional effects only after the no-post path is coherent.
5. Capture aligned output and mechanism diagnostics for both paths, plus lifecycle and timing evidence only where the target supports it. Accept the migrated slice when the declared observable passes; record precision, color, resource, performance, or compatibility gaps separately.

Final Image Flight has source-matched accepted evidence for a composed WebGPU graph with explicit renderer, RenderPipeline, MRT, tone-map, and output ownership. It demonstrates a target-state integration, not a before-and-after migration. The debugging contract lab remains useful as a diagnostic contract and demo, but its current source hash differs from the published evidence manifest; withhold current proof until a source-matched bundle is accepted. The WebGPU image-pipeline demo has current accepted evidence for its captured output and signal graph, but it still does not prove this application's migration.

Constraints

Similar final images do not prove equivalent precision, color semantics, resource use, or performance. The installed source and current official migration material remain authoritative.

Start here

Use the installation guide to add the pack to the existing repository, then route one bounded migration slice before changing the rest of the renderer stack.