Three WebGPU Renderer

The Three.js library has recently started to support the experimental WebGPU API. Threejs support is still under heavy development and not all browsers support it.

The WebGPU API offers enhanced performance and more direct access to GPU hardware. WebGPU is intended to be a successor to WebGL and WebGL2 offering more flexible capabilities.

In three.js we can use the WebGPU API by instantiating a THREE.WebGPURenderer instead of a THREE.WebGLRenderer.

When using the THREE.WebGPURenderer, we can also write our code using the new TSL (Three Shader Language) API. This will allow us to create custom shaders using a language more similar to JavaScript, while the transpiled output will be automatically converted to either GLSL or WGSL depending on the capabilities of our browser.

• GLSL is the shading language when using the WebGL or WebGL2 APIs, and is supported by most browsers.
• WGSL is the shading language when using the WebGPU API. WebGPU is newer and experimental, so not all browsers support it yet.

Below is an example of some shader code written using TSL. When the code is transpiled at runtime, your browser will execute either GLSL or WGSL depending on the capabilities of your browser. The TSL transpiler did this automatically.

<>

The above working example is using importmaps and you can view the source.

Below is a script that you can paste into the TypeScript Vite boilerplate that was created in this course.

./src/main.ts

import './style.css'
import * as THREE from 'three/webgpu'
import { positionLocal, Fn, uniform, vec4, vec3, length, float, abs, time, sin, mod } from 'three/tsl'
import { GUI } from 'three/addons/libs/lil-gui.module.min.js'

const scene = new THREE.Scene()

const camera = new THREE.PerspectiveCamera(25, window.innerWidth / window.innerHeight, 0.1, 10)
camera.position.z = 1.5

const renderer = new THREE.WebGPURenderer()
renderer.setSize(window.innerWidth, window.innerHeight)
document.body.appendChild(renderer.domElement)
renderer.setAnimationLoop(animate)

window.addEventListener('resize', function () {
  camera.aspect = window.innerWidth / window.innerHeight
  camera.updateProjectionMatrix()
  renderer.setSize(window.innerWidth, window.innerHeight)
})

const options = {
  zoom: 5,
}

const uZoom = uniform(options.zoom)

const material = new THREE.MeshBasicNodeMaterial()

const circle = Fn(() => {
  let c = vec3().toVar()
  let uv = positionLocal.xy.mul(uZoom)
  let d = length(uv)
  for (let i = 0; i < 3; i++) {
    uv = uv.add(uv.div(d).mul(sin(d.sub(time))))
    c[i] = float(0.01).div(length(mod(uv, 1).sub(0.5)))
  }
  return vec4(c.div(d), 1)
})

material.colorNode = circle()

const mesh = new THREE.Mesh(new THREE.PlaneGeometry(), material)
scene.add(mesh)

const gui = new GUI()
gui.add(options, 'zoom', 1, 100).onChange((value) => {
  uZoom.value = value
})

function animate() {
  renderer.render(scene, camera)
}

To summarize when using a build tool such as vite.

- import * as THREE from 'three'
+ import * as THREE from 'three/webgpu'

- const renderer = new THREE.WebGLRenderer()
+ const renderer = new THREE.WebGPURenderer()

Using TSL is optional and can be imported separately. E.g.,

import { positionLocal, Fn, uniform, vec3, time, sin } from 'three/tsl'

Also note that instead of calling requestAnimationFrame(animate) in an animation loop to continually re-render, you can remove the requestAnimationFrame line and set your chosen animation loop function using the renderers own API.

//..
renderer.setAnimationLoop(animate) // add this line
//..
function animate() {
  // requestAnimationFrame(animate) // delete this line.
  renderer.render(scene, camera)
}

Useful Links

WebGPU API

Three Shader Language