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中的一个错误.在Firefox中运行此测试,看看它是否通过.

你应该需要通过传递在创建WebGL的情况下,请求模板缓冲区stencil:true中

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

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

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