GLSL从入门到精通之圆圈和动画

首先让我们使用 Shadertoy进行更多练习，然后再绘制第一个 2D 形状。创建一个新的着色器并将起始代码替换为以下内容：

#version 300 es

void main() {
  vec2 uv = gl_FragCoord.xy / vec2(400.0, 400.0) - vec2(0.5, 0.5);

  if (length(uv) < 0.5) {
    gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
  } else {
    gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);
  }
}

在这个着色器中，我们首先定义了一个叫做uv的变量，它代表了片元相对于片段着色器片段范围的归一化坐标。然后，我们检查uv的长度是否小于0.5。如果它的长度小于0.5，我们把片元着色为红色。否则，我们把片元着色为黑色。

现在让我们把这个着色器修改一下，使其绘制一个圆圈：

#version 300 es

void main() {
  vec2 uv = gl_FragCoord.xy / vec2(400.0, 400.0) - vec2(0.5, 0.5);

  float dist = length(uv);
  if (dist < 0.5) {
    gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
  } else {
    gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);
  }
}

在这个着色器中，我们使用了length()函数计算uv的长度。然后，我们检查这个长度是否小于0.5。如果长度小于0.5，我们把片元着色为红色。否则，我们把片元着色为黑色。

现在让我们把这个着色器修改一下，使其绘制一个动画的圆圈：

#version 300 es

uniform float time;

void main() {
  vec2 uv = gl_FragCoord.xy / vec2(400.0, 400.0) - vec2(0.5, 0.5);

  float dist = length(uv);
  if (dist < sin(time) * 0.5) {
    gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
  } else {
    gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);
  }
}

在这个着色器中，我们增加了一个叫做time的uniform变量。这个变量的值是由着色器程序的代码在运行时设置的。我们使用sin()函数乘以0.5来计算一个值，该值随时间变化。然后，我们检查这个值是否小于dist。如果小于，我们把片元着色为红色。否则，我们把片元着色为黑色。

现在让我们把这个着色器修改一下，使其绘制一个有颜色的动画的圆圈：

#version 300 es

uniform float time;

void main() {
  vec2 uv = gl_FragCoord.xy / vec2(400.0, 400.0) - vec2(0.5, 0.5);

  float dist = length(uv);
  float r = 0.0;
  float g = 0.0;
  float b = 0.0;
  if (dist < sin(time) * 0.5) {
    r = 1.0;
    g = 0.0;
    b = 0.0;
  } else {
    r = 0.0;
    g = 0.0;
    b = 0.0;
  }
  gl_FragColor = vec4(r, g, b, 1.0);
}

在这个着色器中，我们增加了三个叫做r、g和b的变量。这些变量的值决定了片元的颜色。我们使用sin()函数乘以0.5来计算一个值，该值随时间变化。然后，我们检查这个值是否小于dist。如果小于，我们把片元着色为红色。否则，我们把片元着色为黑色。

现在让我们把这个着色器修改一下，使其绘制一个有颜色的动画的圆圈，这个圆圈还会移动：

#version 300 es

uniform float time;

void main() {
  vec2 uv = gl_FragCoord.xy / vec2(400.0, 400.0) - vec2(0.5, 0.5);

  float dist = length(uv);
  float r = 0.0;
  float g = 0.0;
  float b = 0.0;
  float x = sin(time) * 0.5;
  float y = cos(time) * 0.5;
  if (dist < sin(time) * 0.5) {
    r = 1.0;
    g = 0.0;
    b = 0.0;
  } else {
    r = 0.0;
    g = 0.0;
    b = 0.0;
  }
  gl_FragColor = vec4(r, g, b, 1.0);
}

在这个着色器中，我们增加了一个叫做x和y的变量。这些变量的值决定了圆圈的中心位置。我们使用sin()函数和cos()函数乘以0.5来计算这些值，这些值随时间变化。然后，我们检查dist是否小于sin(time) * 0.5。如果小于，我们把片元着色为红色。否则，我们把片元着色为黑色。

现在你已经学会了如何使用 GLSL 来绘制圆圈和动画。你可以使用这些知识来创建你自己的着色器程序。