Postprocessing: Post processing the mask before masking

[Anemolo]

Hello, I've been trying make a mask that involves a series of circles which are blured with a blurPass and then modified with an EffectPass. But I haven't been able to figure out how to run this passes to the mask, and then use the final result to mask a renderPass.

To give a better Idea, this what I'm trying to do :

this.composer.addPass(clearPass);
this.composer.addPass(bubbleMask);

//  passes I want to be applied to the mask

this.composer.addPass(blurPass);
this.composer.addPass(mixPass);

// Passes I want to be masked
this.composer.addPass(this.renderPass);
this.composer.addPass(clearMaskPass);

// render to screen
this.composer.addPass(smaaPass);

Here's an example of what the mask would look like rendered to the screen.
https://jsfiddle.net/sdkqvrjp/3/

I checked the examples and I think none of them show something similar to what I'm trying to do. Is this possible to do?

[vanruesc]

Hi,

you can only modify stencil bits by drawing geometry. It's not possible to apply post processing effects like blur to the stencil mask. However, this library supports advanced compositing through shader-based blending.

To apply post processing effects to a mask texture, draw your mask scene into a color render target using a RenderPass with an unshaded override material. The resulting black-and-white output can then be modified with post processing effects. Once your mask texture is complete, save it into another render target using a SavePass. After that, draw your main scene with another RenderPassand create a TextureEffect with your saved mask texture. Set the blend function of the TextureEffect to MULTIPLY and let it render to screen.

Here's an example:
https://jsfiddle.net/qrg90fne/

For optimal performance, you'd want to create a custom pass that encapsulates the mask generation steps and lets the last pass render to a dedicated render target. That way you can omit the extra copy operation that the SavePass performs.

[Anemolo]

Woah @vanruesc, thanks for the help! The solution works perfectly and I'm definetyl going to be working on those custom passes you mentioned.

Thanks for the help & library, you are awesome!