Selective Bloom Issues

Questions
,
1

Hi everyone,

I have a program where I have several groups of meshes. I want exactly one of these mesh groups to glow. For that, I am able to target the one mesh in that group that makes up most of its area. I do not really know much about the bloom filter as I was not able to find the code for UnrealBloomPass.

Anyway, after looking at the examples and at forum posts especially by @ drcmda, I have written this code
(stencil buffer is true because I am using a stencil buffer elsewhere in the code)

const renderer = new THREE.WebGLRenderer({antialias:true, stencil:true});
renderer.sortObjects = false;
renderer.setSize( window.innerWidth, window.innerHeight);
renderer.setPixelRatio(window.devicePixelRatio);
renderer.outputEncoding = THREE.sRGBEncoding
renderer.toneMapping = THREE.ACESFilmicToneMapping
...
const renderTarget = new THREE.WebGLRenderTarget(window.innerWidth, window.innerHeight, {
    type: THREE.HalfFloatType,
    format: THREE.RGBAFormat,
    encoding: THREE.sRGBEncoding,
    stencilBuffer:true
  })

renderTarget.samples = 8;
const composer = new EffectComposer( renderer, renderTarget );

composer.addPass(new RenderPass(scene, camera));
composer.addPass(new ShaderPass(GammaCorrectionShader));
composer.addPass(new UnrealBloomPass(	undefined, 6, 8, 1))

The group of meshes is created in its own separate function. There, I have this code after its creation so that one mesh that makes up most of the group is set to the values that should make it glow.

        group.toneMapped = false;
        red_plane_group.children[0].material.color= new THREE.Color(10, 0, 0);

Then, I am using this function to animate everything

function animate(){
    requestAnimationFrame(animate);
    composer.render();
}

So now, I have several questions:

  1. Can I leave out the renderer’s toneMapping? It is included in many examples, but I dislike how it looks.
  2. Currently, every non-red group of meshes is a grey-ish white on every single group when they had more distinctive colors before so that they cannot be told apart and a lot of the recognizable lines have disappeared, even though none of their RGB values should be above 1 and I already set the luminance threshold to 6 so that only the mesh in the group with the RGB value 10 glows. Why is that? Is it working different because I am using groups of meshes instead of single meshes?

Also, the glow works on the group where I wanted it to work although it seems to more a sort of aura around the group rather than directly emanating from it. Also, the glow seems to go out that when I drag the group to the lower part of the screen (which is only visible after everything gets resized when I open the console for debugging but still).

Thanks in advance

2

threejs changed a lot, tonemapping and color correction works different. the code you saw is outdated, although bloom selection, thank goodness, still is the same. you can check three examples to figure out how what you need. colors generally should not change when you use effectcomposer.

also consider GitHub - pmndrs/postprocessing: A post processing library for three.js. instead of jsm.effectcomposer. jsme is very old, and very slow, it can’t keep up any longer and the performance difference in prod is too large. postpros bloom is the same as unrealbloom, do not forget the mipmapBlur setting.

3

You want to set .emissive for glow, not .color.
You’re setting the diffuse color to your 10,0,0
So this will only glow if the scenes lights hit it, which is why you see the effect fade out.

red_plane_group.children[0].material.emissive = new THREE.Color(10, 0, 0);

Here’s an example “in prod”:
https://manthrax.github.io/mcade/

and the effectComposer setup source:

https://manthrax.github.io/mcade/js/cabinet.js

2 Likes
4

color works in my experience with a basic ambientlight, 10, 0, 0 should be a glowing red. if it’s meshbasicmaterial light shouldn’t matter.

1 Like
5

Thank you @drcmda and @manthrax for both of your input.

you can check three examples to figure out how what you need.

In the forums, you mean or where?

also consider GitHub - pmndrs/postprocessing: A post processing library for three.js.

I have followed you advice and tried out that library for a bit. This is my current code. I do not understand where to put the minmapblur setting. What does is do?

const renderer = new THREE.WebGLRenderer({
	powerPreference: "high-performance",
	antialias: true,
	stencil: true,
	depth: false
});
renderer.sortObjects = false;
renderer.setSize( window.innerWidth, window.innerHeight);
renderer.setPixelRatio(window.devicePixelRatio);
renderer.outputEncoding = THREE.sRGBEncoding
renderer.toneMapping = THREE.ACESFilmicToneMapping
...
const composer = new EffectComposer(renderer);
composer.addPass(new RenderPass(scene, camera));

and in the function where that group is created (it is read from SVG and therefore created asynchronously so it has to be there)

        composer.addPass(new EffectPass(camera, new SelectiveBloomEffect(scene, camera, red_plane_group.children[0].material.color)));

and the animate method still looks the same.

Now, there is an error in the postprocessing library in the build folder in index.js:

TypeError: pass.setRenderer is not a function

Apparently setRenderer is deprecated. Is there a way to solve this easily?

And is there a way to stop he whole setup from affecting how the other groups that are not supposed to glow look like?

You want to set .emissive for glow, not .color.

This causes the color to change to bright red that no longer has a glow.

So this will only glow if the scenes lights hit it, which is why you see the effect fade out.

I have both an AmbientLight and a DirectionalLight in my scene. Commenting out one of them did not change that the glow disappeared seemingly at ramdom sometimes (as far as I remember mostly to the sides of the screen).

. if it’s meshbasicmaterial light shouldn’t matter.
The meshes are made of MeshBasicMaterial, yes.

I hope this helps with getting a picture of how the problem is right now.

6

@MEPower what three.js version are you using? The latest version is r166, for example.