opengl-es - WebGL2 是否自动内置了抗锯齿功能？

Question

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

Answer 1

Do you simply get antialias by turning on this flag?

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

来自规范:

5.2.1 Context creation parameters

...

antialias

If the value is true and the implementation supports antialiasing the drawing buffer will perform antialiasing using its choice of technique (multisample/supersample) and quality. If the value is false or the implementation does not support antialiasing, no antialiasing is performed.

还有这个

2.2 The Drawing Buffer

...

The depth, stencil and antialias attributes, when set to true, are requests, not requirements. The WebGL implementation should make a best effort to honor them. When any of these attributes is set to false, however, the WebGL implementation must not provide the associated functionality.

通过将其设置为 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 中不可用的功能。渲染到抗锯齿帧缓冲区，然后将其 blit 到 Canvas 是强制抗锯齿的一种方式，至少在 WebGL2 中是这样。