企业官网建设流程全解析

计算机图形学这个领域有个挺有意思的现象：网上的教程多到看不完，但能把一个三角形从顶点数据变成屏幕上像素这件事从头到尾讲清楚的人，少之又少。我准备写一套《计算机图形学速通指南笔记》的时候，一直在想第一篇到底该从哪讲起。讲坐标变换？太早。推荐 API？那是把读者往坑里带。后来我想明白了，第一篇应该先把地图铺开——这就是你正在看的第 0 篇。

这套笔记适合三类人：一是想入图形学但被琳琅满目的路线图劝退的自学者；二是已经写过不少渲染代码、但知识点始终连不成片的一线开发者；三是工作中被迫要和渲染、效果、性能打交道的技术美术或游戏程序员。它不适合期待“三天不看数学就学会图形学”的读者，那样的期望本身就违反了这门学科的底层规律。与其那样，不如先花一篇文章的时间，确认你要走的是一条什么样的路。

1. “速通”到底速在哪里：先把地图摊开再上路

1.1 图形学没有捷径，但有大路和小路

我见过太多在图形学上花了大力气却收效甚微的人，问题基本不在智商，而在信息密度。图形学是一个典型的大交叉学科：底层要用数学描述光和几何，中间要用数据结构和算法组织场景，上层还得理解硬件怎么把指令变成像素。这个领域的信息密度极高，一旦方向选错，浪费的不是一两天，而是几百个小时。

所谓“速通”，在我这里的意思非常明确：不是“速成”，而是“少走弯路”。图形学里的弯路特别多，常见的有两类。一类是“ API 教程复读机”，跟着网上教程把接口调通了、画面出来了，但不知道显卡替你做了什么，换个需求就抓瞎；另一类是“大部头硬啃党”，打开经典教材从第一章看到第十章，公式推了三页纸，代码一行没写过，最后在“这到底有什么用”的疑问里放弃。

这两类弯路有一个共同点：它们都绕开了建立直觉的关键环节。第 0 篇的价值就在于，先把整张地图摊开，告诉你哪些地方有大路，哪些地方是沼泽，以及为什么要先走某条路。后面的每一篇笔记，都默认你已经看过这张地图。

1.2 两类学习者，两条默认路线

根据入口不同，我把初学者大致分成两类。

第一类是“工程倒推型”。你可能写过游戏逻辑、做过前端动效、调过 Shader，或者因为项目里某个阴影效果性能太差被逼到墙角，决定回来补图形学基础。这类读者已经有碎片经验，缺的是一条能把碎片串起来的主线。我推荐的默认路线是“渲染优先”：从画一个三角形开始，一路做到相机控制、光照、纹理映射、阴影、后处理。你会发现图形学最核心的那些概念都挂在这条线上，每往前走一步，之前的知识碎片就自动找到位置。

第二类是“理论正推型”。你可能有数学或计算机基础，想系统学习图形学，但还没写过真正能出画面的程序。这类读者的默认路线仍然是“渲染优先”，但我强烈建议先花几天在 CPU 上做一个小型软渲染器，找一找“从数据到像素”的画面感，再回头读教材。脑内有了画面之后，那些矩阵和积分才挂得上去，否则公式推导只是空中楼阁。

两条路线最后会在同一个地方汇合：能够独立复现一条完整的光栅化渲染管线，并且清楚每一个阶段为什么存在。

1.3 这个系列覆盖什么，不覆盖什么

为了防止学了半路才发现方向不对，我先把边界画清楚。

这套《计算机图形学速通指南笔记》会覆盖的核心内容包括：渲染管线的完整链路（坐标变换、光栅化、着色、深度测试、混合与后处理）、常见光照模型与基于物理着色的基础概念、纹理与采样、阴影的常用近似方法、GPU 与图形 API 的底层逻辑。整体以实时渲染为主线，离线渲染作为对照补充。

暂时不覆盖的内容包括：流体、布料、刚体等物理仿真专题，细分曲面和密集网格重建，基于机器学习的生成式图形学方向，以及商业引擎的源码级拆解。这些内容不是不重要，而是不适合放进一条“速通”主线里。先把主干打通，分支以后随时都能接回来。

2. 图形学的五张桌子：一张全景知识地图

2.1 渲染：图形学的心脏

渲染是整个图形学最核心的板块，也是大多数人想到图形学时第一反应的那个东西：把一个由几何、光源、材质、相机组成的虚拟场景，计算成一张二维图像。它要回答的核心问题是“这个像素为什么是这种颜色”。

渲染有两种主流思路。光栅化追求速度和效率，把三角形直接投影到屏幕上，逐个像素填充颜色，是实时渲染的绝对主力；光线追踪从相机出发反向追踪光线路径，模拟光的弹射，物理准确度高但计算量大，大量用在离线渲染和高画质场景中。入门阶段，两者都要懂，但第一条主线应该走光栅化，因为它的每一步都能在有限时间内得到反馈，也更容易建立直觉。

2.2 几何：承载一切的骨架

场景并不是一张图片，而是一堆几何描述。在图形学里，几何的常见表达方式有网格、样条曲面、隐式曲面等。入门阶段不需要全掌握，你需要形成概念的是：一个模型本质上是一堆顶点，顶点组成三角形，三角形组成网格，网格经过变换、着色、光栅化后变成屏幕上的像素。

像法线、UV 坐标、切线空间这些让你头疼的概念，本质上都是在为几何表面绑定额外的属性信息。所以我会在后面的笔记里把几何部分拆成两张表：一张是“几何数据怎么存”，另一张是“几何数据怎么被渲染消耗”。第一张表侧重数据结构，第二张表侧重流水线。

2.3 动画与仿真：让时间轴参与进来

图形学不只有静态画面。动画部分解决的是“物体随时间如何运动”的问题，从传统的关键帧动画，到骨骼绑定和蒙皮，再到基于物理的仿真，难度依次递增。物理仿真又分为刚体、布料、流体、粒子等分支，每一个分支拉出来都够写一本书。

这条线对于速通主线来说属于“后续分支”。我强烈建议初学者在渲染管线还没走通之前，不要一头扎进布料模拟或流体求解器。原因很简单：动画与仿真的一切结果最后都要通过渲染呈现出来，渲染基础不牢，你会发现仿真做出来的东西根本没法看。

2.4 成像与感知：最终解释权在眼睛

图形学产出的最终目标是给人眼看，所以色彩空间、伽马校正、色调映射、显示器响应曲线这些概念一个都不能少。这一块是最容易被初学者忽视的，因为它看起来“不那么硬核”，但其实非常影响最终的视觉质量。

你可以这样理解：渲染负责“计算光”，感知负责“对付眼睛”。真实世界的光照数据是线性的，但人眼对亮度的感知是非线性的，显示器也有自己的响应特性。如果不做色彩管理，你辛辛苦苦算出来的物理正确图像，在屏幕上会显得暗淡或者灰蒙蒙的。成像与感知这张桌子，就是衔接“物理正确”和“看起来舒服”之间的桥梁。

2.5 五张桌子的连接关系

五张桌子之间不是孤立的。几何提供物体的形状，渲染决定形状如何变成图像，动画与仿真让形状随时间变化，成像与感知决定图像如何呈现给视觉系统，而硬件与 API 是所有这些计算的执行底座。初学者不需要同时消化五张桌子的所有内容，只需要记住一条主线：几何进入渲染管线，渲染管线输出图像，图像经过感知校正后显示在屏幕上。后面学到任何一个新概念，先问它挂在这条主线的哪个位置。

3. 主干链路：一个像素是如何诞生的

3.1 从场景到屏幕的五个必由阶段

我现在要把整张地图上最重要的一条链路拆开。无论你用哪种图形 API，无论你跑的是实时渲染还是离线渲染，像素诞生的过程都绕不开这几个阶段：场景描述、坐标变换、光栅化、着色、像素合成。

场景描述是输入，包括顶点、三角形、材质参数、光源信息和相机参数；坐标变换负责把三维世界的虚拟坐标一步步搬到屏幕坐标系；光栅化决定“哪些像素被这个三角形覆盖”；着色决定“这些像素应该是什么颜色”；像素合成负责解决遮挡、透明、抗锯齿和颜色校正问题。把这五步刻进脑子里，后面的笔记无论讲什么，都是在这条链路的某个环节上往下钻。

3.2 坐标变换：把虚拟世界摆到相机面前

我用一个生活化的类比来理解坐标变换。你要给一个物体拍照，第一步是把物体放到场景中你想要的位置（模型变换），再把相机挪到观察位置并调整朝向（视图变换），然后透过取景框判断哪些部分在画面内（投影变换），最后按下快门，把三维画面压到二维底片上（视口变换）。

在图形学里，这套过程被拆成了几个坐标空间：模型空间、世界空间、观察空间、裁剪空间、归一化设备坐标、屏幕坐标。每个空间之间有对应的矩阵在“搬运”顶点坐标。你现在不需要背下每个矩阵的公式，但必须建立两个概念：一是矩阵乘法可以统一表示平移、旋转、缩放这些操作；二是所谓“摄像机视角”，本质上也是一种坐标系变换，并不是真的有一台相机在场景里跑来跑去。

3.3 光栅化：把三角形切成像素

三维场景经过坐标变换之后，几何体已经投影到了屏幕平面上。但投影到屏幕上的只是三角形的三个顶点，屏幕上的像素需要被“填充”。光栅化做的就是这件事：判断一个三角形覆盖了哪些像素，并对覆盖区域内的像素生成对应的片元。

这里有一个重要的概念叫插值。三角形的三个顶点有颜色、法线、纹理坐标、深度值等属性，而三角形内部的像素属性不能直接拿到，必须通过插值计算出来。比如一个三角形三个顶点分别是红、绿、蓝，光栅化之后，三角形内部的像素就按照位置比例混合出渐变色。插值这件事贯穿整个渲染管线，纹理映射、顶点着色、深度测试全都要用到它。

3.4 深度测试、混合与后处理：像素的收尾工作

光栅化之后，同一屏幕位置的像素可能来自不同三角形，它们需要一轮一轮的筛选和合并。深度测试负责用 z 值决定谁在前面，透明的片元则通过混合操作与已经写入帧缓冲的颜色进行叠加。这个阶段决定了物体的遮挡关系是否正确、透明物体是否真实、边缘是否会出现锯齿。

再往后是后处理阶段。整个场景渲染到一张中间纹理之后，可以再做色调映射、伽马校正、泛光、景深等效果。从这个视角看，后处理本身也是一次渲染：输入是一张图像，输出是另一张图像。所以你会发现图形学里到处是“先渲染到纹理，再对纹理进行渲染”的嵌套结构，这一点在后面的笔记里会反复出现。

3.5 为什么这是必须焊死在脑子里的主干

我见过很多学了几个月 AP I却还是不知道怎么下手写渲染效果的人，根本原因就是脑子里没有这条主干链路。他们知道怎么调用某个库函数，但不知道那个函数对应的是坐标变换还是光栅化，也不知道一个效果应该挂在哪一个环节去实现。

一旦你把这五步焊死在脑子里，图形学的地图就活了：材质系统对应着色阶段，阴影算法大多发生在光照计算阶段，抗锯齿发生在光栅化或后处理阶段，GPU 优化发生在对每个阶段计算代价的理解上。主干先立起来，以后学任何新概念都只是往这棵树上挂新叶子。

4. 动手之前的弹药：数学要准备到什么程度

4.1 数学三件套：线代为主，微积分和概率为辅

先说结论：入门阶段真正绕不开的数学只有线性代数，而且只需要其中一部分。向量加减、点积、叉积、矩阵乘法、简单的矩阵变换，这些内容是绝对刚需。点积可以判断光方向和法线方向的关系，这是一切漫反射光照的基础；叉积可以求法线和构建坐标系；矩阵乘法负责把顶点从一个坐标空间搬运到另一个坐标空间。

微积分和概率统计在第一阶段不需要深入。你需要理解导数是变化率、积分是累计量，知道蒙特卡洛积分是随机采样估计光照的基础就够了。很多初学者被教材的数学推导劝退，是因为试图在动手之前把所有公式都学完。正确的做法是“用多少，补多少”：写代码时发现矩阵乘法不熟，就回去查矩阵那一章；遇到采样和抗锯齿概念，再回来补信号处理的基础直觉。

4.2 语言与图形 API：第一个项目该怎么选

这是我被问得最多的问题。如果目标是快速建立原理直觉，我的建议顺序是：先不要碰任何图形 API，用 CPU 写一个软渲染器，把整个渲染管线徒手实现一遍；然后再用一款主流图形 API 重写一遍，感受硬件加速替你做了什么。

软渲染器可以用 C++，也可以用 Python 配合像素缓冲操作。它跑得慢，但每一步都在你的掌控之内，你可以在任何一个阶段打断它、检查中间结果、打印某个像素的值。这样折腾一遍之后，再回到图形 API，你会发现自己能看懂显卡在做的事，而不只是照着模板抄代码。

语言选型上，C++ 是工业标准，但不适合零基础起步；JavaScript 加 WebGL 可以在浏览器里快速出效果；Python 适合做算法验证和教学实验。我的建议是：第一遍用你觉得最顺手、能最快出画面的语言，重点在理解原理；第二遍再用 C++ 配合主流图形 API，重点在理解工业级实践。

4.3 没有可视化调试，图形学基本学不下去

最后是调试。图形学代码不像后端接口，错了会给你一个报错文本。图形学程序错了，往往屏幕上是一团黑的画面、一团白的画面，或者五颜六色的噪点，什么信息都没有。

碰见这种画面，先别慌。我的调试套路分三步：第一，把渲染拆成阶段，每到一个阶段就输出一张中间图像，比如先输出顶点坐标、再输出三角形覆盖、再输出深度值，看一眼就知道哪个环节出了问题；第二，把某个像素的数值打印出来，和手算的结果对照，确认公式使用是否正确；第三，准备一张已知正确的小场景图，比如一个简单的三角形或立方体，任何改动都拿它做对照。

这个习惯的价值在入门阶段尤其明显。很多渲染 bug 的根源是对某个坐标空间的理解偏差，如果你能在软渲染器里逐步打印中间结果，这类问题十分钟就能定位。

5. 大多数人死在哪几个坑里：对症下药

5.1 坑一：API 驱动型学习，背了一堆函数还是不会写效果

这是最常见的死法。症状是能照着教程做出旋转的立方体、能调 Bloom 和阴影，但一旦遇到教程里没有的效果，就完全没有思路。病根在于 API 把太多步骤封装掉了：你调用了一个绘制函数，显卡帮你做了坐标变换、光栅化、深度测试、颜色混合，而你只看到了结果。

对策只有一个：至少在 CPU 软渲染器里徒手实现一遍这些阶段。哪怕只是渲染一个最简单的三角形，只要你自己写过从顶点数据到像素颜色的每一步，再看 API 文档里的某个函数时，你就会明白它在管线里对应哪一个环节。到那时，API 不再是咒语，而是一个由你掌控的工具箱。

5.2 坑二：教材恐惧症，公式推了三页，代码一行没写

图形学经典教材都很厚重，推导也很严密，但线性阅读是新手最容易踩的坑。你从第一章开始读向量和矩阵，读到第五章光照模型，公式推得头头是道，但脑袋里完全没有画面，学习动力很快就被消磨掉了。

正确的姿势是“倒着读”：先确定一个想实现的效果，比如让一个立方体在屏幕上旋转；然后去找实现它需要哪几个知识点；再针对性地去读教材里的对应章节。读完一章之后立刻写代码，写完再回头看推导，这时候公式里的每一项都有了实际含义。图形学不是靠推导学会的，是靠“推导加上画面反馈”学会的。

5.3 坑三：过早启动大项目，第一个月就想写引擎

另一种常见死法是目标定得太大。刚画完三角形就想着写一个完整的游戏引擎，结果矩阵还没写对，就开始设计场景管理、骨骼动画、物理碰撞，最终被自己的复杂度压垮。

入门项目应该小到不能再小，而且每一步都要有可见的成果。别小看“画一个三角形”这个目标，如果你真的能完全不借助任何图形库，自己实现坐标变换、投影、光栅化和着色，你已经理解了一大批图形学核心概念。大项目永远不会跑掉，等你的主干链路足够扎实再上也不迟。

5.4 还有一个隐性坑：抄代码不思考

最后这个坑更隐蔽。就算你跟着教程敲了一遍软渲染器，如果只是把代码抄通、画面出来就关掉编辑器，效果也会大打折扣。我建议每写一段核心代码之后，强制自己回答三个问题：这一步的输入是什么？输出是什么？我如果去掉它会怎样？回答不上来，说明还没真正学会，先别急着往下走。

6. 第一个小项目，以及后面怎么用这套笔记

6.1 选一个最小的软渲染器作为起步项目

我会在后续笔记里逐步带大家构建一个完整的软渲染器，这里先给一个总路线图。第一阶段：创建一个像素缓冲区，往屏幕上画一个点；第二阶段：实现画线段和填充三角形；第三阶段：实现矩阵变换，让物体可以旋转平移；第四阶段：实现透视投影和简单相机控制；第五阶段：加入深度缓冲，解决遮挡关系；第六阶段：加入漫反射光照和简单的纹理映射。

每完成一个阶段，都会有一个可以在屏幕上看到的成果。这个节奏会比直接用图形 API 慢很多，但换来的回报是对整个渲染管线的彻底理解。等软渲染器走完一遍之后，再用主流图形 API 重写同样的场景，你会发现学习速度快到出乎意料。

6.2 这套笔记的使用方式与“三句话复盘法”

每篇笔记我都会先讲“这个东西解决什么问题”，再讲“底层原理是什么”，最后给一段可直接运行的示例代码和一个踩坑清单。如果你从头开始自学，建议每学完一篇，尝试用三句话向一个完全不懂图形学的朋友解释：这个知识点是什么、它解决什么问题、它卡在管线里的哪个位置。

如果三句话说不清楚，说明你还没消化，回头再看一遍。每篇笔记最后的踩坑清单，都是我实际写代码时被绊倒过的地方，你可以把它当作排雷手册，而不是需要背诵的知识点。

6.3 硬件与运行环境：普通电脑完全够用

最后说一个很多人关心的硬件问题。入门阶段的软渲染器对设备几乎零要求，CPU 渲染不需要独立显卡，只要能写代码就能跑。实时渲染部分如果要用图形 API，支持主流的 OpenGL 3.3 以上或 WebGL2 就行，近十年的电脑基本都满足。

操作系统方面，Windows、macOS、Linux 都可以。唯一要提醒的是，尽量不要一开始就在移动设备上折腾图形 API，调试和报错信息的体验会差不少。先用桌面或浏览器做主力环境，等概念清楚了再考虑移动端的平台差异。

用这套方法走下来，你会发现“计算机图形学”并没有人们说的那么可怕。它确实需要数学、需要代码、需要耐心，但只要有地图、有主线、有足够小的起步台阶，每天投入一个小时，几个月时间就能建立起一个扎实的认知框架。把第 0 篇当作锚点，后面每一篇笔记都是往这个框架上添砖加瓦。等有一天你能快速定位一个渲染问题出在哪一步、能设计一个属于自己的小渲染玩法时，你就会明白，当年没有选择绕开这条路，是做过的最正确的决定之一。