WebGL模板缓冲区仅在Firefox中有效

Question

我在WebGL中使用了模板缓冲区。这在Firefox中运行良好，但在Chrome（以及Internet Explorer）中也失败了。除了模板被忽略外，应用程序的其余部分继续正常运行，除了模板。

这里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中使用的模板缓冲区的其他示例。

Answer 1

这听起来像是Firefox中的一个错误。 Run this test in Firefox并查看它是否通过。

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

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

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

    var contextAttributes = gl.getContextAttributes();
    var haveStencilBuffer = contextAttributes.stencil;