01 片元与数据

屏幕坐标与分辨率

像素位置 ÷ 分辨率 = 0～1 的屏幕坐标。

像素位置…, …

每一格的像素数24

1100

每个像素运行一次拖动数字，或直接改代码

void main() {
  vec2 pixel = floor(gl_FragCoord.xy / 24.000) * 24.000;
  vec2 screenUv = pixel / uResolution;
  vec3 color = vec3(screenUv, 0.3);
  gl_FragColor = vec4(color, 1.0);
}

void main() {
  vec2 pixel = floor(gl_FragCoord.xy / 24.000) * 24.000;
  vec2 screenUv = pixel / uResolution;
  vec3 color = vec3(screenUv, 0.3);
  gl_FragColor = vec4(color, 1.0);
}

JS 这一侧gl.uniform2f(uResolution, …, …)

gl_FragCoord 是像素位置；除以 uResolution 得到 0～1 的屏幕坐标。

试一试

把每格像素数调到 1，每个像素都不同
移动指针，比较像素位置和 0～1 坐标