Postprocessing: CubeTexture background + effects composition + partially transparent foreground 3d objects

[bendxr]

Hi,
Thanks to issue #105 I succeeded in having the background untouched by bloom effect.
My fg scene is made of partially transparent 3d objects (specially a big one at the center), so I'd like to see the bg through them, but partially shaded.
So I did the following passes composition (it's probably very far from optimal but If a change a line, it degrades the final result) :

// render the whole fg scene ; clear = true    
composer.addPass(foregroundPass);
// bloom effect
composer.addPass(bloomPass);
composer.addPass(copyPass);

// Add a mask whose scene is only the big partially transparent fg 3d object
composer.addPass(maskPass);
// tried to render fg at this point to make use of transparency but it failed
// render the bg only in the mask delimited area ; clear = false
composer.addPass(backgroundPass);
// clears the mask
composer.addPass(new POSTPROCESSING.ClearMaskPass());

// re-render (!) whole fg scene to make it visible on screen ; clear = true
composer.addPass(foregroundPass);
// re-render (!) whole bg before the effect pass otherwise effects are covered by bg; clear = false
composer.addPass(backgroundPass);

// godrays + outline effects
composer.addPass(effectPass);
// finally add the bloom rendered texture  and render to screen
composer.addPass(texturePass);

As a final result, bg is rendered without any effect, all the effects (bloom / godrays / outline) are rendered correctly (not covered by bg), but I lose 2 things :

• bg behind partially transparent 3d object is rendered as if the 3d object were fully transparent
• so many renderings, so it does not help for the FPS...

Any suggestion to improve the pass pipeline and make use of partial transparency of fg 3d objects to shade bg ?

[vanruesc]

From what I know, transparency can be hard to get right even with normal scenes. Three.js sorts transparent objects for you so that they are rendered correctly. I require more information to help you:

Do you want the transparent objects to be affected by any effects? In your example, it looks like you don't want the transparent objects to contribute to the bloom effect. Please explain which objects should be affected by which effects. Then we can work out an optimal setup.

[bendxr]

In the fg scene, most of the objects are partially transparent (3d objects or particles).
All the fg scene is used when applying bloom effect (depending of their color (lighter or darker), 3d objects are more or less visibly affected by bloom effect).
Most of fg 3d objects are affected by outline (for easing mouse selection).
1 3d object is affected by godrays (at the center).
Background should have no effect applied.
The remaining issue for me is that partially transparent 3d objects either don't let show the bg at all, or let it show without shading it due to partial transparency of fg 3d objects.

I changed a bit your jsfiddle to illustrate my issue and get closer with my scene setup : https://jsfiddle.net/bendxr/2rzfmthe/
Blue sphere and ring are opaque and just bloom ; central disc is darker and half transparent (we can see the other half of the sphere) but we cannot see the bg through it (that's the pb).

I hope it's clearer...

[vanruesc]

Thanks for explanation and the example scene.
I've adjusted the setup accordingly; here is the updated version.

Since there are transparent objects in your scene, we have to render the foreground together with the background. This will result in a little bit of overdraw later, but that shouldn't have a noticeable impact on performance.

The main problem is that the BloomEffect must not be applied to the bare background. Therefore, we need to somehow mask out the background. In other words, we need to prevent the background from being drawn outside of the foreground geometry. We could use a MaskPass, but I don't recommend it because:

1. Managing the mask scene is difficult in this case. I've tried it.
2. It's bad for performance and doesn't scale well because you'd have to render everything twice.
3. There's a better solution.

The better solution is to draw the clear color over the background. You can think of this as a depth-aware clear pass that deletes the background outside the geometry bounds. After that we update the bloom, then we draw the real background again and finally we apply the bloom on top of everything.

Does this solve your issue?

[bendxr]

Many thanks : it solves elegantly the issue !