Introduction 00:00

With TSL and WebGPU, Three.js post-processing also got a refresh.

It might sound too early in the chapter to discover such a topic, but I wanted to make the upcoming exercises look good, and there is nothing better than post-processing and a nice bloom for that.

We are going to discover how to set up our project to use post-processing, test a bunch of built-in effects, and create two custom effects: a simple one to get the hang of it, and one more complex and epic.

Setup 02:11

The starter already contains the following:

• The same floor we used in previous lessons
• A model composed of an anvil and a hammer, just to have something on screen
• Some lighting with shadows
• OrbitControls to rotate around
• A SkyMesh to have something to look at in the background
• It’s all being rendered with the WebGPURenderer
• An instance of the Inspector

Tone mapping 02:47

Let’s start with the tone mapping, because yes, tone mapping is considered post-processing, especially with how Three.js now handles rendering.

Don’t worry, it works nearly the same as with the WebGLRenderer.

Change the tone mapping like before, on the renderer:

const renderer = new THREE.WebGPURenderer({
    // ...
})
renderer.toneMapping = THREE.ACESFilmicToneMapping

The render looks a little bit darker and more contrasted.

And like before, we can play with the exposure using the toneMappingExposure property:

renderer.toneMapping = THREE.ACESFilmicToneMapping
renderer.toneMappingExposure = 3

Let’s have a bit of fun and add those two properties to the debug UI.