javascript - WebGL2中浮点纹理的线性过滤

Question

我正在尝试在 WebGL2 中处理浮点纹理。我这样初始化纹理:

function textureFromFloat32Array( gl, arr, w, h ){
    //https://developer.mozilla.org/en-US/docs/Web/API/OES_texture_float_linear
    gl.getExtension('OES_texture_float');        // just in case
    gl.getExtension('OES_texture_float_linear'); // do I need this with WebGL2
    const texture = gl.createTexture();
    gl.bindTexture( gl.TEXTURE_2D, texture);
    // see https://www.khronos.org/registry/webgl/specs/latest/2.0/#TEXTURE_TYPES_FORMATS_FROM_DOM_ELEMENTS_TABLE
    gl.texImage2D(gl.TEXTURE_2D, 0, gl.R32F, w, h, 0, gl.RED, gl.FLOAT, arr);
    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.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST); // this works
    //gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
    return texture;
}

在 Firefox 55.0.2(64 位)中，出现以下错误:

错误:WebGL 警告:drawElements:目标 0x0de1 的事件纹理 0 是“不完整的”，根据 GLES 2.0.24 $3.8.2 将呈现为 RGBA(0,0,0,1) : 因为缩小或放大过滤不是 NEAREST 或 NEAREST_MIPMAP_NEAREST，并且纹理的格式必须是“texture-filterable”。

使用 gl.NEAREST 它可以工作，但我需要线性插值。

在 Chorme 60.0.3112.101 中，它可以与 gl.getExtension('OES_texture_float_linear'); 一起使用，但我想在使用 WebGL2 时我不需要它。

Answer 1

甚至 WebGL2 也需要 OES_texture_float_linear。

WebGL2 默认支持浮点纹理，但默认不支持过滤或渲染它们。这两个都是扩展。查看tables on this page支持哪些纹理格式以及是否可以过滤或渲染它们。

大多数手机不支持过滤浮点纹理，也不支持渲染到浮点纹理。至少截至 2017 年 9 月。

为了能够过滤浮点纹理，您需要检查并启用 OES_texture_float_linear。为了能够渲染到浮点纹理，您需要检查并启用 EXT_color_buffer_float