Glowing Item Looking through Wall : Selective bloom

Questions
, ,
1

I was trying to create the Bloom using Unreal Bloom and I moved the glowing Items to layer 1 and rest are at default layer.

Bloom is working as I want, but those item can be seen through the wall
image
image

this is what I am doing to set layers for children

image
image780Ă—180 25.8 KB

here is my render loop, please ignore the commented line I was trying different method
image

Here is the Working Demo : Selective-Bloom - CodeSandbox

Thank-you
SeeOn

2

You can refer to this example of selective blooming.

3

Yes, I have referred to that, but I have a scene which add new model to scene … so it that case I have to add and remove mesh from global state based on adding and deleting of new models.

But I do have that in consideration and most probably end up there if I don’t find any other solution.

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
5

ps

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

// âś… will also glow
const mesh = new THREE.Mesh(
  geometry,
  new THREE.MeshBasicMaterial({
    toneMapped: false,
    color: new THREE.Color(10, 0, 0)
  })
)
6

The solution you provided works better, but it fails if it mesh color is white or close to white.

image
image952Ă—563 38.8 KB

The floor also glow, which I don’t want it to happen and it is close to white color

7

it won’t matter if the color is white, if threshold is 1 and everything’s correctly configured nothing at all can have glow, only materials that go into HD range. there’s something that must be off. did you set srgb? the webglrendertarget? is threshold 1? emissive on the floor 0 or <=1 ?

example with white meshes: bloom hdr workflow (forked) - CodeSandbox

8

Thankyou @drcmda it worked like a charm. It was completely my mistake, I missed to set toneMapped, and now it works.
Now have to fix color … it’s not what I was expecting it’s due to gammaCorrectionShader… maybe playing with exposure would give the result I want … on to next mission. Thank you again.