如何将 float 1 组件纹理发送到 GPU？

Question

在 WebGL 中，我尝试将 float 1 组件纹理发送到 GPU：

var array = new Float32Array(4096*4096);
// ... read array from file 
var float_texture_ext = gl.getExtension('OES_texture_float');
var texture = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, texture);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
gl.texImage2D(gl.TEXTURE_2D, 0, 4096, 4096, 0, gl.ALPHA, gl.ALPHA, gl.FLOAT, array);

但它不起作用。在我 PC 上的 Chrome 中，我收到以下警告：

WebGL: INVALID_OPERATION: texImage2D: incompatible format and internalformat
[.WebGLRenderingContext-1A49BCD8]RENDER WARNING: texture bound to texture unit 0 is not renderable. It maybe non-power-of-2 and have incompatible texture filtering.

我也尝试过 gl.RGBA、gl.RGBA 但得到了相同的结果。

我该怎么做？

Answer 1

您对gl.texImage2D 的论点有问题。这是

 gl.texImage2D(target, level, internalFormat, width, height,
               border, format, type, data);

还应该检查获得浮点扩展的结果，因为很多手机和平板电脑不支持它们，所以你至少应该告诉用户它不会工作。

var ext = gl.getExtension("OES_texture_float");
if (!ext) {
   alert("This device does not support floating point textures");
}

而且，如果您希望 LINEAR 使用浮点纹理进行过滤，您也需要启用它。

var ext = gl.getExtension("OES_texture_float_linear");
if (!ext) {
   alert("This device can not filter floating point textures");
}

请注意，目前（2015 年 9 月）很少有流行的手机支持对浮点纹理进行过滤。