第 19 课：Tile Pattern

实现：处理器在实际的扫每一个像素，思考不能从uv开始，而是从“每个像素就是一个线程”开始，在某个像素，我希望它画画，希望它执行pattern代码，那么超出的uv值就缺乏意义，我现在只是希望在我定义的grid中，在对应位置的像素/线程上调用pattern代码并给出预期的输出

实现

uniform vec2 iResolution;

float pattern(vec2 uv) {
  uv = uv * 2.0 - 1.0;
  float t = pow(uv.x * uv.x, 0.3) + pow(uv.y * uv.y, 0.3) - 1.0;
  return step(0.0, t) * t * 10.0 + step(0.2, t);
}

void main() {
  // Normalized pixel coordinates (from 0 to 1)
  vec2 uv = gl_FragCoord.xy / iResolution.xy;
  float columns = 5.0;
  float rows    = 3.0;
  vec2 repeatedUV = fract(uv * vec2(columns, rows));

  gl_FragColor = vec4(pattern(repeatedUV), 0.0, 0.0, 1.0);
}

复盘笔记

• 处理器在实际的扫每一个像素，思考不能从uv开始，而是从“每个像素就是一个线程”开始，在某个像素，我希望它画画，希望它执行pattern代码，那么超出的uv值就缺乏意义，我现在只是希望在我定义的grid中，在对应位置的像素/线程上调用pattern代码并给出预期的输出