我遇到了这样的情况：一个着色器在我的苹果（M1）iMac（以及iPhone）上产生完全不同的输出结果，而在我的Intel（i5-4300U/Haswell-ULT集成图形控制器）Thinkpad 440（更多信息请看评论）上则没有任何区别。然而，在浏览器方面，Chrome和Safari、Chrome和GNOME Web在iMac或笔记本电脑上产生相同的图像。我的Intel Thinkpad 13 Chromebook也显示了Intel版本（显然无法测试除Chrome之外的其他浏览器）。这可能是什么原因？
[编辑] 大多数人（朋友和下面评论的人）似乎得到了苹果版本，所以只有我和我的两个笔记本电脑显然得到了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>以下是不同的输出结果：
(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 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>这是在我的Intel机器上的样子:
从算法上看（甚至没有循环），我认为很明显灰色区域不应该是灰色的，而应该和其他瓷砖相似。请注意，我从不除以小数，x 和 x0 的z坐标分别为0和1，因此distance(x, x0)和distance(x, vec3(-0.46875, -0.5, 300))永远不会很小，这些都是我用作分母的唯一值。我还更改了一些常量，以便所有数字都具有精确的二进制表示。
float ang = 350.0 * lenx;更改为float ang = 300.0 * lenx;，你就会明白我的意思了。 - Rabbid76