[SOLVED] EffectComposer + Layers

[prisoner849]

Hi, community!
Now it’s my turn to ask for help

I’m trying to achieve the result of glowing from behind of an object.
The idea is to render the glowing object first (using THREE.EffectComposer()) , then to render the usual object (using render). For this purpose I used layers.

All my code is here:
http://jsfiddle.net/prisoner849/mjfckw02/

Possibly (or better to say - obviously), I don’t get how the things work.
So, could you, at least, point me to the right direction with achieving of the desired result?

[marquizzo]

What is the desired result? This is what I’m seeing, and the glow looks pretty nice.

[prisoner849]

@marquizzo
Yes, I see the same
But in front of that glowing red box, there should be a non-glowing box of THREE.MeshLambertMaterial() with the aqua color.

That’s how it looks, if you leave just renderer.render(scene, camera) in the render loop.

[marquizzo]

I believe I was able to achieve what you needed:

http://jsfiddle.net/marquizzo/nfaLovpk/

The trick is in renderer.clearDepth(); between each render pass with renderer.autoClear = false;:

renderer.autoClear = false;
obj.layers.set(0);
objBack.layers.set(1);

function render(){
  requestAnimationFrame(render);
  
  renderer.clear();
  
  camera.layers.set(1);
  composer.render();
  
  renderer.clearDepth();
  camera.layers.set(0);
  renderer.render(scene, camera);
}

[prisoner849]

Yeah, that’s it!
Many thanks for explanation and I owe you beer (if you drink it, of couse)

[marquizzo]

I drink it as if my life depended on it!

[prisoner849]

Better visual effect, if to use objBack.layers.enable(1); instead of objBack.layers.set(1);

[TheJim01]

Clearing the depth buffer makes the aqua box always render on top. Rotate the scene so the aqua box should be “behind” the glowing box to see the effect. Is that the desired effect?

[prisoner849]

@TheJim01

@prisoner849

objBack.layers.enable(1);

That makes the red box visible for both 0 and 1 layers, thus it make the scene look correctly if to rotate it to the angle when the red box should cover the aqua box.
But it’s just an example and in the real app, the scene never be rotated to look at the boxes from behind

Just in case, reference about layers:

How to make objects visible to only one camera in a three.js scene

[TheJim01]

Gotcha, sorry I must have missed your update when typing my reply. Asynchronous systems… who needs 'em!

[prisoner849]

I should’ve found it myself before asking here

Three.js - Geometry on top of another

[marquizzo]

There’s a WestLangley solution to every problem.

[prisoner849]

Indeed
But this does not cancel the fact that you helped me.

[Rui_Ma]

Thanks very much。

[gooodWin67]

I like this glow effect, but why doesn’t blue color work?
all other colors work

[DVOBS]

http://jsfiddle.net/br9s142o/

[mrgoonie]

Hi guys! Is there any solutions to make the bloom effect appear on this edges as well?

Thanks,

[prisoner849]

Sure, use the approach with selective bloom: three.js examples

Examples with that approach:

Totentanz (Selective Bloom)

Hi community! Here is a pic: [Totentanz] And there is a working demo: Based on the example with Selective Bloom. The slight change comes with the idea that instead of swapping materials between current ones and total black, we use a global variable for a uniform that gets 0 or 1 in case of what state of scene we need: render with bloom when unnecessary object must be black (1) or render without darkening (0). That variable sets for all the materials via .onBeforeCompile(). Having that un…

Instancing + selective bloom

Hi community! Nothing special, I just wanted to know how the selective bloom will work with instanced meshes. To be honest, I’m not sure that I chose the correct way in using of .onBeforeCompile(). Criticism and advice are welcomed. Here is a pic [Screenshot_2019-05-12%20Noise%20waves%20of%20instanced%20boxes%20%20%20selective%20bloom] And there is a working demo: You can find a music video from youtube at the bottom right corner of the window. Just for better atmosphere of…

[mrgoonie]

Thank you @prisoner849, I’ve tried that example, worked as expected. But it seems to darken the original material of “non-bloomed” objects as well. Any clues to avoid this?

[prisoner849]

Maybe it’s because of those parameters:

renderer.toneMapping = THREE.ReinhardToneMapping;
renderer.toneMappingExposure = Math.pow(params.exposure, 4.0);