Three.js 使用模板缓冲区 [英] Three.js usage with stencil buffer
本文介绍了Three.js 使用模板缓冲区的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我无法将场景绘制到创建为模板蒙版的形状中.相反,代码似乎只是将模板本身呈现为黑色对象.
I can't get the following to draw the scene into the shape created as a stencil mask. Instead the code just seems to render the stencil itself as a black object.
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
;
推荐答案
通过反复试验,我将代码更新为这个,现在它可以工作了.清除深度缓冲区似乎特别重要,所以我想我的面具一定隐藏了更远的地板碎片.
Through trial and error I updated my code to this and it now works. Clearing the depth buffer seems particularly important so I guess my mask must have been hiding the more distant floor fragments.
// 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);
}
这篇关于Three.js 使用模板缓冲区的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文