Three.js / WebGPU
WebGPU for Three.js
WebGPURenderer, TSL and compute shaders. The scene you already have keeps working; what you gain is lower CPU overhead and a GPU you can actually compute on.
- 01Swap the renderer, keep the scene
- 02Compute shaders on the GPU
- 03One material, both backends
- 04Automatic WebGL fallback
Data, compute, render
WebGPU is the rendering API that replaces WebGL in the browser. For Three.js it arrives as WebGPURenderer, and swapping it in leaves the scene graph, cameras, controls and loaders exactly as they were. Built-in materials already work on both.
What is genuinely new is the middle stage. WebGL could only draw; WebGPU can compute, which moves particles, physics and procedural generation onto the GPU instead of through JavaScript every frame.
Data
Vertices, indices, uniforms and textures go to the GPU as structured buffers. Same scene graph, same loaders, same cameras: nothing about how you build a scene changes here.
Compute
The part WebGL never had. Compute shaders run thousands of parallel invocations over those buffers, which is how particle systems, physics and procedural worlds move onto the GPU entirely.
Render
The results feed straight into the render pipeline without a round trip through JavaScript. Lower CPU overhead per draw call is where the frame rate on heavy scenes comes from.
Shaders
TSL: one material, both backends
TSL, the Three.js Shading Language, is a JavaScript node system for materials and compute shaders. It compiles to WGSL for WebGPU and GLSL for WebGL, so a custom effect you write once runs on both backends rather than being rewritten for each.
You do not need it to adopt WebGPURenderer, because built-in materials work out of the box. You need it the moment you want a custom effect that survives the fallback.
What TSL replaces:
- GLSL strings inside ShaderMaterial
- Separate WGSL and GLSL versions of an effect
- Hand-written uniform plumbing
- Guesswork about what the fallback renders
Learn TSL properly
Two routes, depending on how you like to learn: a long-form video course from the person who wrote most of the Three.js material everyone starts with, or the interactive courses here, where you edit the shader and watch it change.
Video course
WebGPU & TSL by Bruno Simon
The Three.js Journey course on WebGPU and TSL: write Three.js shaders in JavaScript, with no GLSL or WGSL needed. It starts by porting a WebGL setup to WebGPU, works through TSL fundamentals and node-based materials, then builds real projects along the way.
- 01 21 lessons, 23+ hours
- 02 Build-along projects
- 03 Assumes some shader knowledge
Interactive courses
Learn TSL here, in the browser
Our own TSL courses run in the page: you edit the node graph and the result recompiles in front of you. Start from zero with the beginner course, then work through the practical volumes building real effects rather than reading theory.
- 01 Live, editable code
- 02 Beginner course from zero
- 03 Two practical volumes
Sponsorship
Support us, grow the community
Three.js Resources is independent and free to use. Take a sponsored slot to help keep it growing, and put your product in front of 200,000+ monthly visitors building 3D on the web.
Get a Sponsor Slot →WebGPU guides
The deep dives: what actually works today, how the migration goes in practice, and how WebGPU compares with WebGL once your scene gets heavy.
WebGPU vs WebGL: Which Should You Use in Three.js?
WebGPU vs WebGL for Three.js projects: what actually changed, browser support today, performance differences, and a clear answer for which renderer to start a new project with.
[02]Three.js WebGPU: WebGPURenderer, TSL & What Works Today
How WebGPU works in Three.js: setting up WebGPURenderer, what TSL is, migrating a custom ShaderMaterial, and what still doesn't work on the WebGPU backend.
F.A.Q
Frequently Asked Questions.
Everything people ask before moving a Three.js project to WebGPU.
Making the move
What changes, and what does not.
No. The scene graph, cameras, controls and loaders are unchanged. What changes is the renderer (WebGLRenderer becomes WebGPURenderer) and, for custom shaders, moving from GLSL ShaderMaterial to TSL node materials. Standard materials like MeshStandardMaterial work with either renderer via their Node equivalents.
WebGPURenderer detects WebGPU support at runtime and falls back to WebGL when it is unavailable, so your app keeps working everywhere WebGL already works. You just do not get the WebGPU-specific performance gains on those browsers.
Performance and shaders
Where the gains actually come from.
It can be, but not automatically. Its lower CPU overhead and compute shader support give it a real advantage in scenes with many draw calls or GPU compute work like particles. For a small scene with a handful of standard materials, the difference is usually negligible.
TSL (Three.js Shading Language) is a JavaScript node system for writing materials and compute shaders that compiles to WGSL for WebGPU and GLSL for WebGL. You do not strictly need custom shaders to use WebGPURenderer, since built-in materials work out of the box, but TSL is how you write custom effects that run on both backends.
Want to write your own WebGPU shaders?
The TSL course covers node materials, compute shaders and post-processing, with live code you can edit.