javascript - 某些英特尔集成图形处理器中的 WebGL 故障

Question

我的情况是，着色器在我的 Apple (M1) iMac(以及 iPhone)上产生的输出与在我的 Intel(i5-4300U/Haswell-ULT 集成图形 Controller )Thinkpad 440 上产生的输出完全不同(更多信息见评论)。然而，浏览器、Chrome 和 Safari 之间似乎没有区别
分别Chrome 和 GNOME Web 在 iMac 上分别生成相同的图像。笔记本电脑。我的 Intel Thinkpad 13 Chromebook 也显示 Intel 版本(显然无法测试除 Chrome 之外的其他浏览器)。这可能是什么原因？
[编辑] 大多数人(在下面评论的 friend 和人)似乎都获得了 Apple 版本，所以只有我和我的两台笔记本电脑显然获得了 Intel 版本？
这是着色器:

  const gl = document.querySelector("canvas").getContext("webgl");
  gl.canvas.width = gl.canvas.height = 512
  gl.viewport(0, 0, 512, 512);
  const programInfo = twgl.createProgramInfo(gl, ["vs", "fs"]);
  const bufferInfo = twgl.createBufferInfoFromArrays(gl, {
    a_Position: {
      numComponents: 2,
      data: [-1, -1, -1, 3, 3, -1]
    },
  });
  gl.useProgram(programInfo.program);
  twgl.setBuffersAndAttributes(gl, programInfo, bufferInfo);
  twgl.drawBufferInfo(gl, bufferInfo);

<script src="https://twgljs.org/dist/4.x/twgl-full.min.js"></script>
<script id="vs" type="x-shader/x-vertex">
  attribute vec4 a_Position;

  varying vec2 v_Position;
  varying vec2 v_TexCoord;

  void main() {
      v_Position = a_Position.xy;
      v_TexCoord = a_Position.xy / 2.0 + 0.5;
      gl_Position = a_Position;
  }
</script>
<script id="fs" type="x-shader/x-vertex">
  precision highp float;

  varying vec2 v_Position;
  varying vec2 v_TexCoord;

  vec2 compMult(vec2 u, vec2 v) {
    return vec2(u.x * v.x - u.y * v.y, u.x * v.y + u.y * v.x);
  }

  vec2 G(vec3 x) {
    float lenx = length(x);
    float ang = 350.0 * lenx;
    return vec2(cos(ang), sin(ang)) / lenx;

  }

  void main() {
    gl_FragColor.a = 1.0;
    vec3 x0 = vec3(v_TexCoord, 1);
    vec2 amplitude;
    for(int i = 0; i < 10; i++) {
      for(int j = 0; j < 10; j++) {
        vec2 pos = 0.05 + vec2(i, j) / 10.0;
        vec3 x = vec3(0.4 + 0.2 * pos, 0);
        float disx0x = distance(x0, x);
        amplitude += compMult(
          G(x - vec3(-0.4765625, -0.671875, 300)),
          compMult(
            vec2(-1.0 / disx0x, 350.0),
            G(x - x0) / disx0x
          )
        );
      }
    }
    gl_FragColor.r = length(amplitude) / 10.0;
  }
</script>
<canvas></canvas>

以下是不同的输出:

(苹果)

(英特尔)
[编辑] 我想我已经很接近了，请看以下片段:

  const gl = document.querySelector("canvas").getContext("webgl");
  gl.canvas.width = gl.canvas.height = 512
  gl.viewport(0, 0, 512, 512);
  const programInfo = twgl.createProgramInfo(gl, ["vs", "fs"]);
  const bufferInfo = twgl.createBufferInfoFromArrays(gl, {
    a_Position: {
      numComponents: 2,
      data: [-1, -1, -1, 3, 3, -1]
    },
  });
  gl.useProgram(programInfo.program);
  twgl.setBuffersAndAttributes(gl, programInfo, bufferInfo);
  twgl.drawBufferInfo(gl, bufferInfo);

<script src="https://twgljs.org/dist/4.x/twgl-full.min.js"></script>
<script id="vs" type="x-shader/x-vertex">
  attribute vec4 a_Position;

  varying vec2 v_Position;
  varying vec2 v_TexCoord;

  void main() {
      v_Position = a_Position.xy;
      v_TexCoord = a_Position.xy / 2.0 + 0.5;
      gl_Position = a_Position;
  }
</script>
<script id="fs" type="x-shader/x-vertex">
  precision highp float;

  varying vec2 v_Position;
  varying vec2 v_TexCoord;

  vec2 compMult(vec2 u, vec2 v) {
    return vec2(u.x * v.x - u.y * v.y, u.x * v.y + u.y * v.x);
  }

  vec2 G(vec3 x) {
    float lenx = length(x);
    float ang = 350.0 * lenx;
    return vec2(cos(ang), sin(ang)) / lenx;

  }

  void main() {
    gl_FragColor.a = 1.0;
    vec3 x0 = vec3(v_TexCoord, 1);
    vec2 pos = floor(8.0 * v_TexCoord) / 8.0;
    vec3 x = vec3(0.375 + 0.25 * pos, 0);
    float disx0x = distance(x0, x);
    vec2 amplitude = compMult(
      G(x - vec3(-0.46875, -0.5, 300.0)),
      compMult(
        vec2(-1.0 / disx0x, 350.0),
        G(x - x0)
      )
    );
    gl_FragColor.rgb = vec3(0.5 + amplitude, 0.5);
  }
</script>
<canvas></canvas>

这是我的英特尔机器上的样子:

我认为，通过查看算法(甚至不再有循环)，很明显灰色区域不应该是灰色的，而是类似于其他瓷砖。另请注意，我从不除以小数，x分别x0 z 坐标为 0分别1 , 所以 distance(x, x0)和 distance(x, vec3(-0.46875, -0.5, 300))永远不会小，这是我用作分隔符的唯一值。我还更改了一些常量，以便现在所有数字都具有精确的二进制表示。

Answer 1

这只是 sin 的问题和 cos英特尔系统上的功能。该参数似乎超出了定义的值范围。允许的值范围取决于 vendor 。这可以通过 mod 解决。功能。 ( 4.0*acos(0.0) 是 2*PI)float ang = 350.0 * lenx;

float ang = mod(350.0*lenx, 4.0*acos(0.0));

  const gl = document.querySelector("canvas").getContext("webgl");
  gl.canvas.width = gl.canvas.height = 512
  gl.viewport(0, 0, 512, 512);
  const programInfo = twgl.createProgramInfo(gl, ["vs", "fs"]);
  const bufferInfo = twgl.createBufferInfoFromArrays(gl, {
    a_Position: {
      numComponents: 2,
      data: [-1, -1, -1, 3, 3, -1]
    },
  });
  gl.useProgram(programInfo.program);
  twgl.setBuffersAndAttributes(gl, programInfo, bufferInfo);
  twgl.drawBufferInfo(gl, bufferInfo);

<script src="https://twgljs.org/dist/4.x/twgl-full.min.js"></script>
<script id="vs" type="x-shader/x-vertex">
  attribute vec4 a_Position;

  varying vec2 v_Position;
  varying vec2 v_TexCoord;

  void main() {
      v_Position = a_Position.xy;
      v_TexCoord = a_Position.xy / 2.0 + 0.5;
      gl_Position = a_Position;
  }
</script>
<script id="fs" type="x-shader/x-vertex">
  precision highp float;

  varying vec2 v_Position;
  varying vec2 v_TexCoord;

  vec2 compMult(vec2 u, vec2 v) {
    return vec2(u.x * v.x - u.y * v.y, u.x * v.y + u.y * v.x);
  }

  vec2 G(vec3 x) {
    float lenx = length(x);
    float ang = mod(350.0*lenx, 4.0*acos(0.0));
    return vec2(cos(ang), sin(ang)) / lenx;

  }

  void main() {
    gl_FragColor.a = 1.0;
    vec3 x0 = vec3(v_TexCoord, 1);
    vec2 amplitude;
    for(int i = 0; i < 10; i++) {
      for(int j = 0; j < 10; j++) {
        vec2 pos = 0.05 + vec2(i, j) / 10.0;
        vec3 x = vec3(0.4 + 0.2 * pos, 0);
        float disx0x = distance(x0, x);
        amplitude += compMult(
          G(x - vec3(-0.4765625, -0.671875, 300)),
          compMult(
            vec2(-1.0 / disx0x, 350.0),
            G(x - x0) / disx0x
          )
        );
      }
    }
    gl_FragColor.r = length(amplitude) / 10.0;
  }
</script>
<canvas></canvas>