深入浅出学 Shader，从棋盘格开始学起！

2023-09-28 03:40:54

使用组合方式在 Three.js 着色器中实现棋盘格效果

在 Three.js 中，使用着色器进行图形渲染可以实现各种令人惊叹的效果。本文将指导你如何利用组合方式在片元着色器中创建棋盘格效果。我们还将深入探讨一些重要的概念，如 abs 取绝对值、aastep 抗锯齿和 smoothstep 平滑插值。

使用组合方式实现棋盘格效果

棋盘格效果是通过交替排列两种颜色来实现的。在 Three.js 中，我们可以使用 mix() 组合方式来实现这种效果。该函数根据提供的因子将两种颜色混合在一起。因子值在 0 到 1 之间，0 表示纯色 1，1 表示纯色 2，介于两者之间的值表示颜色混合。

代码示例：

void main() {
  // 定义两种颜色
  vec3 color1 = vec3(0.0, 0.0, 0.0); // 黑色
  vec3 color2 = vec3(1.0, 1.0, 1.0); // 白色

  // 定义混合因子（基于 vUv 纹理坐标的 X 分量）
  float factor = abs(sin(vUv.x * PI * 2.0));

  // 使用 mix() 函数混合颜色
  vec3 mixedColor = mix(color1, color2, factor);

  // 设置片段颜色
  gl_FragColor = vec4(mixedColor, 1.0);
}

abs 取绝对值的操作

abs() 函数用于取一个数的绝对值。绝对值是指该数的正值。例如，abs(-1) 返回 1。abs() 函数在计算距离、角度和其他需要正数的场景中非常有用。

aastep 抗锯齿

aastep() 函数用于抗锯齿。抗锯齿是一种消除锯齿边缘的技术，这些边缘通常出现在图像中的直线或曲线上。aastep() 函数根据给定的值将颜色从一种颜色平滑过渡到另一种颜色。

代码示例：

// 定义两种颜色
vec3 color1 = vec3(0.0, 0.0, 0.0); // 黑色
vec3 color2 = vec3(1.0, 1.0, 1.0); // 白色

// 使用 aastep() 函数进行抗锯齿
vec3 mixedColor = aastep(0.5, 0.75, vUv.x);

// 设置片段颜色
gl_FragColor = vec4(mixedColor, 1.0);

smoothstep 平滑插值

smoothstep() 函数用于平滑插值。平滑插值是一种在两个值之间生成新值的平滑过渡的技术。smoothstep() 函数根据给定的值将颜色从一种颜色平滑过渡到另一种颜色，与 aastep() 函数不同，它提供了一个更平滑的过渡。

代码示例：

// 定义两种颜色
vec3 color1 = vec3(0.0, 0.0, 0.0); // 黑色
vec3 color2 = vec3(1.0, 1.0, 1.0); // 白色

// 使用 smoothstep() 函数进行平滑插值
vec3 mixedColor = smoothstep(0.5, 0.75, vUv.x);

// 设置片段颜色
gl_FragColor = vec4(mixedColor, 1.0);