在我的苹果(M1)iMac(以及iPhone)上,着色器产生的输出与我的英特尔(i5-4300U/Haswell-ULT集成图形控制器)Thinkpad 440(更多信息请参阅 comments )上的输出完全不同.然而,浏览器、Chrome和Safari之间似乎没有什么区别
[编辑]大多数人(朋友和在下面发表 comments 的人)似乎都是苹果版本的,所以只有我和我的两台笔记本电脑显然是英特尔版本的?
这是着色器:
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
resp.x0
的z坐标分别为0
.1
,所以distance(x, x0)
和distance(x, vec3(-0.46875, -0.5, 300))
从来都不是小的,这是我唯一用作除数的值.我还改变了一些常数,所以现在所有的数字都有精确的二进制表示.