Использование 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); 

}