CODEWITHSUNDEEP
three.js
SpliFF
SpliFF

Reputation: 38956

Three.js Composer with RenderPass not working with MaskPass

I can't get my RenderPass to write into a MaskPass. If I try doing the passes seperately (like only a TexturePass; or TexturePass + OutputPass) it works but I can't get my stencil buffer to work.

http://signaturefloors.dev.flooradvisor.com.au/productapp/floor_align.php

I just want to render the main "scene" 2 or 3 times into different stencils (which are then combined) but I can't even get a single MaskPass working if I also use a RenderPass. Mask + Texture pass seems to work, it's the RenderPass causing me issues.

Basically if I do MaskPass then RenderPass nothing is displayed. It SHOULD simply show me a masked plane.

// Composer

    var texture1 = new THREE.TextureLoader().load( 'textures/2294472375_24a3b8ef46_o.jpg' );
    var texturePass1 = new THREE.TexturePass( texture1 );

    var clearMask = new THREE.ClearMaskPass();
    var renderMask = new THREE.MaskPass( this.scene, this.camera );
    var renderMaskInverse = new THREE.MaskPass( this.scene, this.camera );
    renderMaskInverse.inverse = true;

    var viewScene = new THREE.RenderPass( this.scene, this.camera );

    // Composition pass
    var outputPass = new THREE.ShaderPass( THREE.CopyShader );
    outputPass.renderToScreen = true;

    var renderTargetParameters = {
        minFilter: THREE.LinearFilter,
        magFilter: THREE.LinearFilter,
        format: THREE.RGBFormat,
        stencilBuffer: true
    };

    // Setup render target
    var renderTarget = new THREE.WebGLRenderTarget( SCREEN_WIDTH, SCREEN_HEIGHT, renderTargetParameters );
    this.composer = new THREE.EffectComposer(this.renderer, renderTarget);

    var renderPass = new THREE.RenderPass(this.scene, this.camera);
    //renderPass.renderToScreen = true;

    this.composer.addPass( texturePass1 );
    //this.composer.addPass( viewMask );

    this.composer.addPass( renderMask );
    this.composer.addPass( viewScene );
    this.composer.addPass( clearMask );
    this.composer.addPass( outputPass );

Upvotes: 1

Views: 1977

Answers (1)

evry.one
evry.one

Reputation: 74

I've been looking for a solution to this for a day or so and fell over quite a few questions like yours. None with a useable answer, but I think I found a solution:

To enable masking of a RenderPass you need to set clear = false. In your case:

var viewScene = new THREE.RenderPass( this.scene, this.camera );
viewscene.clear = false

This should do it! Here's a codepen: https://codepen.io/staus/pen/BJNNLq

Upvotes: 2

Related Questions