WebGL支持模具缓冲区

Question

用canvas.getContext("webgl", {stencil : true})初始化webgl会请求一个模版缓冲区，但并不是所有浏览器都会给你一个(对我来说，Ubuntu 20.04 LTS上的Firefox 79.0不起作用，但Chrome 84.0.4147.89起作用。我的显卡是NVIDIA RTX 2060，我使用的是NVIDIA-driver-440服务器驱动程序(。

我想知道模具缓冲区的支持范围有多广，但我找不到有关支持哪些浏览器的信息。像glStencilOp这样的函数，是我唯一能找到支持信息的东西，仍然可以使用，它们只是对0模板位没有任何作用。

是否有支持此功能的浏览器列表？

Answer 1

老实说，这听起来像是firefox中的一个bug，尽管给定的规范允许实现由于任何原因无法在画布上提供模具缓冲区，但从技术上讲，这不是一个bug。我会考虑填补一个。使用Chromium浏览器进行测试，以检查这是否是Firefox选择不提供模具缓冲区，而不是驱动程序问题或其他问题。

您应该能够始终创建DEPTH_STENCIL渲染缓冲区。WebGL的任何版本都不允许实现不支持它。因此，您可以通过渲染到附加到帧缓冲区的纹理+深度模具渲染缓冲区，然后将帧缓冲区颜色纹理渲染到画布来解决该错误。

这是一个测试。你应该看到一个红色的正方形，右下角是绿色的。它将在一个蓝色的正方形里面，它在一个紫色的正方形里面。

蓝色正方形用于显示帧缓冲区纹理的范围。如果绿色方块没有被模版缓冲区遮蔽，它就会变成蓝色。

紫色的正方形显示画布的大小，并且我们绘制的帧缓冲区纹理小于整个画布。这一切只是为了表明模具缓冲区在您的机器上工作。对于您自己的解决方案，您希望绘制一个由顶点组成的四边形，而不是像下面这样使用点，并且您希望使附加到帧缓冲区的纹理和渲染缓冲区与画布大小相同。

"use strict";
function main() {
const gl = document.querySelector("canvas").getContext("webgl");

const vs = `
attribute vec4 position;
void main() {
gl_Position = position;
gl_PointSize = 64.0;
}
`;
const fs = `
precision mediump float;
uniform sampler2D tex;
void main() {
gl_FragColor = texture2D(tex, gl_PointCoord.xy);
}
`;
const program = twgl.createProgram(gl, [vs, fs]);
const posLoc = gl.getAttribLocation(program, "position");
// Create a texture to render to
const targetTextureWidth = 128;
const targetTextureHeight = 128;
const targetTexture = createTexture(gl);
{
// define size and format of level 0
const level = 0;
const internalFormat = gl.RGBA;
const border = 0;
const format = gl.RGBA;
const type = gl.UNSIGNED_BYTE;
const data = null;
gl.texImage2D(gl.TEXTURE_2D, level, internalFormat,
targetTextureWidth, targetTextureHeight, border,
format, type, data);
}
// Create and bind the framebuffer
const fb = gl.createFramebuffer();
gl.bindFramebuffer(gl.FRAMEBUFFER, fb);
// attach the texture as the first color attachment
const attachmentPoint = gl.COLOR_ATTACHMENT0;
const level = 0;
gl.framebufferTexture2D(gl.FRAMEBUFFER, attachmentPoint, gl.TEXTURE_2D, targetTexture, level);
// create a depth-stencil renderbuffer
const depthStencilBuffer = gl.createRenderbuffer();
gl.bindRenderbuffer(gl.RENDERBUFFER, depthStencilBuffer);
// make a depth-stencil buffer and the same size as the targetTexture
gl.renderbufferStorage(gl.RENDERBUFFER, gl.DEPTH_STENCIL, targetTextureWidth, targetTextureHeight);
gl.framebufferRenderbuffer(gl.FRAMEBUFFER, gl.DEPTH_STENCIL_ATTACHMENT, gl.RENDERBUFFER, depthStencilBuffer);

function createTexture(gl, color) {
const tex = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, tex);
// set the filtering so we don't need mips
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
if (color) {
gl.texImage2D(
gl.TEXTURE_2D, 0, gl.RGBA, 1, 1, 0,
gl.RGBA, gl.UNSIGNED_BYTE, new Uint8Array(color));
}
return tex;
}

// create a red texture and a green texture
const redTex = createTexture(gl, [255, 0, 0, 255]);
const greenTex = createTexture(gl, [0, 255, 0, 255]);
gl.enable(gl.STENCIL_TEST);
gl.useProgram(program);
gl.clearColor(0, 0, 1, 1);
gl.clear(gl.COLOR_BUFFER_BIT);

gl.bindTexture(gl.TEXTURE_2D, redTex);
gl.stencilFunc(
gl.ALWAYS,    // the test
1,            // reference value
0xFF,         // mask
);  
gl.stencilOp(
gl.KEEP,     // what to do if the stencil test fails
gl.KEEP,     // what to do if the depth test fails
gl.REPLACE,  // what to do if both tests pass
);

// draw a 64x64 pixel red rect in middle
gl.drawArrays(gl.POINTS, 0, 1);

gl.stencilFunc(
gl.EQUAL,     // the test
1,            // reference value
0xFF,         // mask
);  
gl.stencilOp(
gl.KEEP,     // what to do if the stencil test fails
gl.KEEP,     // what to do if the depth test fails
gl.KEEP,  // what to do if both tests pass
);

// draw a green 64x64 pixel square in the
// upper right corner. The stencil will make
// it not go outside the red square
gl.vertexAttrib2f(posLoc, 0.5, 0.5);
gl.bindTexture(gl.TEXTURE_2D, greenTex);
gl.drawArrays(gl.POINTS, 0, 1);
// draw the framebuffer's texture to
// the canvas. we should see a 32x32
// red square with the bottom right corner
// green showing the stencil worked. That will
// be surrounded by blue to show the texture
// we were rendering to is larger than the
// red square. And that will be surrounded
// by purple since we're drawing a 64x64
// point on a 128x128 canvas which we clear 
// purple.
gl.bindFramebuffer(gl.FRAMEBUFFER, null);
gl.clearColor(1, 0, 1, 1);
gl.clear(gl.COLOR_BUFFER_BIT);

gl.vertexAttrib2f(posLoc, 0.0, 0.0);
gl.bindTexture(gl.TEXTURE_2D, targetTexture);
gl.drawArrays(gl.POINTS, 0, 1);  
}
main();

canvas { border: 1px solid black; }

<script src="https://twgljs.org/dist/4.x/twgl.min.js"></script>
<canvas width="128" height="128"></canvas>

如果将renderbuffer格式更改为DEPTH_COMPONENT16，并将附着点更改为DEPT_attachment，则您将看到绿色正方形不再被模具屏蔽

"use strict";
function main() {
const gl = document.querySelector("canvas").getContext("webgl");

const vs = `
attribute vec4 position;
void main() {
gl_Position = position;
gl_PointSize = 64.0;
}
`;
const fs = `
precision mediump float;
uniform sampler2D tex;
void main() {
gl_FragColor = texture2D(tex, gl_PointCoord.xy);
}
`;
const program = twgl.createProgram(gl, [vs, fs]);
const posLoc = gl.getAttribLocation(program, "position");
// Create a texture to render to
const targetTextureWidth = 128;
const targetTextureHeight = 128;
const targetTexture = createTexture(gl);
{
// define size and format of level 0
const level = 0;
const internalFormat = gl.RGBA;
const border = 0;
const format = gl.RGBA;
const type = gl.UNSIGNED_BYTE;
const data = null;
gl.texImage2D(gl.TEXTURE_2D, level, internalFormat,
targetTextureWidth, targetTextureHeight, border,
format, type, data);
}
// Create and bind the framebuffer
const fb = gl.createFramebuffer();
gl.bindFramebuffer(gl.FRAMEBUFFER, fb);
// attach the texture as the first color attachment
const attachmentPoint = gl.COLOR_ATTACHMENT0;
const level = 0;
gl.framebufferTexture2D(gl.FRAMEBUFFER, attachmentPoint, gl.TEXTURE_2D, targetTexture, level);
// create a depth-stencil renderbuffer
const depthStencilBuffer = gl.createRenderbuffer();
gl.bindRenderbuffer(gl.RENDERBUFFER, depthStencilBuffer);
// make a depth-stencil buffer and the same size as the targetTexture
gl.renderbufferStorage(gl.RENDERBUFFER, gl.DEPTH_COMPONENT16, targetTextureWidth, targetTextureHeight);
gl.framebufferRenderbuffer(gl.FRAMEBUFFER, gl.DEPTH_ATTACHMENT, gl.RENDERBUFFER, depthStencilBuffer);

function createTexture(gl, color) {
const tex = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, tex);
// set the filtering so we don't need mips
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
if (color) {
gl.texImage2D(
gl.TEXTURE_2D, 0, gl.RGBA, 1, 1, 0,
gl.RGBA, gl.UNSIGNED_BYTE, new Uint8Array(color));
}
return tex;
}

// create a red texture and a green texture
const redTex = createTexture(gl, [255, 0, 0, 255]);
const greenTex = createTexture(gl, [0, 255, 0, 255]);
gl.enable(gl.STENCIL_TEST);
gl.useProgram(program);
gl.clearColor(0, 0, 1, 1);
gl.clear(gl.COLOR_BUFFER_BIT);

gl.bindTexture(gl.TEXTURE_2D, redTex);
gl.stencilFunc(
gl.ALWAYS,    // the test
1,            // reference value
0xFF,         // mask
);  
gl.stencilOp(
gl.KEEP,     // what to do if the stencil test fails
gl.KEEP,     // what to do if the depth test fails
gl.REPLACE,  // what to do if both tests pass
);

// draw a 64x64 pixel red rect in middle
gl.drawArrays(gl.POINTS, 0, 1);

gl.stencilFunc(
gl.EQUAL,     // the test
1,            // reference value
0xFF,         // mask
);  
gl.stencilOp(
gl.KEEP,     // what to do if the stencil test fails
gl.KEEP,     // what to do if the depth test fails
gl.KEEP,  // what to do if both tests pass
);

// draw a green 64x64 pixel square in the
// upper right corner. The stencil will make
// it not go outside the red square
gl.vertexAttrib2f(posLoc, 0.5, 0.5);
gl.bindTexture(gl.TEXTURE_2D, greenTex);
gl.drawArrays(gl.POINTS, 0, 1);
// draw the framebuffer's texture to
// the canvas. we should see a 32x32
// red square with the bottom right corner
// green showing the stencil worked. That will
// be surrounded by blue to show the texture
// we were rendering to is larger than the
// red square. And that will be surrounded
// by purple since we're drawing a 64x64
// point on a 128x128 canvas which we clear 
// purple.
gl.bindFramebuffer(gl.FRAMEBUFFER, null);
gl.clearColor(1, 0, 1, 1);
gl.clear(gl.COLOR_BUFFER_BIT);

gl.vertexAttrib2f(posLoc, 0.0, 0.0);
gl.bindTexture(gl.TEXTURE_2D, targetTexture);
gl.drawArrays(gl.POINTS, 0, 1);  
}
main();

canvas { border: 1px solid black; }

<script src="https://twgljs.org/dist/4.x/twgl.min.js"></script>
<canvas width="128" height="128"></canvas>

您应该能够调用gl.getContextAttributes来检查是否有模具缓冲区，因此如果建议的解决方案告诉您在画布上没有模具缓冲区时，您可以使用该解决方案。