1

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

4

2 回答 2

7

您是否只是通过打开此标志来获得抗锯齿？

不，这只是一个请求，而不是要求

从规范：

5.2.1 上下文创建参数

...

抗锯齿

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

和这个

2.2 绘图缓冲区

...

当设置为 true 时，depth、stencil 和 antialias 属性是请求，而不是要求。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 中，渲染到抗锯齿的帧缓冲区然后将其传送到画布是一种强制抗锯齿的方法。

于 2018-05-10T05:04:26.087 回答
1

有关 WebGL 的所有详细信息，请从规范开始。从第 5.2 节你可以看到可用的属性，antialias默认为true：

dictionary WebGLContextAttributes {
    GLboolean alpha = true;
    GLboolean depth = true;
    GLboolean stencil = false;
    GLboolean antialias = true;
    GLboolean premultipliedAlpha = true;
    GLboolean preserveDrawingBuffer = false;
    WebGLPowerPreference powerPreference = "default";
    GLboolean failIfMajorPerformanceCaveat = false;
};

我强烈建议也设置alpha为 false，因为这将提高某些系统的整体性能。

于 2018-05-09T14:01:23.977 回答