Full-stack-skills 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

Pipeline	Skill
Classic composer + passes	threejs-postprocessing
Renderer output color/tone only	threejs-renderers
Node/TSL post nodes	threejs-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)

Docs section	Representative links
Postprocessing	https://threejs.org/docs/EffectComposer.html
Postprocessing	https://threejs.org/docs/RenderPass.html
Postprocessing	https://threejs.org/docs/UnrealBloomPass.html
Shaders (addon modules)	https://threejs.org/docs/module-CopyShader.html

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