WebGL2 渲染到 R32F 纹理答案

【问题标题】：WebGL2 rendering to R32F textureWebGL2 渲染到 R32F 纹理
【发布时间】：2018-04-26 14:36:55
【问题描述】：

我无法将R32F 纹理绑定到framebuffer，因为根据this source，这样的纹理不是“默认可渲染颜色”。

然后它说“这些功能可作为可选扩展使用”。

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

【问题讨论】：

【解决方案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();

【讨论】：