揭秘Three.js Shader片元着色器之旅：从棋盘格到抗锯齿与平滑插值

2023-01-18 00:07:35

踏上 Three.js 片元着色器的奇妙旅程：从棋盘格到抗锯齿与平滑插值

欢迎来到 Three.js 片元着色器之旅，这是一次探索像素着色器神奇世界的冒险之旅。在本篇博客中，我们将逐步揭秘一些最常用的技术，它们将使你在创造引人入胜的视觉效果时如虎添翼。

1. 棋盘格：黑白交织的秘密

首先，我们将踏入一个黑白相间的棋盘格世界。为了实现这一效果，我们需要调用mod函数，它可以返回一个数字除以另一个数字后的余数。通过比较这个余数是否为偶数，我们可以将像素着色为黑色或白色，从而形成棋盘格图案。

uniform vec2 u_resolution;
void main() {
  vec2 uv = gl_FragCoord.xy / u_resolution;
  float cellSize = 0.1;
  float gridX = floor(uv.x / cellSize);
  float gridY = floor(uv.y / cellSize);
  float isEvenX = mod(gridX, 2.0);
  float isEvenY = mod(gridY, 2.0);
  vec3 color;
  if (isEvenX == isEvenY) {
    color = vec3(0.0, 0.0, 0.0);
  } else {
    color = vec3(1.0, 1.0, 1.0);
  }
  gl_FragColor = vec4(color, 1.0);
}

2. 绝对值：探索距离的奥秘

接下来，让我们深入绝对值的世界。绝对值函数abs可以将任何数字转换为其正值。在这个片元着色器中，我们将使用绝对值来计算一个点与屏幕中心之间的距离。距离越远，像素就越透明，从而创造出一种发散效果。

uniform float u_time;
void main() {
  vec2 uv = gl_FragCoord.xy / u_resolution;
  float dist = abs(uv.x - 0.5) + abs(uv.y - 0.5);
  float opacity = 1.0 - dist;
  gl_FragColor = vec4(vec3(0.0, 0.0, 0.0), opacity);
}

3. 抗锯齿：消除锯齿边缘

锯齿边缘是计算机图形中的一个常见问题，它会使边缘呈现出粗糙的阶梯状外观。为了解决这个问题，我们将引入aastep函数。这个函数可以平滑两个值的过渡，从而消除锯齿边缘。

uniform vec2 u_resolution;
void main() {
  vec2 uv = gl_FragCoord.xy / u_resolution;
  float dist = aastep(0.499, 0.501, uv.x);
  gl_FragColor = vec4(vec3(0.0, 0.0, 0.0), dist);
}

4. 平滑插值：打造细腻渐变

最后，让我们探索平滑插值的神奇之处。smoothstep函数可以产生比aastep函数更平滑的过渡。这非常适合创建微妙的渐变和柔和的阴影效果。

uniform vec2 u_resolution;
void main() {
  vec2 uv = gl_FragCoord.xy / u_resolution;
  float dist = smoothstep(0.499, 0.501, uv.x);
  gl_FragColor = vec4(vec3(0.0, 0.0, 0.0), dist);
}