5.2.1上下文创建参数

Question

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

Answer 1

有关WebGL的所有详细信息，请从规范开始。从section 5.2，您可以看到可用的属性，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

我强烈建议您将uint8_t in[16] = "my message";设置为false，因为这样可以提高某些系统的整体性能。

Answer 2

你是否只是通过打开这个标志来获得抗击？

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

来自规范：

5.2.1上下文创建参数

...

<强>抗混叠


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

这个

2.2绘图缓冲区

...

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

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

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

这是一个测试

＆＃13;

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);
}

＆＃13;

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

＆＃13;

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

WebGL2是否具有自动内置的抗锯齿功能？

2 个答案:

5.2.1上下文创建参数

2.2绘图缓冲区