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纹理？

2 个答案: