threejs-postprocessing

name	threejs-postprocessing
description	Three.js post-processing with EffectComposer — RenderPass, UnrealBloomPass, SSAOPass, BokehPass, FilmPass, OutlinePass, FXAA/SMAA anti-aliasing, custom ShaderPass, multi-pass composition, selective bloom, resize handling, and performance. Use when adding bloom, depth-of-field, ambient occlusion, outlines, colour grading, or any screen-space effect to a Three.js scene. Adapted from CloudAI-X/threejs-skills (MIT).
license	MIT
compatibility	Portable reference skill for agents that support markdown skills or prompt files. Works best alongside project Three.js source files and Chrome DevTools GPU profiling.
disable-model-invocation	true
metadata	{"owner":"game-delivery","version":"2.0.0","language":"en-GB","category":"web-rendering","upstream_references":["https://github.com/CloudAI-X/threejs-skills (MIT — see NOTICE.md)"],"tags":["three-js","post-processing","effect-composer","bloom","ssao","depth-of-field","anti-aliasing","outline","shader-pass","screen-space-effects"],"intents":["effect-composition","bloom-setup","ambient-occlusion","depth-of-field","outline-effect","antialiasing-selection","custom-pass-authoring"],"output_types":["code-example","api-reference","pass-chain-plan"]}

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

const composer = new EffectComposer(renderer);
composer.addPass(new RenderPass(scene, camera));
composer.addPass(new UnrealBloomPass(
  new THREE.Vector2(window.innerWidth, window.innerHeight),
  0.5,  // strength
  0.4,  // radius
  0.85, // threshold
));

// Replace renderer.render with composer.render in the loop
function animate() {
  requestAnimationFrame(animate);
  composer.render();
}

---

EffectComposer Setup

import {  }  ;
 {  }      ;


 renderTarget =  .(
  .,
  .,
  {
    : ., 
    : .,
    : .,
    : , 
  }
);

 composer =  (renderer, renderTarget);
composer.( (scene, camera));


 () {
  composer.(., .);
  composer.(.(., ));
}
.(, onResize);