WebGL2 有自动内置的抗锯齿功能吗？

Question

我一直在阅读这些示例的源代码，我继续看到这个选项，但是，我无法在任何地方找到这是否是受支持的功能。你只是antialias通过打开这个标志来获得吗？有关此功能的更多详细信息？

Answer 1

你只是通过打开这个标志来获得抗锯齿吗？

不，这只是要求，不是要求

从规范：

5.2.1 上下文创建参数

...

抗锯齿

如果该值为 true 并且实现支持抗锯齿，则绘图缓冲区将使用其选择的技术（多采样/超采样）和质量来执行抗锯齿。如果值为 false 或实现不支持抗锯齿，则不执行抗锯齿。

和这个

2.2 绘图缓冲区

...

深度、模板和抗锯齿属性设置为 true 时，是请求，而不是要求。WebGL 实现应该尽最大努力尊重它们。但是，当这些属性中的任何一个设置为 false 时，WebGL 实现不得提供相关的功能。

通过将其设置为false您告诉浏览器“不要打开抗锯齿”时期。例如，如果您正在制作像素化游戏，您可能希望告诉浏览器不要抗锯齿。

通过不设置标志，浏览器通常会尝试使用抗锯齿。通过将标志设置为 true，浏览器可能会将其作为提示，但抗锯齿是否发生以及它是如何发生的（它使用什么设置或技术等）仍然取决于浏览器。通常存在与抗锯齿相关的错误，因此浏览器通常被迫不支持某些 GPU。浏览器也可能会根据性能拒绝。例如，当不设置标志时，浏览器可能会决定不使用抗锯齿来提高智能手机的性能，然后设置标志可能会提示应用程序更喜欢抗锯齿而不是性能，但这仍然取决于浏览器来决定。

这是一个测试

test("webgl");
test("webgl2");

function test(webglVersion) {
  antialiasTest(webglVersion, {}, "default");
  antialiasTest(webglVersion, {antialias: true}, "true");
  antialiasTest(webglVersion, {antialias: false}, "false");
}

function antialiasTest(webglVersion, options, desc) {
  const canvas = document.createElement("canvas");
  canvas.width = 2;
  canvas.height = 2;
  const gl = canvas.getContext(webglVersion, options);
  if (!gl) {
    log(webglVersion, 'not supported');
    return;
  }
  
  const vs = `
  attribute vec4 position;
  void main() {
     gl_Position = position;
  }
  `;
  const fs = `
  void main() {
    gl_FragColor = vec4(1, 0, 0, 1);
  }
  `;
  const programInfo = twgl.createProgramInfo(gl, [vs, fs]);
  const bufferInfo = twgl.createBufferInfoFromArrays(gl, {
    position: {
      numComponents: 2,
      data: [
        -1, -1, 
         1, -1,
        -1,  1,
      ],
    },
  });
  gl.useProgram(programInfo.program);
  twgl.setBuffersAndAttributes(gl, programInfo, bufferInfo);
  gl.drawArrays(gl.TRIANGLES, 0, 3);
  const pixels = new Uint8Array(2 * 2 * 4);
  gl.readPixels(0, 0, 2, 1, gl.RGBA, gl.UNSIGNED_BYTE, pixels);
  const isNotAntialiased = 
    isRedOrBlack(pixels[ 0]) && 
    isRedOrBlack(pixels[ 4]) && 
    isRedOrBlack(pixels[ 8]) && 
    isRedOrBlack(pixels[12]) ; 
  log(webglVersion, 'with antialias =', desc, 'was', isNotAntialiased ? 'NOT' : '', 'antialiased');
}

function isRedOrBlack(r) {
  return r === 255 || r === 0;
}
function log(...args) {
  const elem = document.createElement("div");
  elem.textContent = [...args].join(' ');
  document.body.appendChild(elem);
}

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

不过，与切线相关的是，WebGL2 允许您使用 来创建抗锯齿渲染缓冲区renderbufferStorageMultisample并使用 来解决它们blitFramebuffer，这是 WebGL1 中不可用的功能。渲染到抗锯齿帧缓冲区，然后将其传输到画布是一种强制抗锯齿的方法，至少在 WebGL2 中是这样。