Glowing Item Looking through Wall : Selective bloom

Questions
, ,
4

in my opinion this is using bloom wrong. the official threejs example is very misleading. by using layers and rendering on top you’ll loose depth write. no need to go through all this trouble when bloom can select out of the box without you having to do anything at all. you don’t need layers, copy shaders, double render, clear color. all you need is “emissiveIntensity” on your materials, this is how you control which meshes are glowing.

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))
composer.addPass(new ShaderPass(GammaCorrectionShader))
// Setting threshold to 1 will make sure nothing glows
composer.addPass(new UnrealBloomPass(undefined, 1, 1, 1))

// This mesh will glow because emissive leaves 0-1 range, everything else won't
const mesh = new THREE.Mesh(
  geometry,
  new THREE.MeshStandardMaterial({
    toneMapped: false,
    emissive: "red",
    emissiveIntensity: 10
  })
)

you can see it working here: bloom hdr workflow - CodeSandbox

1 Like