Post-processing

• Add RenderPass first and OutputPass last in the EffectComposer chain.
• Set composer.setPixelRatio lower than the renderer for cheaper effect buffers.
• Skip passes with pass.enabled instead of rebuilding the whole chain.

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 size = new THREE.Vector2(
  renderer.domElement.clientWidth,
  renderer.domElement.clientHeight
);

const composer = new EffectComposer(renderer);
composer.setSize(size.x, size.y);

composer.addPass(new RenderPass(scene, camera));

const bloom = new UnrealBloomPass(size, 0.55, 0.4, 0.82);
composer.addPass(bloom);

composer.addPass(new OutputPass());

renderer.setAnimationLoop(function () {
  composer.render();          // 不再直接 renderer.render
});

function resize() {
  const w = renderer.domElement.clientWidth;
  const h = renderer.domElement.clientHeight;

  camera.aspect = w / h;
  camera.updateProjectionMatrix();

  renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
  renderer.setSize(w, h, false);

  composer.setPixelRatio(Math.min(window.devicePixelRatio, 1.5));
  composer.setSize(w, h);
}

window.addEventListener('resize', resize);
resize();

• Without OutputPass the color space is not converted and the final image looks dark.
• MSAA no longer applies once a composer is used, so add SMAAPass or FXAA.