计算机图形学之自定义着色器：用 GLSL 在 JavaScript 中绘制奇幻光影

在计算机图形学的江湖里，自定义着色器（Custom Shaders）堪称是能工巧匠手中的 "魔法画笔"。想象一下，你走进一座 3D 数字城堡，城堡里的每一块砖石、每一束光影都由你亲手赋予灵魂，而这一切神奇效果的幕后推手，就是自定义着色器。今天，咱们就用 GLSL（OpenGL Shading Language）搭配 JavaScript，来揭开它的神秘面纱，在数字画布上挥洒创意。

一、着色器：数字世界的光影魔法师

在计算机图形学的世界里，GPU（图形处理器）就像是一个超级工厂，而着色器则是流水线上最核心的工人。它们的工作就是接收顶点数据（可以理解为物体的形状骨架）和纹理信息（物体的表面花纹），然后通过一系列神奇的操作，给这些数据穿上绚丽的 "光影外衣"，让屏幕上原本冰冷的几何图形瞬间鲜活起来。

着色器主要分为顶点着色器（Vertex Shader）和片段着色器（Fragment Shader）。顶点着色器就像是一位擅长 "整形" 的设计师，它会对物体的每个顶点进行位置变换、缩放、旋转等操作，调整物体在 3D 空间中的姿态；片段着色器则更像一位色彩大师，它专注于计算每个像素的颜色，根据光照、材质等因素，调配出独一无二的色彩。

二、GLSL：光影魔法师的咒语书

GLSL 是专门为图形渲染设计的着色器语言，它就像魔法师的咒语书，每一行代码都是一个神秘的咒语。要在 JavaScript 中使用 GLSL 编写自定义着色器，我们需要借助 WebGL，这是一个在网页上绘制交互式 3D 和 2D 图形的 JavaScript API。

首先，我们要在 HTML 文件中创建一个元素，这就是我们的数字画布：

xml 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Custom Shaders with GLSL</title>
</head>
<body>
  <canvas id="glCanvas" width="800" height="600"></canvas>
  <script src="script.js"></script>
</body>
</html>

然后在 JavaScript 文件（script.js）中，我们开始搭建 WebGL 的运行环境，并定义着色器：

ini 复制代码

// 获取canvas元素
const canvas = document.getElementById('glCanvas');
// 获取WebGL上下文
const gl = canvas.getContext('webgl');
// 顶点着色器代码
const vertexShaderSource = `
attribute vec4 aVertexPosition;
void main() {
  gl_Position = aVertexPosition;
}
`;
// 片段着色器代码
const fragmentShaderSource = `
precision mediump float;
void main() {
  gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
}
`;

在上面的代码中，顶点着色器简单地将传入的顶点位置直接赋值给gl_Position，这是一个 GLSL 中预定义的变量，用于指定顶点在裁剪空间中的位置；片段着色器则将每个像素的颜色设置为红色（vec4(1.0, 0.0, 0.0, 1.0)分别代表红色、绿色、蓝色和透明度）。

接下来，我们需要将这些着色器代码编译并链接到 WebGL 程序中：

scss 复制代码

// 创建顶点着色器对象
const vertexShader = gl.createShader(gl.VERTEX_SHADER);
// 将顶点着色器源代码附着到顶点着色器对象上
gl.shaderSource(vertexShader, vertexShaderSource);
// 编译顶点着色器
gl.compileShader(vertexShader);
// 创建片段着色器对象
const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
// 将片段着色器源代码附着到片段着色器对象上
gl.shaderSource(fragmentShader, fragmentShaderSource);
// 编译片段着色器
gl.compileShader(fragmentShader);
// 创建WebGL程序对象
const program = gl.createProgram();
// 附着顶点着色器到程序对象
gl.attachShader(program, vertexShader);
// 附着片段着色器到程序对象
gl.attachShader(program, fragmentShader);
// 链接程序
gl.linkProgram(program);
// 使用程序
gl.useProgram(program);

三、进阶之路：让光影更生动

上面的例子只是一个最简单的演示，实际应用中，我们可以通过在着色器中引入更多的变量和复杂的计算，来实现各种炫酷的效果。比如，我们可以添加一个 uniform 变量来控制颜色，这样就可以在 JavaScript 中动态修改颜色：

ini 复制代码

// 修改后的顶点着色器代码
const vertexShaderSource = `
attribute vec4 aVertexPosition;
void main() {
  gl_Position = aVertexPosition;
}
`;
// 修改后的片段着色器代码
const fragmentShaderSource = `
precision mediump float;
uniform vec4 uColor;
void main() {
  gl_FragColor = uColor;
}
`;
// 在JavaScript中设置uniform变量的值
const uColorLocation = gl.getUniformLocation(program, 'uColor');
gl.uniform4f(uColorLocation, 0.0, 1.0, 0.0, 1.0); // 设置为绿色

我们还可以引入光照模型，模拟真实世界中的光线照射效果。比如，使用 Lambert 光照模型，它会根据物体表面法线和光线方向的夹角来计算光照强度：

ini 复制代码

// 包含Lambert光照模型的片段着色器代码
const fragmentShaderSource = `
precision mediump float;
uniform vec3 uLightDirection;
uniform vec3 uAmbientColor;
uniform vec3 uDiffuseColor;
varying vec3 vNormal;
void main() {
  float diff = max(dot(normalize(vNormal), normalize(uLightDirection)), 0.0);
  vec3 diffuse = uDiffuseColor * diff;
  vec3 ambient = uAmbientColor;
  gl_FragColor = vec4(ambient + diffuse, 1.0);
}
`;

在这个代码中，vNormal是从顶点着色器传递过来的顶点法线，uLightDirection是光线方向，通过计算它们的点积来确定光照强度，再结合环境光，最终得到像素的颜色。

四、开启你的创意之旅

自定义着色器的世界充满了无限可能，从梦幻般的星空特效到逼真的金属质感，从流动的液体模拟到科幻感十足的能量护盾，只要你敢想，就能用 GLSL 在 JavaScript 中实现。它就像一个充满宝藏的神秘岛屿，等待着你去探索和挖掘。

现在，拿起你的 "魔法画笔"，在数字世界中尽情挥洒创意吧！相信随着不断地学习和实践，你一定能成为计算机图形学江湖里的着色器大师，绘制出令人惊叹的数字艺术作品！

以上文章带您初步领略了自定义着色器的魅力。如果你想尝试更多特效，或对某部分内容有深入学习需求，欢迎告诉我，咱们一起探索更多精彩。