WebGL 着色器闪烁

Question

我是 WebGL 和着色器的初学者，所以如果你发现我的代码有升级/优化，我很乐意看到它们。

我的问题：

我在两个单独的页面上有两个 WebGL 实例（带有窗帘js），一个正在工作，但另一个没有。 它们基本上具有相同的代码。 唯一不同的是 output canvas 的大小。 对于有问题的，它是图像的大小（不是整个页面的宽度和高度），而对于工作的，它会占用整个视口。

The bugged one is flickery, like a stroboscopic white effect (see here: https://youtu.be/Yxkmm0HgNlE ) but only on iOS devices (working fine on windows, macos, android, but not on ipad and iphone).

我已经尝试过的事情：

• 低、中、高
• gl.flunch()
• 更改向量位置的“平移”值

没有任何效果。

这是着色器：

顶点

    #ifdef GL_ES
    precision highp float;
    #endif

    attribute vec3 aVertexPosition;
    attribute vec2 aTextureCoord;

    uniform mat4 uMVMatrix;
    uniform mat4 uPMatrix;
    uniform float uTime;
    uniform float uMouseMoveStrength;
    uniform vec2 uMousePosition;

    uniform mat4 uTextureMatrix0;

    varying vec3 vVertexPosition;
    varying vec2 vTextureCoord;

    void main() {

      vec3 vertexPosition = aVertexPosition;

              float distanceFromMouse = distance(uMousePosition, vec2(vertexPosition.x, vertexPosition.y));

              float waveSinusoid = cos(5.0 * (distanceFromMouse - (uTime / 75.0)));

              float distanceStrength = (0.4 / (distanceFromMouse + 0.4));

              float distortionEffect = distanceStrength * waveSinusoid * uMouseMoveStrength;

              vertexPosition.z +=  distortionEffect / 30.0;
              vertexPosition.x +=  (distortionEffect / 10.0 * (uMousePosition.x - vertexPosition.x));
              vertexPosition.y +=  distortionEffect / 30.0 * (uMousePosition.y - vertexPosition.y);
            gl_Position = uPMatrix * uMVMatrix * vec4(vertexPosition, 1.05);

            vTextureCoord = (uTextureMatrix0 * vec4(aTextureCoord, 0.0, 1.0)).xy;
            vVertexPosition = vertexPosition;
    }

分段：

      #ifdef GL_ES
      precision highp float;
      #endif

      varying vec3 vVertexPosition;
      varying vec2 vTextureCoord;

      uniform sampler2D uSampler0;
      void main() {

        vec2 textureCoord = vTextureCoord;

        gl_FragColor = texture2D(uSampler0, textureCoord);
      }