手把手带你开启探索之旅，探秘 Three.js Shader 的迷人世界

2022-12-18 11:43:39

在 Three.js 中使用顶点 UV 纹理坐标和 GLSL 内置函数创造视觉效果

引言

Three.js 是一个流行的 JavaScript 库，用于在 Web 浏览器中创建和显示 3D 图形。它提供了丰富的功能，包括着色器编程，这是一种强大的工具，用于自定义 3D 模型的外观和行为。顶点 UV 纹理坐标和 GLSL 内置函数是着色器编程中的两个关键概念，它们共同作用可以帮助我们创造令人惊叹的视觉效果。

顶点 UV 纹理坐标

顶点 UV 纹理坐标是表示网格顶点纹理坐标的数字。它们通常以 0 到 1 之间的数值表示，对应于纹理图像的相对位置。利用这些坐标，我们可以根据顶点的空间位置对纹理进行各种操作，从而实现一系列酷炫的视觉效果。

例如，我们可以使用顶点 UV 纹理坐标来：

扭曲纹理： 通过改变顶点的 UV 纹理坐标，我们可以使纹理图案扭曲或变形。
偏移纹理： 通过移动顶点的 UV 纹理坐标，我们可以使纹理相对于网格偏移或移动。
重复纹理： 通过重复顶点的 UV 纹理坐标，我们可以创建重复的纹理图案。

GLSL 内置函数

GLSL（图形着色器语言）内建函数为我们提供了丰富的工具库，这些函数可以帮助我们处理各种数据，实现各种各样的视觉效果。这些函数涵盖了数学、向量、矩阵、颜色、纹理采样等各个方面，为我们的着色器编程提供了强大的支持。

例如，我们可以使用 GLSL 内置函数来：

进行数学运算： 执行加法、减法、乘法、除法、三角函数等数学运算。
操作向量和矩阵： 创建、转换和操作向量和矩阵。
变换颜色： 混合、转换和调整颜色值。
采样纹理： 从纹理图像中获取纹理值。

结合使用

顶点 UV 纹理坐标和 GLSL 内置函数可以结合使用，实现各种各样的视觉效果。让我们看几个示例：

示例 1：扭曲纹理

// 片段着色器
void main() {
  // 获取顶点的 UV 纹理坐标
  vec2 uv = vUv;

  // 计算扭曲向量
  float angle = 0.5 * PI;
  float distortion = sin(angle * uv.x) * cos(angle * uv.y);

  // 将扭曲向量应用于 UV 纹理坐标
  uv += distortion * 0.1;

  // 采样扭曲后的纹理
  vec4 color = texture2D(uTexture, uv);

  // 输出颜色
  gl_FragColor = color;
}

示例 2：色彩偏移

// 顶点着色器
void main() {
  // 获取顶点的颜色
  vec3 color = vColor;

  // 计算色彩偏移向量
  vec3 offset = vec3(0.1, 0.2, 0.3);

  // 将色彩偏移向量应用于顶点颜色
  color += offset;

  // 输出颜色
  gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
  vColor = color;
}

示例 3：环境光照

// 片段着色器
void main() {
  // 获取顶点的法线向量
  vec3 normal = normalize(vNormal);

  // 计算光线方向
  vec3 lightDirection = normalize(vec3(1.0, 1.0, 1.0));

  // 计算光线方向和法线向量的点积
  float diffuse = max(dot(normal, lightDirection), 0.0);

  // 计算最终的光照颜色
  vec3 lightColor = vec3(1.0, 1.0, 1.0);
  vec3 color = diffuse * lightColor;

  // 输出颜色
  gl_FragColor = vec4(color, 1.0);
}