⬅️ Back to Table of Contents

📄 MaskPass.js

📊 Analysis Summary

Metric	Count
🔧 Functions	2
🧱 Classes	2
📦 Imports	1
📊 Variables & Constants	3

📚 Table of Contents

• Imports
• Variables & Constants
• Functions
• Classes

🛠️ File Location:

📂 examples/jsm/postprocessing/MaskPass.js

📦 Imports

Name	Source
Pass	./Pass.js

---

Variables & Constants

Name	Type	Kind	Value	Exported
state	any	let/var	renderer.state	✗
writeValue	any	let/var	*not shown*	✗
clearValue	any	let/var	*not shown*	✗

---

Functions

MaskPass.render(renderer: WebGLRenderer, writeBuffer: WebGLRenderTarget, readBuffer: WebGLRenderTarget): void

JSDoc:

/**
     * Performs a mask pass with the configured scene and camera.
     *
     * @param {WebGLRenderer} renderer - The renderer.
     * @param {WebGLRenderTarget} writeBuffer - The write buffer. This buffer is intended as the rendering
     * destination for the pass.
     * @param {WebGLRenderTarget} readBuffer - The read buffer. The pass can access the result from the
     * previous pass from this buffer.
     * @param {number} deltaTime - The delta time in seconds.
     * @param {boolean} maskActive - Whether masking is active or not.
     */

Parameters:

• renderer WebGLRenderer
• writeBuffer WebGLRenderTarget
• readBuffer WebGLRenderTarget

Returns: void

Calls:

• renderer.getContext
• state.buffers.color.setMask
• state.buffers.depth.setMask
• state.buffers.color.setLocked
• state.buffers.depth.setLocked
• state.buffers.stencil.setTest
• state.buffers.stencil.setOp
• state.buffers.stencil.setFunc
• state.buffers.stencil.setClear
• state.buffers.stencil.setLocked
• renderer.setRenderTarget
• renderer.clear
• renderer.render

Internal Comments:

// don't update color or depth (x6)
// lock buffers (x6)
// set up stencil (x2)
// draw into the stencil buffer (x4)
// unlock color and depth buffer and make them writable for subsequent rendering/clearing (x6)
// only render where stencil is set to 1 (x6)

Code

render( renderer, writeBuffer, readBuffer /*, deltaTime, maskActive */ ) {

        const context = renderer.getContext();
        const state = renderer.state;

        // don't update color or depth

        state.buffers.color.setMask( false );
        state.buffers.depth.setMask( false );

        // lock buffers

        state.buffers.color.setLocked( true );
        state.buffers.depth.setLocked( true );

        // set up stencil

        let writeValue, clearValue;

        if ( this.inverse ) {

            writeValue = 0;
            clearValue = 1;

        } else {

            writeValue = 1;
            clearValue = 0;

        }

        state.buffers.stencil.setTest( true );
        state.buffers.stencil.setOp( context.REPLACE, context.REPLACE, context.REPLACE );
        state.buffers.stencil.setFunc( context.ALWAYS, writeValue, 0xffffffff );
        state.buffers.stencil.setClear( clearValue );
        state.buffers.stencil.setLocked( true );

        // draw into the stencil buffer

        renderer.setRenderTarget( readBuffer );
        if ( this.clear ) renderer.clear();
        renderer.render( this.scene, this.camera );

        renderer.setRenderTarget( writeBuffer );
        if ( this.clear ) renderer.clear();
        renderer.render( this.scene, this.camera );

        // unlock color and depth buffer and make them writable for subsequent rendering/clearing

        state.buffers.color.setLocked( false );
        state.buffers.depth.setLocked( false );

        state.buffers.color.setMask( true );
        state.buffers.depth.setMask( true );

        // only render where stencil is set to 1

        state.buffers.stencil.setLocked( false );
        state.buffers.stencil.setFunc( context.EQUAL, 1, 0xffffffff ); // draw if == 1
        state.buffers.stencil.setOp( context.KEEP, context.KEEP, context.KEEP );
        state.buffers.stencil.setLocked( true );

    }

ClearMaskPass.render(renderer: WebGLRenderer): void

JSDoc:

/**
     * Performs the clear of the currently defined mask.
     *
     * @param {WebGLRenderer} renderer - The renderer.
     * @param {WebGLRenderTarget} writeBuffer - The write buffer. This buffer is intended as the rendering
     * destination for the pass.
     * @param {WebGLRenderTarget} readBuffer - The read buffer. The pass can access the result from the
     * previous pass from this buffer.
     * @param {number} deltaTime - The delta time in seconds.
     * @param {boolean} maskActive - Whether masking is active or not.
     */

Parameters:

• renderer WebGLRenderer

Returns: void

Calls:

• renderer.state.buffers.stencil.setLocked
• renderer.state.buffers.stencil.setTest

Code

render( renderer /*, writeBuffer, readBuffer, deltaTime, maskActive */ ) {

        renderer.state.buffers.stencil.setLocked( false );
        renderer.state.buffers.stencil.setTest( false );

    }

---

Classes

MaskPass

Class Code

class MaskPass extends Pass {

    /**
     * Constructs a new mask pass.
     *
     * @param {Scene} scene - The 3D objects in this scene will define the mask.
     * @param {Camera} camera - The camera.
     */
    constructor( scene, camera ) {

        super();

        /**
         * The scene that defines the mask.
         *
         * @type {Scene}
         */
        this.scene = scene;

        /**
         * The camera.
         *
         * @type {Camera}
         */
        this.camera = camera;

        /**
         * Overwritten to perform a clear operation by default.
         *
         * @type {boolean}
         * @default true
         */
        this.clear = true;

        /**
         * Overwritten to disable the swap.
         *
         * @type {boolean}
         * @default false
         */
        this.needsSwap = false;

        /**
         * Whether to inverse the mask or not.
         *
         * @type {boolean}
         * @default false
         */
        this.inverse = false;

    }

    /**
     * Performs a mask pass with the configured scene and camera.
     *
     * @param {WebGLRenderer} renderer - The renderer.
     * @param {WebGLRenderTarget} writeBuffer - The write buffer. This buffer is intended as the rendering
     * destination for the pass.
     * @param {WebGLRenderTarget} readBuffer - The read buffer. The pass can access the result from the
     * previous pass from this buffer.
     * @param {number} deltaTime - The delta time in seconds.
     * @param {boolean} maskActive - Whether masking is active or not.
     */
    render( renderer, writeBuffer, readBuffer /*, deltaTime, maskActive */ ) {

        const context = renderer.getContext();
        const state = renderer.state;

        // don't update color or depth

        state.buffers.color.setMask( false );
        state.buffers.depth.setMask( false );

        // lock buffers

        state.buffers.color.setLocked( true );
        state.buffers.depth.setLocked( true );

        // set up stencil

        let writeValue, clearValue;

        if ( this.inverse ) {

            writeValue = 0;
            clearValue = 1;

        } else {

            writeValue = 1;
            clearValue = 0;

        }

        state.buffers.stencil.setTest( true );
        state.buffers.stencil.setOp( context.REPLACE, context.REPLACE, context.REPLACE );
        state.buffers.stencil.setFunc( context.ALWAYS, writeValue, 0xffffffff );
        state.buffers.stencil.setClear( clearValue );
        state.buffers.stencil.setLocked( true );

        // draw into the stencil buffer

        renderer.setRenderTarget( readBuffer );
        if ( this.clear ) renderer.clear();
        renderer.render( this.scene, this.camera );

        renderer.setRenderTarget( writeBuffer );
        if ( this.clear ) renderer.clear();
        renderer.render( this.scene, this.camera );

        // unlock color and depth buffer and make them writable for subsequent rendering/clearing

        state.buffers.color.setLocked( false );
        state.buffers.depth.setLocked( false );

        state.buffers.color.setMask( true );
        state.buffers.depth.setMask( true );

        // only render where stencil is set to 1

        state.buffers.stencil.setLocked( false );
        state.buffers.stencil.setFunc( context.EQUAL, 1, 0xffffffff ); // draw if == 1
        state.buffers.stencil.setOp( context.KEEP, context.KEEP, context.KEEP );
        state.buffers.stencil.setLocked( true );

    }

}

Methods

render(renderer: WebGLRenderer, writeBuffer: WebGLRenderTarget, readBuffer: WebGLRenderTarget): void

Code

render( renderer, writeBuffer, readBuffer /*, deltaTime, maskActive */ ) {

        const context = renderer.getContext();
        const state = renderer.state;

        // don't update color or depth

        state.buffers.color.setMask( false );
        state.buffers.depth.setMask( false );

        // lock buffers

        state.buffers.color.setLocked( true );
        state.buffers.depth.setLocked( true );

        // set up stencil

        let writeValue, clearValue;

        if ( this.inverse ) {

            writeValue = 0;
            clearValue = 1;

        } else {

            writeValue = 1;
            clearValue = 0;

        }

        state.buffers.stencil.setTest( true );
        state.buffers.stencil.setOp( context.REPLACE, context.REPLACE, context.REPLACE );
        state.buffers.stencil.setFunc( context.ALWAYS, writeValue, 0xffffffff );
        state.buffers.stencil.setClear( clearValue );
        state.buffers.stencil.setLocked( true );

        // draw into the stencil buffer

        renderer.setRenderTarget( readBuffer );
        if ( this.clear ) renderer.clear();
        renderer.render( this.scene, this.camera );

        renderer.setRenderTarget( writeBuffer );
        if ( this.clear ) renderer.clear();
        renderer.render( this.scene, this.camera );

        // unlock color and depth buffer and make them writable for subsequent rendering/clearing

        state.buffers.color.setLocked( false );
        state.buffers.depth.setLocked( false );

        state.buffers.color.setMask( true );
        state.buffers.depth.setMask( true );

        // only render where stencil is set to 1

        state.buffers.stencil.setLocked( false );
        state.buffers.stencil.setFunc( context.EQUAL, 1, 0xffffffff ); // draw if == 1
        state.buffers.stencil.setOp( context.KEEP, context.KEEP, context.KEEP );
        state.buffers.stencil.setLocked( true );

    }

ClearMaskPass

Class Code

class ClearMaskPass extends Pass {

    /**
     * Constructs a new clear mask pass.
     */
    constructor() {

        super();

        /**
         * Overwritten to disable the swap.
         *
         * @type {boolean}
         * @default false
         */
        this.needsSwap = false;

    }

    /**
     * Performs the clear of the currently defined mask.
     *
     * @param {WebGLRenderer} renderer - The renderer.
     * @param {WebGLRenderTarget} writeBuffer - The write buffer. This buffer is intended as the rendering
     * destination for the pass.
     * @param {WebGLRenderTarget} readBuffer - The read buffer. The pass can access the result from the
     * previous pass from this buffer.
     * @param {number} deltaTime - The delta time in seconds.
     * @param {boolean} maskActive - Whether masking is active or not.
     */
    render( renderer /*, writeBuffer, readBuffer, deltaTime, maskActive */ ) {

        renderer.state.buffers.stencil.setLocked( false );
        renderer.state.buffers.stencil.setTest( false );

    }

}

Methods

render(renderer: WebGLRenderer): void

Code

render( renderer /*, writeBuffer, readBuffer, deltaTime, maskActive */ ) {

        renderer.state.buffers.stencil.setLocked( false );
        renderer.state.buffers.stencil.setTest( false );

    }

---