Question

如果设备支持OES_texture_float，则FLOAT纹理应存储为32位浮点值according to the spec。但是，在某些设备上，看起来纹理存储为半浮动。

以下代码创建包含值Pi的1x1浮点纹理。片段着色器对纹理进行采样，并将结果与32位浮点和Pi的16位浮点（即半浮点）表示进行比较。着色器返回绿色表示32位，红色表示16位。

<!DOCTYPE html>
<html lang="en">
<head></head>
<body>
<canvas width="100" height="100"></canvas>
<script>
    "use strict";
    const canvas = document.getElementsByTagName("canvas")[0];
    const gl = canvas.getContext("webgl");
    if (!gl.getExtension("OES_texture_float")) {
        throw new Error("float textures not supported");
    }
    const program = gl.createProgram();
    function addShader(type, source) {
        const shader = gl.createShader(type);
        gl.shaderSource(shader, source);
        gl.compileShader(shader);
        gl.attachShader(program, shader);
    }
    addShader(gl.VERTEX_SHADER, `
        precision highp float;
        attribute vec2 a_Position;
        attribute vec2 a_TexCoord;
        varying vec2 v_TexCoord;
        void main() {
            gl_Position = vec4(a_Position, 0.0, 1.0);
            v_TexCoord = a_TexCoord;
        }
    `);
    addShader(gl.FRAGMENT_SHADER, `
        precision highp float;
        uniform sampler2D u_Tex;
        void main() {
            float v = texture2D(u_Tex, vec2(0.5)).r;
            gl_FragColor = vec4(
                float(v == 3.140625),   // Pi as float16
                float(v == 3.1415927),  // Pi as float32
                0.0,
                1.0);
        }
    `);
    gl.linkProgram(program);
    gl.useProgram(program);

    function createAttrib(name, data) {
        gl.bindBuffer(gl.ARRAY_BUFFER, gl.createBuffer());
        gl.bufferData(gl.ARRAY_BUFFER, data, gl.STATIC_DRAW);
        const loc = gl.getAttribLocation(program, name);
        gl.enableVertexAttribArray(loc);
        gl.vertexAttribPointer(loc, 2, gl.FLOAT, false, 0, 0);
    }
    createAttrib("a_Position", new Float32Array([-1, -1, 1, -1, -1, 1, -1, 1, 1, -1, 1, 1]));
    createAttrib("a_TexCoord", new Float32Array([0, 0, 1, 0, 0, 1, 0, 1, 1, 0, 1, 1]));

    gl.bindTexture(gl.TEXTURE_2D, gl.createTexture());
    gl.texImage2D(gl.TEXTURE_2D, 0, gl.LUMINANCE, 1, 1, 0, gl.LUMINANCE, gl.FLOAT, new Float32Array([Math.PI]));
    gl.texParameterf(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
    gl.texParameterf(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
    gl.texParameterf(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
    gl.texParameterf(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
    gl.uniform1i(gl.getUniformLocation(program, "u_Tex"), 0);

    gl.drawArrays(gl.TRIANGLES, 0, 6);
</script>
</body>
</html>

可以在此处运行代码：https://jsfiddle.net/a6bfL168/2/

在iPhone 5和iPad Air上进行测试时，两者均显示为绿色。在iPhone 6和iPhone SE上进行测试时，两者都显示为红色。（注意：所有运行iOS 10的设备。）

如果使用不同的值（例如100000）重复此测试，则采样的纹理元素的值为65504，这是半浮点数的最大可表示整数;另一条证据表明纹理存储（或采样）为半浮动。

这是一个错误吗？这会是GPU硬件的限制吗？我是misreading the spec吗？似乎规范的目的不仅仅是接受浮动纹理，而是存储而不是完全精确。

Answer 1

sampler2D类型的默认精度为lowp;尝试更改您的采样器精度：

uniform highp sampler2D u_Tex;

请参见4.7.4（默认精度限定符）部分：

https://www.khronos.org/registry/gles/specs/3.2/GLSL_ES_Specification_3.20.pdf

WebGL：OES_texture_float需要存储为32位浮点数吗？有些设备似乎只存储了一半浮动

1 个答案: