javascript - WebGL 模板缓冲区仅适用于 Firefox

Question

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

这里 Firefox 正确地创建了模板，因此绿色矩形呈现为其中有孔。这是一个 jsFiddle 演示:http://jsfiddle.net/XH9eC/3/

我打开模板模式并关闭颜色 mask :

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看看它是否通过。

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

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

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

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