Postprocessing: Effects composition and CubeTexture background

[bendxr]

Hi,
I'd like to combine a scene with several effects composition (outline + godRays + bloom) on the 3D meshes and a background (cubemap) which is not affected by all the effects.
The best I've achieved is to have both the scene and the background but rendered with all the effect passes. I tried several things to prevent effects to apply on the background but it didn't succeed until then.
Issue #79 seems to be quite close to my problem but it applied to processing 4.5 and I use 5.5.0 (TexturePass have disappeared from doc).
What should I try for solving this differentiated rendering issue ?

[vanruesc]

Hello,

post processing effects are usually applied to the final scene as a finishing touch. That's why the documentation doesn't include information about this particular use case.

This library is specialized for the typical scene setups. Be warned that your setup may suffer in terms of performance because of its advanced nature.

Some things have changed since version 4, but the basic strategy looks like this:

1. Render your 3D objects without the background. This clears the internal frame buffer and writes depth which is very important for step 4.
2. Create a bloom effect and set its blendFunction to SKIP. Render the effect using a stand-alone EffectPass. This will only update the bloom texture. Set needsSwap of this pass to false if you're going to skip step 3.
3. [Optional]: Set needsSwap of your bloom pass to true. Use a second EffectPass instance to render other simple effects like Sepia and Noise that should only be applied to the 3D objects.
4. Draw the background using another RenderPass that doesn't clear the frame buffer. This pass respects depth. It also produces aliasing artifacts.
5. Draw the bloom texture using a TextureEffect wrapped in another EffectPass instance. You can also add SMAAEffect, OutlineEffect, GodRaysEffect, VignetteEffect, etc. to this pass.

It fully depends on what the effects do to determine where they should be executed. For example, the Outline effect as well as the God Rays effect both ignore the background whereas the Bloom effect processes the entire scene.

Here is an example that shows all this in detail.

Glitch, Shock Wave and Pixelation can just be added to the end of the pass queue if needed.

I hope this helps!

[vanruesc]

WebGLBackground has been changed in [email protected]. The scene background no longer tests depth. This means you'll need to use a custom cube texture material to draw the background.

The EffectPass has also been changed in [email protected]. When there's no apparent need to render anything, it will now leave the internal frame buffers untouched.

The render pipeline changes as follows:

1. Render the 3D objects without the background.
2. Create a bloom effect and set its blendFunction to SKIP. Render the effect using a stand-alone EffectPass.
3. [Optional]: Render additional effects that should only be applied to the 3D objects.
   
   
   
   1. Use a ShaderPass together with a CopyMaterial to copy the input buffer over to the output buffer.
   
   
   2. Use a second EffectPass instance to render other effects.
   
   
4. Draw the background using a custom sky box with a material that tests depth.
5. Draw the bloom as a TextureEffect.

I've updated the example accordingly.

[bendxr]

Many thanks for your answers and the example code, which are really helpful !

[vanruesc]

I'm glad I could help. If you have any other questions, just open another issue.