WebGPU & TSL
Three.js now supports WebGPU.
With TSL, writing shaders is easier, and the same shader works with both WebGL and WebGPU.
- 21 lessons
- 23 hours of video
- 2 chapters
- 13 projects
New course
What is TSL?
TSL stands for Three.js Shading Language. It's an easier way to write shaders that work both with WebGPU and WebGL.
00:00/00:00
- Just JavaScript Shaders written in JavaScript, connected as nodes. They drop straight into the project you already have.
- WebGL & WebGPU The same shader compiles to WGSL (WebGPU) or GLSL (WebGL), depending on what the visitor's browser supports. Your GLSL knowledge still applies; only the syntax changes.
- Reuse & enhance The node system lets you enhance built-in materials instead of rewriting them, and reuse pieces of a shader anywhere in your code.
- Stable & future-proof Years in development and already running in plenty of projects. Built to keep evolving, so what you learn now stays worth knowing.
Same output. A lot less code.
We used to write complex GLSL and try not to break the material's default behavior.
Now a few lines are enough to enhance it.
Before: GLSL
14 lines
const material = new THREE.ShaderMaterial({
vertexShader: `
varying vec2 vUv;
void main() {
vUv = uv;
gl_Position = projectionMatrix *
modelViewMatrix * vec4(position, 1.0);
}`,
fragmentShader: `
varying vec2 vUv;
void main() {
gl_FragColor = vec4(vUv.x, vUv.y, 0.0, 1.0);
}`
})
After: TSL
2 lines
const material = new MeshBasicNodeMaterial()
material.colorNode = vec3(uv(), 0)
Before: GLSL
19 lines
const material = new THREE.ShaderMaterial({
vertexShader: `
varying vec3 vNormal;
varying vec3 vViewDirection;
void main() {
vNormal = normalize(normalMatrix * normal);
vec4 mvPosition = modelViewMatrix * vec4(position, 1.0);
vViewDirection = normalize(- mvPosition.xyz);
gl_Position = projectionMatrix * mvPosition;
}`,
fragmentShader: `
varying vec3 vNormal;
varying vec3 vViewDirection;
void main() {
float fresnel = pow(
1.0 - dot(vNormal, vViewDirection), 3.0);
gl_FragColor = vec4(vec3(fresnel), 1.0);
}`
})
After: TSL
4 lines
const material = new MeshBasicNodeMaterial()
const fresnel = dot(positionViewDirection, normalView)
.oneMinus().pow(3)
material.colorNode = vec3(fresnel)
Before: GLSL
16 lines
const material = new THREE.ShaderMaterial({
uniforms: { uTime: { value: 0 } },
vertexShader: `
uniform float uTime;
void main() {
vec4 worldPosition =
modelMatrix * vec4(position, 1.0);
float wave = sin(uTime + worldPosition.y) * 0.15;
vec3 newPosition = position + normal * wave;
gl_Position = projectionMatrix *
modelViewMatrix * vec4(newPosition, 1.0);
}`
})
// In the render loop
material.uniforms.uTime.value = timer.getElapsed()
After: TSL
4 lines
const material = new MeshBasicNodeMaterial()
const wave = time.add(positionWorld.y).sin().mul(0.15)
material.positionNode =
positionLocal.add(normalLocal.mul(wave))
Output
21 lessons in 2 chapters
Chapter 01
Fundamentals
The vocabulary: 8 lessons of short practical exercises.
Chapter 02
Advanced Projects
13 projects, where the knowledge consolidates and where the fun is.
One course, two ways in
One-time payment, access for life, whichever one you pick.
Already know Three.js?
WebGPU & TSL Course
Only this course
$45
VAT incl.
- 21 lessons
- 23 hours of video
- WebGPU & TSL Course
- Three.js Course
Already have Three.js Course?
Log in to unlock member pricing
New to Three.js?
Three.js Journey Bundle
WebGPU & TSL Course + Three.js Course
$120
$140
VAT incl.
- 87 lessons
- 116 hours of video
- WebGPU & TSL Course
- Three.js Course
What makes this course different
There's a lot of Three.js and TSL content out there. This is what you get here.
- A quiz every lesson Check you actually understood, not just watched.
- Public certificate Shareable proof that you can write TSL code.
- Members-only Discord Channels with people building the same things.
- Access for life One payment. Come back whenever you want.
- Free future updates Kept current, at no extra charge.
Frequently Asked Questions
-
No. The Shaders chapter is the only real prerequisite. If you have been through it, you are ready to start.
-
Not at all. Most techniques carry over, and understanding what is underneath is exactly what lets you spot the mistakes the abstraction layer hides.
-
They are rebuilt in TSL and pushed further than the originals, with new features, new tricks, and the compute-driven parts GLSL made too painful.
-
TSL falls back to the WebGL backend automatically. You write it once, and support is already broad.
-
Yes. The add-on has its own quizzes and its own certificate of completion, next to your Three.js Journey one.
-
It is stable now. Many projects rely on it and big changes are not expected, and the lessons are kept up to date as Three.js releases land.
Write shaders the easy way
Only $45 for 24 hours of WebGPU and TSL
on Trustpilot
Already have Three.js Course? Log in to unlock member pricing
