专用GPU上的Webgl纹理交错闪烁答案

【问题标题】：Webgl texture interlaced flickering on dedicated GPU专用GPU上的Webgl纹理交错闪烁
【发布时间】：2016-07-05 16:26:50
【问题描述】：

我有一个顶点缓冲区对象，其中包含表面对象数组的所有顶点。每个对象可以使用不同的纹理，我的浏览器最多支持 16 个，最多 16 个。我的问题是我在大多数表面上都会出现交错闪烁，而另一些则不会。

这是我的片段着色器：

    precision mediump float;
    varying vec2 texCoord;
    varying float texNum;

    uniform sampler2D texture0;
    uniform sampler2D texture1;
    uniform sampler2D texture2;
    uniform sampler2D texture3;
    uniform sampler2D texture4;
    uniform sampler2D texture5;
    uniform sampler2D texture6;
    uniform sampler2D texture7;
    uniform sampler2D texture8;
    uniform sampler2D texture9;
    uniform sampler2D texture10;
    uniform sampler2D texture11;
    uniform sampler2D texture12;
    uniform sampler2D texture13;
    uniform sampler2D texture14;
    uniform sampler2D texture15;

    void main(void){
        if(texNum == 0.0){
            gl_FragColor = texture2D(texture0,texCoord);
        }else if(texNum == 1.0){
            gl_FragColor = texture2D(texture1,texCoord);
        }else if(texNum == 2.0){
            gl_FragColor = texture2D(texture2,texCoord);
        }else if(texNum == 3.0){
            gl_FragColor = texture2D(texture3,texCoord);
        }else if(texNum == 4.0){
            gl_FragColor = texture2D(texture4,texCoord);
        }else if(texNum == 5.0){
            gl_FragColor = texture2D(texture5,texCoord);
        }else if(texNum == 6.0){
            gl_FragColor = texture2D(texture6,texCoord);
        }else if(texNum == 7.0){
            gl_FragColor = texture2D(texture7,texCoord);
        }else if(texNum == 8.0){
            gl_FragColor = texture2D(texture8,texCoord);
        }else if(texNum == 9.0){
            gl_FragColor = texture2D(texture9,texCoord);
        }else if(texNum == 10.0){
            gl_FragColor = texture2D(texture10,texCoord);
        }else if(texNum == 11.0){
            gl_FragColor = texture2D(texture11,texCoord);
        }else if(texNum == 12.0){
            gl_FragColor = texture2D(texture12,texCoord);
        }else if(texNum == 13.0){
            gl_FragColor = texture2D(texture13,texCoord);
        }else if(texNum == 14.0){
            gl_FragColor = texture2D(texture14,texCoord);
        }else if(texNum == 15.0){
            gl_FragColor = texture2D(texture15,texCoord);
        }

        if(gl_FragColor.a < 0.1) discard;
    }

正在发生的事情的图片：

现在，这就是交易。这在具有 intel hd 集成显卡的机器上完美运行；没有任何闪烁。只有当我使用 gtx 770 专用 gpu 在桌面上运行它时才会发生这种情况。

为什么？怎么样？

【问题讨论】：

尝试使用高精度和/或转换为整数
@LJ 非常感谢你。这并没有解决我的问题，但你给了我一条搜索路径。我将发布我的解决方案。

标签： javascript graphics opengl-es webgl flicker

【解决方案1】：

我找到了解决方案：问题出在浮点相等比较上，由于我的 GPU 的浮点精度裕度误差，大多数情况下导致错误。

我所要做的就是测试我的 texNum 和直接纹理数之间的差异是否小于称为 epsilon 的 0.00001 的误差范围。

在代码中，我把所有的float相等比较都替换了，比如第一个：

if(texNum == 0.0){
    gl_FragColor = texture2D(texture0,texCoord);
}

为此：

if((texNum - 0.0) < 0.00001){
    gl_FragColor = texture2D(texture0,texCoord);
}

【讨论】：