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位)中，它给我以下错误：

Error: WebGL warning: drawElements: Active texture 0 for target 0x0de1 is 'incomplete', and will be rendered as RGBA(0,0,0,1), as per the GLES 2.0.24 $3.8.2: Because minification or magnification filtering is not NEAREST or NEAREST_MIPMAP_NEAREST, and the texture's format must be "texture-filterable".

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

在Chorme60.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