[SOLVED] EffectComposer + Layers

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

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?

8 Likes

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

glow

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

BackOfGlow

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

I believe I was able to achieve what you needed:

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

glow2

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);
}
3 Likes

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

3 Likes

I drink it as if my life depended on it!

8 Likes

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

1 Like

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?

2 Likes

@TheJim01

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 :slight_smile:

Just in case, reference about layers:

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

1 Like

I should’ve found it myself before asking here :smiley:

There’s a WestLangley solution to every problem. :smile:

4 Likes

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

Thanks very much。

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

image

http://jsfiddle.net/br9s142o/

1 Like

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

Thanks,

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

Examples with that approach:

2 Likes

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?

Maybe it’s because of those parameters:

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