threejs-postprocessing

When to use this skill

ALWAYS use this skill when the user mentions:

• EffectComposer, RenderPass, stacking passes, resize of composer
• Bloom, SSAO, SSR, DOF, outline, glitch, film grain, TAA—addon pass names
• ShaderPass with shader modules from Addons Shaders group

IMPORTANT: postprocessing vs renderers vs node-tsl

Trigger phrases include:

• "EffectComposer", "RenderPass", "UnrealBloomPass", "SSAOPass", "后期"
• "泛光", "环境光遮蔽", "描边"

How to use this skill

1. Chain — RenderPass → effect passes → output; ensure size matches renderer and DPR changes.
2. Resize — call composer.setSize alongside renderer resize workflows.
3. Half-float — many passes expect appropriate render target types; cite docs for your version.
4. Performance — each pass has cost; profile with renderer.info to check draw calls and triangles.
5. Validate output — render a simple test scene through the composer first to verify passes work before adding complexity.
6. Shader modules — link Addons Shaders list instead of inlining huge GLSL in SKILL.
7. Output — final pass should align color management with renderer (threejs-renderers).
8. Contrast — mention core PostProcessing class separately to avoid name collision confusion.

Example: EffectComposer with bloom and debugging

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';

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

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

// Resize handler — must match renderer size
window.addEventListener('resize', () => {
  renderer.setSize(window.innerWidth, window.innerHeight);
  composer.setSize(window.innerWidth, window.innerHeight);
});

// Render loop: use composer.render() instead of renderer.render()
function animate() {
  composer.render();
}
renderer.setAnimationLoop(animate);

See examples/workflow-composer-bloom.md.

Doc map (official)

Scope

• In scope: Addon postprocessing passes and composer wiring; pointers to shader modules.
• Out of scope: Custom full-screen pipeline design outside three docs; engine-level frame graphs.

Common pitfalls and best practices

• Forgetting composer resize produces smeared or low-res effects.
• Pass order matters—bloom often after main scene pass, outline may need masks.
• Some passes need depth—ensure depth buffer availability per pass docs.

Documentation and version

Addon passes live under Postprocessing and Shaders modules in three.js docs. Pass constructors and required buffers change across versions—link the specific pass page (e.g. UnrealBloomPass) rather than guessing uniform names.

Agent response checklist

When answering under this skill, prefer responses that:

1. Link EffectComposer, RenderPass, or the named pass (SSAOPass, …).
2. Contrast addon composer stack with core PostProcessing + threejs-node-tsl when users mix terms.
3. Require setSize on composer when threejs-renderers resizes.
4. Point to Shaders group for raw shader modules used by ShaderPass.
5. Warn about VR frame-time when stacking heavy passes (threejs-webxr).

References

• https://threejs.org/docs/#Postprocessing
• https://threejs.org/docs/EffectComposer.html
• https://threejs.org/docs/RenderPass.html

Keywords

English: effectcomposer, renderpass, bloom, ssao, ssr, outline, postprocessing, three.js

中文： 后期、EffectComposer、泛光、SSAO、SSR、屏幕空间、three.js