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

Question

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

Answer 1

诚然，我还没有真正尝试直接使用浮点数来创建纹理，但我已经使用 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);

Answer 2

要在 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
}

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

How can I use WebGL to create an RGBA texture based off of floating points?

html

javascript

floating-point

tiff

webgl