Низкое качество изображения при рендеринге на текстуру по сравнению с рендерингом на экран - PullRequest
Новая
       59

Низкое качество изображения при рендеринге на текстуру по сравнению с рендерингом на экран

0 голосов
/ 24 мая 2019

Чтобы реализовать некоторые эффекты постобработки, я хочу визуализировать сцену в текстуру вместо прямой визуализации на экран. В целях тестирования я нарисовал эту текстуру поверх простого четырехугольника, который охватывает весь экран. Но качество изображения разочаровывает:

Отображение сцены на экран

Render Scene To Screen

VS

Отображение сцены в текстуру

Render Scene To Texture

Я действительно не знаю, почему это происходит. Размер холста соответствует размеру буфера чертежа. Также при изменении размера экрана я создаю совершенно новую текстуру, фрейм и буфер визуализации. У меня неправильная настройка кадрового буфера? Или это ограничение WebGL? Я использую Google Chrome и WebGL2. 

function resize() {

  if (tex) { tex.delete(); }
  if (fb) { gl.deleteFramebuffer(fb); }
  if (rb) { gl.deleteRenderbuffer(rb); }

  fb = gl.createFramebuffer();
  gl.bindFramebuffer(gl.FRAMEBUFFER, fb);

  tex = new Texture2D(null, {
    internalFormat: gl.RGB,
    width: gl.drawingBufferWidth,
    height: gl.drawingBufferHeight,
    minFilter: gl.LINEAR,
    magFilger: gl.LINEAR
  });

  gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, tex.id, 0);



  rb = gl.createRenderbuffer();
  gl.bindRenderbuffer(gl.RENDERBUFFER, rb);
  gl.renderbufferStorage(gl.RENDERBUFFER, gl.DEPTH24_STENCIL8, gl.drawingBufferWidth, gl.drawingBufferHeight);
  gl.framebufferRenderbuffer(gl.FRAMEBUFFER, gl.DEPTH_STENCIL_ATTACHMENT, gl.RENDERBUFFER, rb);

  gl.bindFramebuffer(gl.FRAMEBUFFER, null);
}

run() {
  gl.resize();
  gl.addEventListener('resize', resize);
  resize();

  gl.blendFuncSeparate(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA, gl.ONE, gl.ONE);
  gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
  gl.clearColor(0.0, 0.0, 0.0, 1.0);
  gl.enable(gl.DEPTH_TEST);
  gl.enable(gl.CULL_FACE);
  gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);

  gl.loop(() => {
    if (!ctx.scene || !ctx.car || !ctx.wheels) return;

    gl.bindFramebuffer(gl.FRAMEBUFFER, fb);
    gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
    renderScene();

    gl.bindFramebuffer(gl.FRAMEBUFFER, null);
    gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

    screenShader.use();
    screen.bind();
    screenShader.screenMap = tex.active(0);
    gl.drawElements(gl.TRIANGLES, screen.length, gl.UNSIGNED_SHORT, 0);

  });
}

1 Ответ

0 голосов
/ 26 мая 2019

С подсказкой gman удалось найти причину: в WebGL не возможно сгладить фреймбуфер. Я смог оптимизировать качество изображения с помощью буферов рендеринга с несколькими выборками, как описано здесь .

...