Implementing Common Post-Processing Techniques (Bloom, Depth of Field, and More) | Chapter 8: Beyond the Basics: Shaders and Post-Processing | Three.js for Creators: A Beginner's Guide to 3D Web Experiences

You've learned the fundamentals of Three.js, built some exciting 3D scenes, and now it's time to elevate your creations to the next level. This section dives into the world of post-processing, a powerful technique that allows you to apply visual filters and effects to your entire rendered scene, much like photo editing for your 3D worlds. We'll explore how to implement common post-processing effects like Bloom, Depth of Field, and more, transforming static renders into dynamic and visually rich experiences.

Understanding Post-Processing in Three.js

Post-processing in Three.js typically involves rendering your scene to an offscreen buffer (a WebGLRenderTarget) and then rendering that buffer to the screen using a shader. This shader can then apply various effects. The EffectComposer in Three.js simplifies this process significantly, managing the render targets and applying effects in a chain.

import { WebGLRenderer, Scene, PerspectiveCamera } from 'three';
import { EffectComposer } from 'three/examples/jsm/postprocessing/EffectComposer.js';
import { RenderPass } from 'three/examples/jsm/postprocessing/RenderPass.js';

// ... setup renderer, scene, camera ...

const composer = new EffectComposer(renderer);
composer.addPass(new RenderPass(scene, camera));

// Add your post-processing passes here...

function animate() {
  requestAnimationFrame(animate);
  composer.render();
}

The EffectComposer takes your renderer, scene, and camera. We first add a RenderPass, which is the essential step of rendering your actual scene to an intermediate texture. After that, you can chain other post-processing passes.

Implementing Bloom

Bloom is a visual effect that simulates the way bright light can scatter and glow in real-world photography. It makes bright areas of your scene appear to 'bleed' light into surrounding darker areas, adding a sense of ethereal glow. In Three.js, this is often achieved by rendering bright pixels to a separate texture and then blurring and compositing them back onto the original image.

import { BloomPass } from 'three/examples/jsm/postprocessing/BloomPass.js';

// ... after RenderPass ...

const bloomPass = new BloomPass(1); // Adjust intensity as needed
composer.addPass(bloomPass);

The BloomPass has a few configurable properties, most notably the strength (or intensity) of the bloom effect. Experiment with this value to find the right look for your scene.

Implementing Depth of Field (DoF)

Depth of Field simulates the effect of a camera lens, where objects at a certain distance from the focal plane are in sharp focus, while objects closer or farther away become progressively blurred. This is a great way to guide the viewer's eye and add realism.

import { DepthOfFieldEffect } from 'three/examples/jsm/postprocessing/DepthOfFieldEffect.js';
import { EffectPass } from 'three/examples/jsm/postprocessing/EffectPass.js';

// ... after RenderPass ...

const dofEffect = new DepthOfFieldEffect(camera, { focalLength: 0.1, bokehScale: 1 });
const dofPass = new EffectPass(camera, dofEffect);
composer.addPass(dofPass);

The DepthOfFieldEffect requires the camera and takes an options object. Key parameters include focalLength (how close the focal plane is) and bokehScale (controls the size of the out-of-focus blur highlights). You'll likely need to adjust these values based on your scene's scale and camera setup. Note that DoF often requires additional passes for blurring, which the EffectPass handles internally.

Other Common Post-Processing Effects

Three.js offers a variety of other post-processing effects that can dramatically change the mood and style of your scenes. Some popular ones include:

GammaCorrectionPass: Ensures that colors are displayed correctly by compensating for how monitors render colors. Essential for accurate color representation.

import { GammaCorrectionPass } from 'three/examples/jsm/postprocessing/GammaCorrectionPass.js';

// ...

composer.addPass(new GammaCorrectionPass());

SSAOPass (Screen Space Ambient Occlusion): Adds subtle shadows in crevices and corners, enhancing the sense of depth and realism by simulating how ambient light is blocked by nearby geometry.

import { SSAOPass } from 'three/examples/jsm/postprocessing/SSAOPass.js';

// ...

const ssaoPass = new SSAOPass(scene, camera);
ssaoPass.uniforms['bias'].value = 0.05;
ssaoPass.uniforms['radius'].value = 0.1;
ssaoPass.uniforms['intensity'].value = 3;
composer.addPass(ssaoPass);

DotScreenPass: Simulates the effect of printing dots, often seen in old newspapers or screen prints.

import { DotScreenPass } from 'three/examples/jsm/postprocessing/DotScreenPass.js';

// ...

composer.addPass(new DotScreenPass(new Vector2(800, 600), 1, 0)); // Adjust size and density

GlitchPass: Creates a digital glitch effect, perfect for futuristic or retro-futuristic aesthetics.

import { GlitchPass } from 'three/examples/jsm/postprocessing/GlitchPass.js';

// ...

composer.addPass(new GlitchPass());

Combining and Ordering Passes

The order in which you add post-processing passes is crucial, as each pass typically operates on the output of the previous one. For example, you'll usually want to render your scene first, then apply effects like SSAO or Bloom, and finally, apply a pass like GammaCorrectionPass at the very end to ensure correct color display. Experiment with different combinations and orders to achieve unique visual styles.

graph TD;
    A[Render Scene] --> B(Post-Processing Pass 1);
    B --> C(Post-Processing Pass 2);
    C --> D(Final Output);
    subgraph Effects
        B;
        C;
    end

By mastering post-processing techniques, you gain a powerful toolkit to enhance the visual appeal of your Three.js creations, transforming them from simple 3D models into captivating and immersive experiences.

import { WebGLRenderer, Scene, PerspectiveCamera } from 'three'; import { EffectComposer } from 'three/examples/jsm/postprocessing/EffectComposer.js'; import { RenderPass } from 'three/examples/jsm/postprocessing/RenderPass.js'; // ... setup renderer, scene, camera ... const composer = new EffectComposer(renderer); composer.addPass(new RenderPass(scene, camera)); // Add your post-processing passes here... function animate() { requestAnimationFrame(animate); composer.render(); }

import { BloomPass } from 'three/examples/jsm/postprocessing/BloomPass.js'; // ... after RenderPass ... const bloomPass = new BloomPass(1); // Adjust intensity as needed composer.addPass(bloomPass);

import { DepthOfFieldEffect } from 'three/examples/jsm/postprocessing/DepthOfFieldEffect.js'; import { EffectPass } from 'three/examples/jsm/postprocessing/EffectPass.js'; // ... after RenderPass ... const dofEffect = new DepthOfFieldEffect(camera, { focalLength: 0.1, bokehScale: 1 }); const dofPass = new EffectPass(camera, dofEffect); composer.addPass(dofPass);

import { SSAOPass } from 'three/examples/jsm/postprocessing/SSAOPass.js'; // ... const ssaoPass = new SSAOPass(scene, camera); ssaoPass.uniforms['bias'].value = 0.05; ssaoPass.uniforms['radius'].value = 0.1; ssaoPass.uniforms['intensity'].value = 3; composer.addPass(ssaoPass);