第 20 课：Fract - Grid

实现：我的设计则是之前作业的合集：将uv按照想要的比例放大，并用fract检查相对坐标，获取repeateduv, 并写了一个方法描述图案，最后计算了marginscale, 根据需要的像素，在屏幕上的大小，乘以固定方向的比例，再丢进图案方法。

实现

uniform vec2 iResolution;

float stepUnion(vec2 uv, vec2 margin){
  float r0 = 1.0-step(uv.x, margin.x);
  float r3 = 1.0-step(uv.y, margin.y);

  return r0* r3;
}

void main() {
  vec2 fragPos = gl_FragCoord.xy;
  vec2 uv = fragPos/iResolution;

  vec2 repeatedUV = fract(uv * vec2(8.0,3.0));


  vec2 marginScale = 10.0/iResolution*vec2(8.0,3.0);
  gl_FragColor = vec4(stepUnion(repeatedUV, marginScale), 0.0, 0.0, 1.0);
}

复盘笔记

• 我的设计则是之前作业的合集：将uv按照想要的比例放大，并用fract检查相对坐标，获取repeateduv, 并写了一个方法描述图案，最后计算了marginscale, 根据需要的像素，在屏幕上的大小，乘以固定方向的比例，再丢进图案方法。
• ok, 复述下他的设计：我设定了一个格子在某个轴上的大小：50+10，然后我计算该线程（像素坐标）在第几个格子上（这表达不准确，因为还带了小数，这个小数是像素的相对位置），然后就计算哪些地方应该亮，哪些地方不应该亮：通过用step计算margin的相对位置，并和像素的相对位置比较，确立了亮的关系。y轴再做了一遍，这样以交集的形式合并了效果
• <2025/05/10>
• ==记录时间: 5月14日 2025, 01:21 下午==