着色器之美：ShaderJoy 上旋转的分层齿轮

在计算机图形领域，着色器是一种强大的工具，它允许程序员直接操纵图形处理单元（GPU）的渲染过程。ShaderJoy 作为一款交互式着色器平台，为开发者们提供了一个绝佳的游乐场，让他们可以探索着色器的无限可能性。今天，我们就将利用 ShaderJoy，打造一个旋转的分层齿轮效果，体验着色器的魅力。

入门

首先，让我们从一个简单的圆开始。在 ShaderJoy 中，我们可以通过以下 GLSL 代码片段绘制一个圆：

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

这段代码计算了 uv 坐标和圆心的距离，如果距离小于圆的半径（0.5），则绘制一个红色的像素。

分层齿轮

为了创建分层齿轮的效果，我们可以重复绘制多个大小不同的圆，并在每个圆上应用不同的旋转。具体来说，我们可以使用以下代码：

for (int i = 0; i < numGears; i++) {
  float angle = i * gearAngle;
  float gearRadius = 0.5 * (1.0 - i / numGears);
  float dist = distance(uv, vec2(0.5) + vec2(cos(angle), sin(angle)) * gearRadius);
  if (dist < gearRadius) {
    gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
  }
}

在这段代码中，我们使用一个 for 循环迭代每个齿轮。对于每个齿轮，我们计算它的旋转角度、半径和到圆心的距离。如果距离小于齿轮的半径，则绘制一个红色的像素。

旋转动画

为了让齿轮旋转起来，我们需要修改旋转角度 angle。我们可以通过以下代码实现：

float time = mod(iGlobalTime, 10.0);
float angle = i * gearAngle + time * rotationSpeed;

在这段代码中，我们使用 iGlobalTime 作为时间变量，并对它进行取模运算以确保它在 0 到 10 之间。然后，我们将时间乘以旋转速度，得到每个齿轮的旋转角度。

总结

通过将这些代码片段组合在一起，我们创建了一个旋转的分层齿轮效果，展示了着色器的强大功能和 ShaderJoy 的交互性。通过操纵 GLSL 代码，我们可以实现各种惊人的图形效果，充分发挥我们的创造力。