threejs-postprocessing
Screen-space visual effects pipeline with bloom, depth-of-field, anti-aliasing, and custom shader composition.
- EffectComposer chains multiple rendering passes (bloom, SSAO, DOF, film grain, vignette, color grading) in sequence, with each pass reading the previous output
- Supports 15+ built-in effects including UnrealBloom, BokehPass (depth-of-field), FXAA/SMAA anti-aliasing, OutlinePass, and GlitchPass
- Custom ShaderPass enables writing fragment shaders for effects like chromatic aberration, wave distortion, and color inversion
- Selective bloom via layer masking applies glow only to tagged objects; multi-composer rendering combines separate effect chains for foreground and background layers
- Performance-critical: each pass adds a full-screen render, so disable unused effects, reduce resolution for blur passes, and profile GPU usage on mobile
Three.js Post-Processing
Quick Start
import * as THREE from "three";
import { EffectComposer } from "three/addons/postprocessing/EffectComposer.js";
import { RenderPass } from "three/addons/postprocessing/RenderPass.js";
import { UnrealBloomPass } from "three/addons/postprocessing/UnrealBloomPass.js";
// Setup composer
const composer = new EffectComposer(renderer);
// Render scene
const renderPass = new RenderPass(scene, camera);
composer.addPass(renderPass);
// Add bloom
const bloomPass = new UnrealBloomPass(
More from cloudai-x/threejs-skills
threejs-animation
Three.js animation - keyframe animation, skeletal animation, morph targets, animation mixing. Use when animating objects, playing GLTF animations, creating procedural motion, or blending animations.
5.3Kthreejs-fundamentals
Three.js scene setup, cameras, renderer, Object3D hierarchy, coordinate systems. Use when setting up 3D scenes, creating cameras, configuring renderers, managing object hierarchies, or working with transforms.
4.3Kthreejs-shaders
Three.js shaders - GLSL, ShaderMaterial, uniforms, custom effects. Use when creating custom visual effects, modifying vertices, writing fragment shaders, or extending built-in materials.
3.6Kthreejs-geometry
Three.js geometry creation - built-in shapes, BufferGeometry, custom geometry, instancing. Use when creating 3D shapes, working with vertices, building custom meshes, or optimizing with instanced rendering.
3.5Kthreejs-interaction
Three.js interaction - raycasting, controls, mouse/touch input, object selection. Use when handling user input, implementing click detection, adding camera controls, or creating interactive 3D experiences.
3.3Kthreejs-materials
Three.js materials - PBR, basic, phong, shader materials, material properties. Use when styling meshes, working with textures, creating custom shaders, or optimizing material performance.
3.2K