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:
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() {
finalComposer.render();
}
When I understand this, I would be happy to write some example / tutorial / blogpost about it.
The newly added
webgl_postprocessing_masking.htmlshould be a easier example to follow.