Question

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

我的问题：

我在两个单独的页面上有两个WebGL实例（带有windowsjs），一个正在工作，但另一个不在。它们基本上具有相同的代码。唯一不同的是输出画布的大小。对于错误的图片，它是图像的大小（不是整个页面的宽度和高度），对于有效的图片，它是整个视口。

臭虫是闪烁的，就像频闪的白色效果（请参见https://youtu.be/Yxkmm0HgNlE），但只能在iOS设备上使用（在Windows，macos，android上可以正常工作，但在ipad和iphone上不能正常工作）。 >

我已经尝试过的事情：

低，中，高
gl.flutch（）
更改向量位置的“翻译”值

什么都没有。

这里是着色器：

顶点

    #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);
      }

WebGL着色器闪烁

0 个答案: