坐标绘制

• fract() 函数用于计算一个浮点数的小数部分
• fwidth() 函数用于计算一个浮点数的纹素宽度
• 纹理宽度。纹理宽度是计算机图形学中的一个重要概念，用于描述一个像素在其位置上的邻域大小。通过计算纹素宽度，可以在着色器中实现边缘检测、模糊效果等特殊视觉效果。在OpenGL等渲染系统中，可以使用 fwidth 函数来获取纹素宽度，并根据需要进行处理。

画个坐标系

vec3 NumberPlane(vec2 uv) {
  vec3 color = vec3(0.0);
  vec2 cell = fract(uv);
  if (cell.x <= fwidth(uv.x)) {
    color += vec3(1.0);
  }
  if (cell.y <= fwidth(uv.y)) {
    color += vec3(1.0);
  }
  if (abs(uv.y) < fwidth(uv.y)) {
    color = vec3(1., 0., 0.);
  }  
  if (abs(uv.x) < fwidth(uv.x)) {
    color = vec3(0., 1., 0.);
  }  
  return color;
}

void mainImage(out vec4 fragColor, in vec2 fragCoord) {
  vec2 uv = 3.0 * (2.0 * fragCoord - iResolution.xy) / min(iResolution.x,iResolution.y) ;
  vec3 color = NumberPlane(uv);
  fragColor = vec4(color, 1.0);
}

优化一下

vec3 Grid(in vec2 uv){
  vec3 color = vec3(0.);
  vec2 fraction = fract(uv);
  if (abs(uv.x) <= fwidth(uv.x)) {
    color.g = 1.;
  } else if (abs(uv.y) <= fwidth(uv.y)) {
    color.r = 1.;
  } else if (fraction.x < 2. * fwidth(uv.x) || fraction.y < 2. * fwidth(uv.y)) {
    color = vec3(1.);
  }
  return color;
}

vec2 fixUV(in vec2 c){
  return 3. * ( 2. * c - iResolution.xy) / min (iResolution.x, iResolution.y);
}

void mainImage(out vec4 fragColor, in vec2 fragCoord){
  vec2 uv = fixUV(fragCoord);
  vec3 color = Grid(uv);
  fragColor = vec4(color, 1.0);
}