How does masking with EffectComposer work?

I spent awful lot of time with examples/webgl_postprocessing.html but I cannot figure out how to work with masks (EffectComposer, MaskPass, etc.). Maybe I think of them the wrong way – the photoshop way. I’m trying to achieve this:

Example of masking

I would expect usage like this

function init() {
    // ...

    // full render
    renderSceneA = new THREE.RenderPass(sceneA, cameraA);
    renderSceneB = new THREE.RenderPass(sceneB, cameraB);

    // rendering masks
    renderMaskA = new THREE.RenderPass(maskA, maskCameraA);
    renderMaskB = new THREE.RenderPass(maskB, maskCameraB);

    // MaskPass would crop the rendered scene with mask
    // finalComposer would layer up the passes on each other
    finalComposer.addPass(new THREE.MaskPass(renderSceneA, renderMaskA));
    finalComposer.addPass(new THREE.MaskPass(renderSceneB, renderMaskB));

    // ... render to screen etc.

function render() {

When I understand this, I would be happy to write some example / tutorial / blogpost about it.

Author: Fantashit

1 thought on “How does masking with EffectComposer work?

Comments are closed.