4.1游戏中的 Shader

游戏是 Shader 的主场:你在任何一款游戏里看到的水面、光影、爆炸、受击闪白,背后都是着色器。这一章不教你做游戏,而是回答一个更实际的问题:你这本书学的东西,在游戏引擎里对应什么、还能直接用吗?答案会让你惊喜——几乎全部通用,连代码都长得差不多。

1游戏里 Shader 都在干什么

游戏引擎里的 Shader 按岗位分四类,前三类你都已经见过它们的「App 版」:

换句话说:游戏后处理 = 你的 Phase 2,输入从照片换成了每帧的游戏画面。CRT、色差、玻璃、马赛克,在游戏里全都有对应的名场面(恐怖游戏的信号故障、水下的折射、像素风滤镜)。

2光照一分钟 + 卡通渲染

2.2 章乐高凸点里偷偷用过的 dot(N, L),是整个实时光照的地基,正式介绍一下:表面朝向光源的程度 = 法线 N 与光方向 L 的点积。正对着光是 1(最亮),侧面是 0,背面为负(黑)。这叫兰伯特(Lambert)漫反射,一行代码撑起了三十年游戏画面。

而「卡通渲染(Toon/Cel Shading)」的秘密更简单:把连续的 N·L 量子化成两三档(1.1 章的 floor / step!),明暗交界立刻变成动画片般的硬边。下面在 2D 里伪造一个 3D 球演示——球的法线可以从圆内坐标直接推出来,这是 Shadertoy 社区的经典白嫖:

就这四个零件——兰伯特、量子化、边缘光、描边——《塞尔达:旷野之息》《原神》风格化渲染的地基就齐了(它们当然还叠了几十层细节,但骨架是这个)。真 3D 里的差别只是:法线不用白嫖,顶点数据自带。

3溶解:游戏特效第一课

怪物死亡化灰、装备升级重构、传送门吞噬——游戏里一切「物体逐渐消失」都是同一个配方,而且你已经有全部原料:噪声(1.5)+ 阈值(step)+ 边缘发光(1.2):

同门师兄弟一并点名,全是几行的变体:受击闪白 = mix(color, vec3(1.0), flash),flash 由受击时刻起指数衰减;护盾 = 半透明球 + rim 发光 + 噪声流动;幽灵化 = 溶解不加火边、alive 换成半透明。游戏特效的门,推开就是这么薄。

4顶点着色器的岗位

本书的 Vertex Shader 一直在摸鱼(原样输出四个顶点)。游戏里它有真正的岗位:移动顶点本身。草会弯、旗会飘、水面有浪,不是美术做了动画,而是 Vertex Shader 每帧根据时间和位置推挤顶点:

// Vertex Shader 里(伪代码,引擎里变量名各异):
vec3 pos = aPosition;

// 离旗杆越远摆得越大;时间 + 位置 = 波浪(全是 1.4 章的思路)
float sway = sin(pos.x * 3.0 + uTime * 4.0) * 0.15 * pos.x;
pos.z += sway;

gl_Position = uProjection * uView * uModel * vec4(pos, 1.0);

看出来了吗?顶点动画就是「造型函数作用在顶点上」——sin 波、噪声、缓动,全套 Phase 1 知识换个作用对象。草地是每根草按世界坐标错开相位(1.4 章的 stagger),水面是 fbm 顶点位移 + 法线重算。规模大了还有 GPU 粒子、蒙皮骨骼,但那是引擎的事,思想不变。

5引擎对照:你的知识怎么迁移

看一眼 Godot 版的溶解,感受「知识原样迁移」不是空话:

shader_type canvas_item;

uniform float progress : hint_range(0.0, 1.0);
uniform sampler2D noise_tex;    // Godot 内置噪声纹理,连 fbm 都不用写

void fragment() {
    float n = texture(noise_tex, UV).r;
    float alive = step(progress * 1.2, n);
    float edge = smoothstep(progress * 1.2, progress * 1.2 - 0.08, n) * alive;
    vec3 fire = mix(vec3(1.0, 0.3, 0.05), vec3(1.0, 0.9, 0.3), edge);

    vec4 tex = texture(TEXTURE, UV);
    COLOR = vec4(tex.rgb * alive + fire * edge * 1.6, tex.a * max(alive, edge));
}