Fragments vs. pixels

一个片段代表了一个像素的某个部分的颜色。在最简单的情况下，片段与像素之间存在1:1的关系，但在进行抗锯齿处理时，这个比例可能会更高。片段着色器是在GPU上运行的程序，用于确定每个片段的颜色

Basics of writing fragment shaders

gl_FragData[0]通常在渲染到具有多个颜色附件的帧缓冲时使用

void main() {
  //Colors are represented by 4 vectors in RGBA order
  gl_FragData[0] = vec4(1, 0, 0, 1);
}

当你只有一个颜色附件时（通常是默认的帧缓冲），你可以直接使用gl_FragColor变量来指定输出到颜色附件的颜色，它实际上是gl_FragData[0]的别名

void main() {
  gl_FragColor = vec4(1, 0, 0, 1);
}

gl_FragCoord

每个片段着色器还会接收一个特殊的输入变量，gl_FragCoord。这是一个vec4类型的变量，返回片段在设备坐标系中的坐标信息。

• gl_FragCoord.xy表示片段相对于缓冲区左上角的单位坐标。其中，y分量表示片段所在的行，x分量表示片段所在的列。
• gl_FragCoord.z表示片段的深度值，单位为[0,1]之间的值，其中0表示最近的z值，而1表示最远的z值。
• gl_FragCoord.w是片段在裁剪坐标系中的齐次坐标的倒数。
  简单来说，gl_FragCoord提供了关于片段在缓冲区中位置和深度的信息。通过使用这些值，你可以在片段着色器中执行各种计算和操作，例如基于位置的颜色插值、深度测试等。

作业

以(256.5,256.5)为圆心，画一个半径128的圆

precision highp float;

#define CIRCLE_COLOR    vec4(1.0, 0.4313, 0.3411, 1.0)
#define OUTSIDE_COLOR   vec4(0.3804, 0.7647, 1.0, 1.0)

void main() {

  //TODO: Replace this with a function that draws a circle at (256.5,256.5) with radius 128
  
  if(distance(gl_FragCoord.y < 256) {
    gl_FragColor = CIRCLE_COLOR;
  } else {
    gl_FragColor = OUTSIDE_COLOR;
  }
}

答案

precision highp float;

#define CIRCLE_COLOR    vec4(1.0, 0.4313, 0.3411, 1.0)
#define OUTSIDE_COLOR   vec4(0.3804, 0.7647, 1.0, 1.0)

void main() {

  //TODO: Replace this with a function that draws a circle at (256.5,256.5) with radius 128
  
  if(distance(gl_FragCoord.xy,vec2(256.5,256.5))<128.0) {
    gl_FragColor = CIRCLE_COLOR;
  } else {
    gl_FragColor = OUTSIDE_COLOR;
  }
}