В WebGL2 автоматически встроено сглаживание? - PullRequest
Новая
       63

В WebGL2 автоматически встроено сглаживание?

0 голосов
/ 09 мая 2018

Я читал исходный код для этих примеров и продолжаю видеть эту опцию, однако нигде не могу найти, поддерживается ли эта функция. Вы просто получаете antialias, включив этот флаг? Есть еще какие-нибудь подробности об этой функции?

Ответы [ 2 ]

0 голосов
/ 10 мая 2018

Вы просто получаете сглаживание, включив этот флаг?

Нет, это всего лишь запрос, а не требование

Из спецификации:

5.2.1 Параметры создания контекста

...

Сглаживание

Если значение равно true и реализация поддерживает сглаживание, буфер рисования будет выполнять сглаживание, используя выбор метода (мультисэмпл / суперсэмпл) и качества. Если значение равно false или реализация не поддерживает сглаживание, сглаживание не выполняется.

А это

2.2 Буфер рисования

...

Атрибуты глубины, трафарета и сглаживания, если задано значение true, являются запросами, а не требованиями. Реализация WebGL должна сделать все возможное, чтобы почтить их. Однако, если для любого из этих атрибутов задано значение false, реализация WebGL не должна предоставлять связанную функциональность.

Установив значение false, вы сообщаете браузеру период «Не включать сглаживание». Например, если вы делаете пиксельную игру, вы можете попросить браузер не сглаживать.

НЕ устанавливая флаг, браузер обычно пытается использовать сглаживание. Установив флаг в значение true, браузер может воспринимать его как подсказку, но браузер все равно должен решать, происходит ли сглаживание или нет, и как это происходит (какие настройки или методы он использует и т. Д ...). Часто возникают ошибки, связанные с сглаживанием, поэтому браузеры часто вынуждены не поддерживать его для определенных графических процессоров. Браузер также может отказаться в зависимости от производительности. Например, если флаг не установлен, браузер может принять решение не использовать сглаживание, чтобы повысить производительность на смартфоне, а затем установить флаг, это может означать, что приложение предпочитает сглаживание производительности, но браузер все равно должен принять решение.

Вот тест 

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.

0 голосов
/ 09 мая 2018

Для получения более подробной информации о 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, поскольку это улучшит общую производительность в некоторых системах.

...