SKILL.md

threejs-postprocessing

Agent skill fromCloudAI-X/threejs-skills

Three.js post-processing: composer pass chains, built-in renderer effects, and the WebGPU/TSL node pipeline — bloom, depth of field, ambient occlusion, custom screen effects. Use when adding visual effects, color grading, blur, glow, or screen-space shaders, on WebGL or with WebGPU and TSL.

install threejs-postprocessing

# install the threejs-skills pack with the skills CLI

npx skills add CloudAI-X/threejs-skills

# or add only this skill to Claude Code: copy the folder

skills/threejs-postprocessing/

# into

~/.claude/skills/threejs-postprocessing/ (all projects)

.claude/skills/threejs-postprocessing/ (one project)

skills/threejs-postprocessing/SKILL.md

MITFull file

1# Three.js Post-Processing
2 
3Targets three.js r186. Examples use WebGLRenderer; the WebGPU and TSL section uses WebGPURenderer.
4 
5## Quick Start
6 
7```javascript
8import * as THREE from "three";
9import { EffectComposer } from "three/addons/postprocessing/EffectComposer.js";
10import { RenderPass } from "three/addons/postprocessing/RenderPass.js";
11import { UnrealBloomPass } from "three/addons/postprocessing/UnrealBloomPass.js";
12import { OutputPass } from "three/addons/postprocessing/OutputPass.js";
13 
14const renderer = new THREE.WebGLRenderer({ antialias: true });
15renderer.setPixelRatio(window.devicePixelRatio);
16renderer.setSize(window.innerWidth, window.innerHeight);
17document.body.appendChild(renderer.domElement);
18 
19const scene = new THREE.Scene();
20const camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.1, 100);
21camera.position.set(0, 0, 5);
22 
23// A bright emissive sphere gives bloom something to pick up
24const mesh = new THREE.Mesh(
25  new THREE.SphereGeometry(1, 32, 16),
26  new THREE.MeshStandardMaterial({ color: 0x222222, emissive: 0xffffff, emissiveIntensity: 2 }),
27);
28scene.add(mesh);
29 
30// The composer replaces renderer.render(). Render the scene, then effects,
31// then OutputPass last: it applies renderer.toneMapping and outputColorSpace once.
32const composer = new EffectComposer(renderer);
33composer.addPass(new RenderPass(scene, camera));
34const bloomPass = new UnrealBloomPass(new THREE.Vector2(window.innerWidth, window.innerHeight), 1.5, 0.4, 0.85);
35…

Excerpt shown under the repository's MIT license.

How to install threejs-postprocessing

skills/threejs-postprocessing/SKILL.md

More skills in threejs-skills

Newsletter

Join the Community