Selective Bloom ordering puzzle

Questions
, ,
1

Hello,

I’ve been beaten by this issue, after extensively looking for a solution and trying many ways to overcome it I just cannot figure it out…

The end result I’m looking for is the glow to be at the forefront of the scene with the non-bloomed object in the background.

here’s my jsfiddle: Edit fiddle - JSFiddle - Code Playground

has anyone got something up their sleeve?

much appreciated
Jamie

2

Rendering the scene multiple times with different objects is the wrong approach, since you’ll lose control over object sorting; ergo, metaphorically you’re just rendering two layers on top of each other.

If you want selective bloom, I’d recommend writing your own solution that utilizes sRGB color space, so only emissive materials emit bloom.

You’d want several effect passes for this (in order):

  1. Render pass (or copy pass), somewhere to store the current scene in a render-target. You’ll need this (copy of your scene) to feed to the next pass.
  2. Feature generation (strip out everything that has a color value below 1). You’ll now have a render-target with just the “highlights” of your scene.
  3. This pass has one input: the result of the previous iteration, starting with the feature generation pass that solely contains the highlights that are currently in view, then the result of the previous iteration. You’ll want to run this one recursively for about 13 times, in which you split the resolution in half each time. (it’s somewhat what Unity does). Just use bilinear filtering for the least resource intensive option, or go with the h/v-blur shares that THREE provides for higher quality bloom. Make sure to ADD the original input with the output color (additive blending in the same shader preferably).
  4. Blend the final result of the last pass from the previous step with the original scene in step 1.

Now you’ll have full control over which parts should emit bloom and which shouldn’t by simply applying an emissive map to any object or material and playing around with the material’s emissive value.

Edit: There is another thread here with an example on how to solve this using Unreal Bloom: Glowing Item Looking through Wall : Selective bloom

1 Like
3

quoting from the thread that harold linked

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

in essence selection is already inbuilt in the bloom effect, there is nothing you need to do. just set threshold to 1, and every material that goes beyond 0-1 spectrum will glow.

2 Likes
4

Perfect! All worked exactly how I required!

I appreciate the time you took to help! :slight_smile: