Post-Processing Effects in Three.js

Post-processing in Three.js lets you add visual effects to enhance your scene. Using EffectComposer, you can stack multiple effects for a cinematic feel. Here’s a quick guide to popular effects:

1. Setup: Import EffectComposer, RenderPass, and effect passes:

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

Initialize with:

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

2. Bloom: Adds glow around bright areas.

import { UnrealBloomPass } from 'three/examples/jsm/postprocessing/UnrealBloomPass.js';
const bloomPass = new UnrealBloomPass(new THREE.Vector2(window.innerWidth, window.innerHeight), 1.5, 0.4, 0.85);
composer.addPass(bloomPass);

3. Depth of Field: Blurs background, simulating camera focus.

import { BokehPass } from 'three/examples/jsm/postprocessing/BokehPass.js';
const bokehPass = new BokehPass(scene, camera, { focus: 1.0, aperture: 0.025 });
composer.addPass(bokehPass);

4. Color Correction: Adjust colors for a cinematic look.

import { ColorCorrectionShader } from 'three/examples/jsm/shaders/ColorCorrectionShader.js';
composer.addPass(new ShaderPass(ColorCorrectionShader));

5. Motion Blur: Creates blur on moving objects.

import { GlitchPass } from 'three/examples/jsm/postprocessing/GlitchPass.js';
const glitchPass = new GlitchPass();
composer.addPass(glitchPass);

6. Rendering: Replace renderer.render() with:

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

Tips

• Optimize Performance: Adjust effect intensity and use only essential effects to keep rendering smooth.
• Experiment: Small tweaks can make effects feel natural without overwhelming your scene.