EffectComposer UnrealBloomPass is ruining my whole render thing

Questions
, , ,
2

that’s usually when near/far is too wide. either try to set them more narrow, or try logarithmicDepthBuffer.

also the final pass, you don’t need that. bloom is selective out of the box, people just use it wrong. the official bloom demo is making something that is so easy seem overly complex. all you need is unrealbloompass with threshold 1, and now you can select on the materials (emissiveIntensity).

see: Selective Bloom not working in react function with vanilla js wrapped in useeffect - #2 by drcmda

THREE.ColorManagement.legacyMode = false
...
renderer.outputEncoding = THREE.sRGBEncoding
renderer.toneMapping = THREE.ACESFilmicToneMapping
...
const target = new THREE.WebGLRenderTarget(width, height, {
  type: THREE.HalfFloatType,
  format: THREE.RGBAFormat,
  encoding: THREE.sRGBEncoding,
})
target.samples = 8
const composer = new EffectComposer(renderer, target)
composer.addPass(new RenderPass(scene, camera))
// Threshold is 1, nothing will glow by default
composer.addPass(new UnrealBloomPass(undefined, 1, 1, 1))

// This mesh will glow
const mesh = new THREE.Mesh(
  geometry,
  new THREE.MeshStandardMaterial({
    toneMapped: false,
    emissive: "red",
    emissiveIntensity: 10
  })
)

// This mesh will also glow, because it goes beyond 0-1 color space
const mesh = new THREE.Mesh(
  geometry,
  new THREE.MeshBasicMaterial({ toneMapped: false, color: new THREE.Color().setRGB(10, 10, 10) })
)
1 Like