1

我在 WebGL 中有一个模板缓冲区的半工作用法。这在 Firefox 中运行良好，但在 Chrome（和 Internet Explorer 中也是如此）中失败。应用程序的其余部分继续运行而没有错误，只是忽略了模板。

左：Firefox，右：Chrome

在这里，Firefox 正确地创建了模板，因此绿色矩形被渲染为带有孔。这是一个 jsFiddle 演示：http: //jsfiddle.net/XH9eC/3/

我打开模板模式并关闭颜色蒙版：

gl.colorMask(gl.FALSE, gl.FALSE, gl.FALSE, gl.FALSE);
gl.stencilFunc(gl.ALWAYS, 1, 0xFF);
gl.stencilOp(gl.REPLACE, gl.REPLACE, gl.REPLACE);

然后我在屏幕中间渲染正方形

然后我更改模板模式并打开颜色：

gl.colorMask(true, true, true, true);
gl.stencilFunc(gl.EQUAL, 0, 0xFF);
gl.stencilOp(gl.ZERO, gl.ZERO, gl.ZERO)

最后我渲染绿色背景。

如果重要的话，这是我用来渲染背景和方形模板的代码（我只是使用不同的顶点）：

var background = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, background);
gl.vertexAttribPointer(position_location, 2, gl.FLOAT, false, 0, 0);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([
    0, 0,
    800, 600,
    0, 600,
    0, 0,
    800, 0,
    800, 600
]), gl.STATIC_DRAW);

我在其他代码中遇到了这个问题，但尚未修复。我已经看到了 Chrome 中使用的模板缓冲区的其他示例。

4

1 回答 1

6

这听起来像是 Firefox 中的一个错误。在 Firefox 中运行这个测试，看看它是否通过。

stencil:true当您通过传入创建WebGL上下文时，您应该需要请求模板缓冲区

    var gl = canvas.getContext("webgl", {stencil:true});

请求模板缓冲区并不能保证您得到一个。要检查你可以使用

    var contextAttributes = gl.getContextAttributes();
    var haveStencilBuffer = contextAttributes.stencil;
于 2014-06-23T19:16:55.887 回答