Three.js 使用模板缓冲区

Question

我无法使用以下命令将场景绘制成创建为模板蒙版的形状。相反，代码似乎只是将模板本身呈现为黑色对象。

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

我的渲染函数是：

var gl = floor_align.renderer.domElement.getContext('webgl') || floor_align.renderer.domElement.getContext('experimental-webgl');
gl.clearStencil(0);
gl.clear(gl.STENCIL_BUFFER_BIT);
gl.enable(gl.STENCIL_TEST);
gl.stencilFunc(gl.ALWAYS, 1, 1);
gl.stencilOp(gl.KEEP, gl.REPLACE, gl.REPLACE);
gl.colorMask(0, 0, 0, 0);

// Floor Mask (Create a stencil that we render the next pass into)
floor_align.renderer.render(floor_align.maskScene, floor_align.maskCamera);

gl.colorMask(1, 1, 1, 1);
gl.stencilFunc(gl.NOTEQUAL, 1, 1);
gl.stencilOp(gl.KEEP, gl.REPLACE, gl.REPLACE);

// Render a floor pass
floor_align.renderer.render(floor_align.scene, floor_align.camera);

gl.disable(gl.STENCIL_TEST);

渲染器有 autoClear = false;

Answer 1

通过反复试验，我更新了我的代码，现在它可以工作了。清除深度缓冲区似乎特别重要，所以我猜我的面具一定是隐藏了更远的地板碎片。

// Render the scene
function fla_render() {

    floor_align.renderer.clear();

    // Background
    //floor_align.renderer.render(floor_align.scene, floor_align.camera);

    floor_align.renderer.clearDepth();

    var gl = floor_align.renderer.domElement.getContext('webgl') || floor_align.renderer.domElement.getContext('experimental-webgl');

    // Clear the stencil buffer
    gl.clearStencil(0);
    gl.clear(gl.STENCIL_BUFFER_BIT);

    // Replacing the values at the stencil buffer to 1 on every pixel we draw
    gl.stencilFunc(gl.ALWAYS, 1, 1);
    gl.stencilOp(gl.KEEP, gl.REPLACE, gl.REPLACE);

    // Disable color (u can also disable here the depth buffers)
    gl.colorMask(false, false, false, false);

    // Write to stencil
    gl.enable(gl.STENCIL_TEST);

    // Floor Mask (Create a stencil that we render the next pass into)
    floor_align.renderer.render(floor_align.maskScene, floor_align.maskCamera);

    // Telling the stencil now to draw/keep only pixels that equals 1 - which we set earlier
    gl.stencilFunc(gl.EQUAL, 1, 1);
    gl.stencilOp(gl.KEEP, gl.KEEP, gl.KEEP);

    // Clear depth buffer (seems important)
    floor_align.renderer.clearDepth();

    // Enable color
    gl.colorMask(true, true, true, true);

    // Render a floor pass
    floor_align.renderer.render(floor_align.scene, floor_align.camera);

    // Disable stencil test;
    gl.disable(gl.STENCIL_TEST);

}

Answer 2

已接受的答案不适用于最新的 threejs。如果有人感兴趣，这里有一个可用的最新版本（使用 r111）：


        gl.enable(gl.STENCIL_TEST);
        gl.stencilOp(gl.KEEP, gl.KEEP, gl.REPLACE);

        //renderer.clear(); <-- works without this too

        gl.stencilFunc(gl.ALWAYS, 1, 0xFF);
        gl.stencilMask(0xFF);
        renderer.render(maskScene, camera);

        gl.stencilFunc(gl.EQUAL, 1, 0xFF);
        gl.stencilMask(0x00);

        renderer.render(scene, camera);
        gl.stencilMask(0xFF);
        gl.disable(gl.STENCIL_TEST);

同样在我的情况下，我没有禁用自动清除，它仍然有效。

Three.js 使用模板缓冲区

Three.js usage with stencil buffer

webgl

three.js