Threejs Postprocessing

This is your go-to when you need post-processing effects in Three.js. It covers EffectComposer setup and the full pipeline: bloom, selective bloom, depth of field, SSAO, anti-aliasing (both FXAA and SMAA), film grain, vignette, outlines, and more. The examples are practical, like how to do bloom on specific objects only or how to properly handle window resizing so your effects don't break. One thing to note: the post-processing pipeline adds render overhead, so you'll want to be selective about which effects you stack. Good reference for both common effects and the weirder stuff like halftone or glitch passes.

skills.sh installs: 17.6K
GitHub stars: 4.1K
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add cloudai-x/threejs-skills --skill threejs-postprocessing --agent claude-code

Installs into .claude/skills of the current project.

Files

Three.js Post-Processing

Targets three.js r186. Examples use WebGLRenderer; the WebGPU and TSL section uses WebGPURenderer.

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";
import { OutputPass } from "three/addons/postprocessing/OutputPass.js";

const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.1, 100);
camera.position.set(0, 0, 5);

// A bright emissive sphere gives bloom something to pick up
const mesh = new THREE.Mesh(
  new THREE.SphereGeometry(1, 32, 16),
  new THREE.MeshStandardMaterial({ color: 0x222222, emissive: 0xffffff, emissiveIntensity: 2 }),
);
scene.add(mesh);

SKILL.md on GitHub