Post-Processing

Lesson 10

Post-processing renders the scene to a texture first, then applies screen-space effects. EffectComposer chains these passes together.

EffectComposer Setup

import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js';
import { RenderPass } from 'three/addons/postprocessing/RenderPass.js';
import { UnrealBloomPass } from 'three/addons/postprocessing/UnrealBloomPass.js';
import { FilmPass } from 'three/addons/postprocessing/FilmPass.js';

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

const bloom = new UnrealBloomPass(
  new THREE.Vector2(innerWidth, innerHeight),
  1.5,  // strength
  0.4,  // radius
  0.85  // threshold
);
composer.addPass(bloom);

const film = new FilmPass(0.35, 0.025, 648, false);
composer.addPass(film);

Replace renderer.render

// Before: renderer.render(scene, camera);
// After:
composer.render();

Resize

window.addEventListener('resize', () => {
  composer.setSize(innerWidth, innerHeight);
  // also update camera and renderer as usual
});

What to Experiment With

  • Add a ShaderPass with a vignette shader (darken edges)
  • Lower bloom threshold to 0.3 to make more surfaces glow
  • Toggle passes: bloomPass.enabled = false