WebGL2 渲染到 R32F 纹理

Question

我无法将R32F纹理绑定到framebuffer，因为根据this source，这样的纹理不是"color renderable by default"。

但随后显示 "those features are available as optional extensions"。

如何使用这些扩展？我如何让它工作？

Answer 1

您尝试启用 EXT_color_buffer_float 扩展程序

function main() {
  const gl = document.createElement("canvas").getContext("webgl2");
  const ext = gl.getExtension("EXT_color_buffer_float");
  if (!ext) {
    console.log("sorry, can't render to floating point textures");
    return;
  }

  const tex = gl.createTexture();
  gl.bindTexture(gl.TEXTURE_2D, tex);
  const level = 0;
  const internalFormat = gl.R32F;
  const width = 1;
  const height = 1;
  const border = 0;
  const format = gl.RED;
  const type = gl.FLOAT;
  gl.texImage2D(
    gl.TEXTURE_2D, level, internalFormat,
    width, height, border, format, type, null);

  const fb = gl.createFramebuffer();
  gl.bindFramebuffer(gl.FRAMEBUFFER, fb);
  gl.framebufferTexture2D(
    gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0,
    gl.TEXTURE_2D, tex, level);

  const status = gl.checkFramebufferStatus(gl.FRAMEBUFFER);
  console.log(`can ${status === gl.FRAMEBUFFER_COMPLETE ? "" : "NOT "}render to R32`);
}
main();

WebGL2 渲染到 R32F 纹理

WebGL2 rendering to R32F texture

webgl

webgl-extensions

webgl2