从入门到精通，掌握 Three.js Shader 顶点着色器

2023-07-07 23:25:39

Shader 编程：从零开始的初学者指南

作为一名 Three.js 初学者，Shader 编程可能让你感到有些畏惧。但其实，掌握 Shader 编程并不像你想象的那么难。本文将带你初步体验 Shader 编程的神奇之处，让你领略用顶点 UV 纹理坐标和 GLSL 内置函数实现简单效果的魅力。

UV 映射：纹理与三维模型的完美结合

UV 映射是一种将纹理图像与三维模型顶点坐标建立对应关系的技术。通过 UV 映射，纹理图像的内容可以应用到三维模型的表面上，使模型更加逼真。在 Three.js 中，设置 material.map 属性即可为模型添加纹理。

GLSL 内置函数：Shader 编程的秘密武器

GLSL 中提供了许多内置函数，这些函数可以帮助我们实现各种着色效果。下面介绍几个常用的内置函数：

texture2D()： 从纹理图像中采样颜色值。
mix()： 在两个颜色值之间进行混合。
smoothstep()： 在两个颜色值之间进行平滑混合。

实现简单效果：让你的三维模型焕发生机

掌握了 UV 映射和内置函数，我们就可以实现一些简单的着色效果了：

改变纹理颜色： 使用 mix() 函数，轻松改变纹理的颜色，赋予模型新的色彩。
创建渐变效果： smoothstep() 函数可以帮你创建渐变效果，让模型表面呈现出平滑的色彩过渡。
模拟高光： 利用 mix() 和 smoothstep() 函数，模拟高光效果，增强模型的光影表现力。

代码示例

// 改变纹理颜色
void main() {
  vec4 color = texture2D(map, uv);
  color = mix(color, vec4(1.0, 0.0, 0.0, 1.0), 0.5);
  gl_FragColor = color;
}

// 创建渐变效果
void main() {
  vec4 color = texture2D(map, uv);
  color = mix(color, vec4(1.0, 0.0, 0.0, 1.0), smoothstep(0.0, 1.0, uv.y));
  gl_FragColor = color;
}

// 模拟高光
void main() {
  vec4 color = texture2D(map, uv);
  vec3 lightDirection = normalize(vec3(0.0, 1.0, 0.0));
  vec3 normal = normalize(normalMatrix * normal);
  float specular = max(0.0, dot(normal, lightDirection));
  color = mix(color, vec4(1.0, 1.0, 1.0, 1.0), specular);
  gl_FragColor = color;
}