如何使用 WebGL 创建基于浮点的 RGBA 纹理？答案

【问题标题】：How can I use WebGL to create an RGBA texture based off of floating points?如何使用 WebGL 创建基于浮点的 RGBA 纹理？
【发布时间】：2016-07-29 17:10:49
【问题描述】：

我有一个由浮点组成的 TIFF，而不是 RGBA 值，所以它显示为透明的。我使用 C++ 来获取浮点值，现在我有了这些值的矩阵。如何使用 WebGL 将它们转换为 RGBA，然后用它们制作纹理？

【问题讨论】：

标签： javascript html floating-point webgl tiff

【解决方案1】：

要将浮点值加载到 WebGL 中的纹理中，您必须检查并启用浮点纹理

var ext = gl.getExtension("OES_texture_float");
if (!ext) {
   // Sorry, your browser/GPU/driver doesn't support floating point textures
}

之后就可以上传浮点数据了

var data = new Float32Array(width * height * 4); //

var texture = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, texture);
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, width, height, 0 gl.RGBA, gl.FLOAT, data);

但您无法过滤该纹理，因此您必须将其设置为最近的

gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);

如果您希望能够过滤，您也需要检查并启用它

var ext = gl.getExtensions("OES_texture_float_linear");
if (!ext) {
   // sorry, can't filter floating point textures
}

渲染到浮点纹理也是一个可选功能（使用浮点纹理作为帧缓冲区附件）。为此，您需要附加纹理，然后检查它是否有效

var fb = gl.createFramebuffer();
gl.bindFramebuffer(gl.FRAMEBUFFER, fb);
gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, texture, 0);
if (gl.checkFramebufferStatus(gl.FRAMEBUFFER) !== gl.FRAMEBUFFER_COMPLETE) {
   // sorry, you can't render to a floating point texture
}

【讨论】：

非常感谢您的回答！我认为它可能会奏效。不过我确实有一个问题：当您创建 Float32Array 时，它使用的宽度和高度来自画布。它应该使用它还是我的数据矩阵的宽度和高度？
当我尝试获取该 OES_texture_float 并查看它是否受支持时，在我尝试的每个浏览器（Firefox、Chrome、SeaMonkey 和 Chromium）中，它都会弹出我在if(!ext) 下放置的警报。这是否意味着我无法创建浮动纹理？
width 和 height 是纹理的宽度和高度。 * 4 假设您需要 RGBA 纹理。如果您正在制作其他类型的纹理，则这些计算会发生变化。 RGB 将是 * 3。 ALPHA 或 LUMINANCE 将是 * 1 等。至于 ext 为 null 表示您的机器不支持浮点纹理（或者您拼错了扩展名）。你用的是什么类型的机器？什么操作系统？您可以使用gl.getSupportedExtensions() 查看所有支持的扩展
我使用的是 Linux，RHEL 6。在执行 gl.getSupportedExtensions() 时，我在我的首选浏览器 Firefox 中没有看到 OES_texture_float。您知道是否有任何方法可以使 Firefox 支持该扩展？谢谢！
这取决于您的 GPU 和驱动程序。如果 GPU 和驱动程序支持浮点纹理，那么您的浏览器也应该支持它。

【解决方案2】：

诚然，我并没有真正用浮点数直接尝试过这个纹理，但我已经用 Uint8 值创建了一个空白纹理。

const texture = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, texture);
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.FLOAT, new Float32Array(putFloatingPointArrayHere));
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
gl.bindTexture(gl.TEXTURE_2D, null);

【讨论】：

感谢您的回复！当 Float32Array 是一维的而我的 TIFF 是二维的时，我该怎么做？
另外，我收到此错误：TypeError: Argument 6 is not valid for any of the 6-argument overload of WebGLRenderingContext.texImage2D。
要创建浮点纹理，需要启用the OES_texture_float extension。