Shader编程(GLSL及HLSL)

Shader编程（GLSL及HLSL）教程导读

「裁剪空间」这个词，几乎所有的图形学教材都会提到，却很少有人说清它为什么存在。你明明只想把眼前的三角形画到屏幕中央，编译器却反复提醒：输出的位置向量必须带齐 w 分量。围墙背后藏着本教程要讲透的那件事——GPU 渲染是条装配线，着色器是你能插手的可编程工位。GLSL 与 HLSL 正是这些工位上通用的操作手册：前者偏向 OpenGL 与 Web 生态，后者扎根 DirectX 与主机平台，语法有别的表象之下，是同一套执行模型。

这本教程适合谁

你想在游戏引擎里写自定义材质，却总看不懂引擎模板里那些 in、out、sampler2D 到底在传递什么；或者你在做图形方向的课程作业，需要一个从零开始、每一步都能亲手跑通的路径；又或者你是后端或前端工程师，出于好奇想弄明白屏幕上每一帧背后的并行计算逻辑。只要你会一门普通编程语言（C、Python、JavaScript 都行），对线性代数有高中以上的印象，就能顺着这本教程走到 PBR 和后处理。

我们不看那种只讲概念不落代码的书。每一节都围绕"能动手做出来"组织：先跑通一个最小例子，再拆它为什么这样写，最后给你可迁移的写法判断。读完你应当能独立完成这些事——写一个带 MVP 矩阵变换的顶点着色器；用片元着色器画出棋盘格、圆环这类程序化图案；做 UV 滚动与平铺动画；实现 Lambert、Blinn-Phong 直到简化版 PBR 的完整光照；搭一条"渲染到纹理再全屏叠加"的后处理链，做出泛光与色调映射；把同一份效果分别写成 GLSL 与 HLSL 版本；最后对着帧耗时不明的画面，判断瓶颈出在顶点还是片元那一环。

全书路线：沿着渲染数据流走

章节顺序刻意与渲染数据的流向一致。数据先经过管线（第 1 章），管线上可编程的工位需要一门语言来操作（第 2 章），随后按执行顺序拆开工位：顶点着色器（第 3 章）、片元着色器（第 4 章）；接着是片元工位最常打交道的纹理与采样（第 5 章）；有了这些地基，光照模型（第 6 章）与后处理效果（第 7 章）才谈得上实现而非背诵公式；第 8 章把视角拉到 GLSL 之外，对照 HLSL 与跨平台实践；第 9 章收尾于性能优化与调试——这也是工程里真正区分"能跑"与"能用"的部分。

图：全册知识地图与学习依赖

图中依赖线说明了为什么顺序不能随意调换：纹理采样（第 5 章）是光照贴图与后处理素材的共同前置；而第 9 章的优化要回到第 1 章的管线视图去定位瓶颈——首尾正好闭环。

使用建议与约定

代码示例以 GLSL 为主（版本标注在代码块首行注释里），第 8 章统一给出 HLSL 对照。示例默认运行在现代 OpenGL 3.3 及以上版本的核心模式下，引擎用户可以把每一节的着色器代码几乎原样搬进 Unity 的 ShaderLab 块或 Unreal 的 Custom 节点——需要改动的只有输入绑定那一小截，正文会在相应位置提示。所有数学只用到向量点积、矩阵乘法与一点点三角函数，遇到生疏处各节都有即时复习框。

两件事建议贯穿全书同步做：其一，准备一个能即时看到结果的实验场，可以是 shadertoy 风格的在线编辑器，也可以是本地引擎里新建的空材质；其二，把每节的"易错点"当成检查清单，着色器调试成本高，错误往往不报错、只表现为黑屏或诡异颜色，事前防范远比事后排查省时间。

准备好了就从第 1 章开始：先把一个三角形送上屏幕，看清它走过的完整流水线。