Как использовать текстуру глубины в webgl2 - PullRequest
Новая
       110

Как использовать текстуру глубины в webgl2

0 голосов
/ 16 марта 2020

Если вам нужна только часть кадра color , вы можете сохранить глубина в буфере рендеринга .
Это прекрасно работает для меня webgl1 и webgl2 .

Когда вам также необходимо использовать глубина , вы не можете использовать буфер рендеринга , вам нужно сохранить его в текстуре .
В webgl1 вам необходимо получить расширение для его поддержки.
Это также отлично работает для меня в webgl1 . 

    const gl = canvas.getContext('webgl');
    const depthTextureExtension = gl.getExtension('WEBGL_depth_texture');
    if (!depthTextureExtension) {
        alert('Depth textures not supported');
    }

Эта функция должна быть доступна по умолчанию в webgl2 .
Тем не менее, когда я заменяю приведенный выше код на это: 

    const gl = canvas.getContext('webgl2');

Мой код не отображается, и я не могу найти объяснения, почему. 

    this.texture = gl.createTexture();
    gl.bindTexture(gl.TEXTURE_2D, this.texture);
    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, width, height, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);


    this.depth = gl.createTexture();
    gl.bindTexture(gl.TEXTURE_2D, this.depth);
    checkGLErrors(gl); // OK
    gl.texImage2D(gl.TEXTURE_2D, 0, gl.DEPTH_COMPONENT, width, height, 0, gl.DEPTH_COMPONENT, gl.UNSIGNED_SHORT, null);
    checkGLErrors(gl); // for webgl2: 1281 INVALID_VALUE
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);


    this.framebuffer = gl.createFramebuffer();
    gl.bindFramebuffer(gl.FRAMEBUFFER, this.framebuffer);
    gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, this.texture, 0);
    gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.DEPTH_ATTACHMENT, gl.TEXTURE_2D, this.depth, 0);

1 Ответ

1 голос
/ 16 марта 2020

В WebGL2 DEPTH_COMPONENT недопустимый внутренний формат. Используйте DEPTH_COMPONENT16, DEPTH_COMPONENT24 или DEPTH_COMPONENT32F

Пример отсюда 

  const level = 0;
  const internalFormat = gl.DEPTH_COMPONENT24;
  const border = 0;
  const format = gl.DEPTH_COMPONENT;
  const type = gl.UNSIGNED_INT;
  const data = null;
  gl.texImage2D(gl.TEXTURE_2D, level, internalFormat,
                targetTextureWidth, targetTextureHeight, border,
                format, type, data);
...