翻阅古今
老实说，这听起来像是 firefox 中的错误，尽管鉴于规范允许实现无法出于任何原因在画布上提供模板缓冲区，但从技术上讲这不是错误。我会考虑填一个。使用 Chromium 浏览器进行测试，以检查这是 Firefox 选择不提供模板缓冲区，而不是驱动程序问题或其他问题。您应该能够始终制作DEPTH_STENCIL渲染缓冲区。没有允许实现不支持的 WebGL 版本。因此，您可以通过渲染到附加到帧缓冲区的纹理+深度模板渲染缓冲区来解决该错误，然后将帧缓冲区颜色纹理渲染到画布。这是一个测试。您应该会看到一个右下角为绿色的红色正方形。那将在紫色方块内的蓝色方块内。蓝色方块用于显示帧缓冲区纹理的范围。如果绿色方块没有被模板缓冲区遮盖，它就会渗入蓝色。紫色方块显示画布的大小，我们绘制的帧缓冲区纹理小于整个画布。这只是为了表明模板缓冲区可以在您的机器上工作。对于您自己的解决方案，您希望绘制一个由顶点组成的四边形而不是使用如下所示的点，并且您希望使附加到帧缓冲区的纹理和渲染缓冲区与画布的大小相同。"use strict";function main() { const gl = document.querySelector("canvas").getContext("webgl"); const vs = ` attribute vec4 position;"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> 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>如果将渲染缓冲区格式更改为 DEPTH_COMPONENT16 并将附着点更改为 DEPTH_ATTACHMENT，那么您将看到绿色方块不再被模板遮盖您应该能够调用gl.getContextAttributes以检查您是否有模板缓冲区，因此如果它告诉您您没有在画布上获得模板缓冲区，您可以使用建议的解决方案。