Question

是否可以在具有多个附件的帧缓冲区上将像素值检索为浮点数？（WebGL 2）

我试过了：

var framebuffer = _gl.createFramebuffer();

_gl.bindFramebuffer(_gl.FRAMEBUFFER, framebuffer);

_gl.framebufferTexture2D(_gl.FRAMEBUFFER, _gl.COLOR_ATTACHMENT0, _gl.TEXTURE_2D, texture1, 0);
_gl.framebufferTexture2D(_gl.FRAMEBUFFER, _gl.COLOR_ATTACHMENT1, _gl.TEXTURE_2D, texture2, 0);

_gl.drawBuffers([_gl.COLOR_ATTACHMENT0, _gl.COLOR_ATTACHMENT1]);

使用浮动纹理设置如下：

_gl.texImage2D(_gl.TEXTURE_2D, 0, _gl.RGBA32F, 256, 256, 0, _gl.RGBA, _gl.FLOAT, null);

然后我绑定了framebuffer并调用readPixels来获取第一个附件的值：

_gl.readPixels(0, 0, 1, 256, _gl.RGBA, _gl.FLOAT, 0);

没有浮动纹理，这项工作但浮动纹理，帧缓冲区保持不完整。

WebGL 2规范似乎说这应该可行，但我现在有些疑问，但似乎_gl.RGBA32F似乎是问题，内部格式为_gl.RGBA，它会生成不兼容的类型错误。< / p>

Answer 1

首先，渲染到浮点需要WebGL2中的扩展名EXT_color_buffer_float。

您可以在table here中复制的spec section 3.8.3.2中看到，默认情况下浮点纹理无法在WebGL2中呈现。

否则，在调用gl.readBuffer

之前，请调用gl.readPixels将缓冲区设置为读取

示例：

＆＃13;

function main() {
  const gl = document.createElement("canvas").getContext("webgl2");
  if (!gl) {
    alert("need WebGL2");
    return;
  }
  const ext = gl.getExtension("EXT_color_buffer_float");
  if (!ext) {
    alert("need EXT_color_buffer_float");
    return;
  }
  
  const tex1 = createTexture(gl, [12, 0, 0, 34]);
  const tex2 = createTexture(gl, [0, 56, 78, 0]);
  
  const fb = gl.createFramebuffer();
  gl.bindFramebuffer(gl.FRAMEBUFFER, fb);
  gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, tex1, 0);

  gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT1, gl.TEXTURE_2D, tex2, 0);

  gl.drawBuffers([gl.COLOR_ATTACHMENT0, gl.COLOR_ATTACHMENT1]);
  
  readPixelsFromBuffer(gl, gl.COLOR_ATTACHMENT0);
  readPixelsFromBuffer(gl, gl.COLOR_ATTACHMENT1);
}

function readPixelsFromBuffer(gl, attachment) {
  gl.readBuffer(attachment);
  const data = new Float32Array(4);
  const x = 0;
  const y = 0;
  const width = 1;
  const height = 1;
  const format = gl.RGBA;
  const type = gl.FLOAT;
  gl.readPixels(x, y, width, height, format, type, data);
  log(glEnumToString(gl, attachment), data);
}

function createTexture(gl, color) {
  const tex = gl.createTexture();
  gl.bindTexture(gl.TEXTURE_2D, tex);
  const level = 0;
  const internalFormat = gl.RGBA32F;
  const width = 1;
  const height = 1;
  const border = 0;
  const format = gl.RGBA;
  const type = gl.FLOAT;
  const data = new Float32Array(color);
  gl.texImage2D(gl.TEXTURE_2D, level, internalFormat, width, height, border,
                format, type, data);
  // unless we get `OES_texture_float_linear` we can not filter floating point
  // textures
  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
  
  return tex;
}

function glEnumToString(gl, value) {
  for (let key in gl) {
    if (gl[key] === value) {
      return key;
    }
  }
  return `0x${value.toString(16)}`;
}

function log(...args) {
  const elem = document.createElement("pre");
  elem.textContent = [...args].join(' ');
  document.body.appendChild(elem);
}

main();

＆＃13;

具有FLOAT纹理的framebuffers上的webGL 2 readPixels

1 个答案: