谈谈 图形学 的 从头建设发展之路

图形学 要 解决的 几个问题：

 

1 模型，

2 透视

3 边界判断 和 遮挡

4 光影 重力 和 机械运动 等 物理效果

 

模型的部分，我们先从 二维图形 开始说起，  比如  “如何判断一个点在 多边形 内？” ，  这个问题我将之称为 “边界判断”  问题，

假设我们设计一个游戏的话，  就会考虑这个问题，不过对于 魂斗罗 超级玛丽 这样的 8 位机 游戏， 角色 道具 之间的 碰撞 应该是 直接比较 角色 道具 的 像素， 还没有用到图形学，因为 那个时代的 游戏 的 分辨率 不高，  角色 道具 的 像素数量 很少，    直接比较 像素 即可 。

 

对于 图形学 来说，  如何解决  边界判断  问题？

我想过一个办法，就是 把 多边形 分解为 若干个 三角形，然后 判断 点 是否在 这些 三角形 里， 但是 有 网友 说了一个 更直接 的 办法，就是 连线， 就是 让 点 和 多边形 的 每个端点 连线，如果这些连线和 多边形 的 边 有相交 则 点 在  多边形 外，  没有相交 则 点 在 多边形 内，  确实 这办法 很好，  但是只能处理 “没有凹陷” 的 多边形 。当然，分解为 三角形 的 方法 也只能 处理  “没有凹陷” 的 多边形 ，  在 有 凹陷 的 情况下，  分解三角形 本身 就是个 困难的 工作，  需要 判断 多边形 的 边 的 “哪一侧” 是 “内侧”，    这个问题 是 边界判断 的 根本问题 。

 

如何 判断 多边形 的 边 的 “哪一侧” 是 “内侧”，      最一般 也是 最复杂 的 情况 是，  任意给定一些点 和 一个顺序， 按照这个顺序 把 点 连接起来  构成一个 多边形  。

这种情况是 最一般 也是 最复杂  的   。

比如，    给   A , B , C , ……   X , Y , Z     这样一些点，      按照   A , B , C , ……   X , Y , Z    的 顺序 连起来 。

这要 考虑 交叉 的 情况，  即使没有 交叉，   要 知道 边 的 哪一侧 是 内侧，   也是 很麻烦 的 。

这需要 判断 最后一点（Z） 和 第一点（A） 连接 的 闭合方向 是 顺时针 还是 逆时针，

这个 顺时针 逆时针 并不是 ZA 方向，  而是 要 判断 本次 “环绕” 是在 上次 “环绕” 的 内部 还是 外部  。

 

但是，有一种办法 可以让 问题 简化，  就是 人为 的 给出 某条边 的 内侧，   这样可以 递推 出 所有 边 的 内侧，

比如 ， 指定 AB 的 “右边” 是 内侧，  即 A 到 B 的 方向 的 右边 为 内侧，   这样可以递推出 BC , CD , DE ,  ……   XY , YZ  的 右边 是 内侧 。

这样，只要 判断 点 是否在 所有 边 的 内侧 就是 判断 点 是否在 多边形 内部 。

 

这是 可行 的，  因为 模型 是 人 建立 的，  所以 人 当然可以 指定 边 的 哪一侧 是 内侧 ，  这样 问题 就 大大 简化 了  。

 

如果 把 边界判断 问题 推广到 三维 的 话，   情况 会 更复杂，    如果由 一些 三角形面 来组成一个 体 的话，  这类似与 二维 由 一些 线段 组成 多边形，

那么，  对于 这些 三角形面 是否 能 组成一个  封闭 体 ，   这是一个问题，    二维 的 情况 只要 点 顺序 的 连接，  最后一点 和 第一点 相连， 就是一个 封闭多边形， 当然，这里面 存在 线段 交叉 的 情况，但 交叉了 也是 封闭 的，或者 可以 按 交叉 的 方式 另行 处理  。

但是 三维 的 情况 就 复杂 了，    空间 中的 面 是 会 扭曲 的，    这 不仅仅 发生在 连续曲面，   用 三角形面 组成 的 “组合面” 也 会 扭曲，

事实上，  三角形面 组成的 组合面 可以模拟 连续曲面 和 逼近，  这也是 3D 建模 的 基础  。

 

由于 面 的 扭曲，   所以 三维  中 要 判断  面 是否 构成一个 封闭体  就 很复杂，    我觉得 单纯 用 算法 大概 很难 实现  。

这里的 面 包括 了 连续曲面 和 组合面  。

 

面 的  扭曲，   我们可以 举个例子，     就以  拓扑学 的 经典例子 来看：

把 一条 纸带 扭一下  再  首尾  粘 起来，    这就 形成了一个 纸带圈，    因为 扭 了 一下， 这个 纸带圈 就有点 神奇，

我们把 一只 蚂蚁 放在 纸带 上，   它可以 从 纸带 的 内侧 爬到 外侧，   又从 外侧 爬到 内侧，    如此 循环   。

把  纸带 看作一个 面，  让 这个 面  延展 出去，   是 不能 组成一个 封闭体 的 ，

这是因为  有 那个  扭曲 的 存在，   因为这个 扭曲，    即使  延展 出去 的 面 封闭 了，    扭曲 那里 仍然 会 自然 的 形成 一个  “洞”，

或者说 一个 隧道，   两端 与 外界 相通，   感觉 好像 空间的 漏洞  ……

 

当然，     你可以用  一些 其它 的 面 把 隧道 的 两端 给 堵起来，  但 这就不是 纸带（面） 本身 延展 的 结果 了  。

 

所以，   我的看法 是 ，  3D 建模 中，    一个 体 是否 封闭， 是由 建模 的 人 依靠 直观 来 实现 的，

在 体 封闭 的 前提 上，   和  二维  一样，     人为 的 指定 某个 单元面 的 哪一侧 是 内侧，  这样可以 递推 知道 所有 的 单元面 的 内侧，

这样 就可以 解决 三维 下 的 边界判断 问题  。

只要 判断 点 是否在 所有 单元面 的 内侧 就可以 判断 点 是否在 封闭体 内  。

 

这里说的   单元面 是 指 组成   封闭体  的 简单图形平面，         最基本 的 是 三角形面，

理论上，     所有的 多边形面 都可以由 三角形面 构成，       不过 对于一些 特定 的 模型，  可以   直接使用      矩形 梯形 或 其它 多边形 来 作为 单元面 ，

比如        长方体，        直接用 矩形面 组成就可以   。

 

三角形面 有一个 特点 是  可以 组成  扭曲  的 组合面 ，    矩形面  不能 组成  扭曲  的 组合面  ，    所以 三角形面 是 基本 的 单元面  。

 

接下来 说说 透视 ，       透视 是 美术，  也就是 画画 里 的 术语，     透视 所指 的 就是 对于 人眼 来说，   远处 的 物体 变小 的 视觉效果，   以及 矩形 看起来是 平行四边形 、 圆形 看起来像 椭圆形 这样的效果  。

对于 3D 来说，     模型 最终 投影 并 渲染 到  屏幕 应该 满足 透视 效果，  这样看起来才符合人的视觉效果  。

那 如何 计算 透视  呢？

我们来看看    人眼（照相机）  的 成像示意图 ：

 

如图，     线段 AB  经过 瞳孔（镜头）  在 视网膜（胶片） 上的 成像 是  ba，    是一个 倒立相反 的 像，

物理学 中，  我们知道， 凸透镜 的 成像 是 倒立相反 的，     眼睛（照相机） 的 成像 就是 凸透镜 原理  。

 

可以看到   abo 和 ABo   两个 三角形 是 相似三角形，   ab 和 AB  之间 存在一个 比例关系：    ab / oh = AB / oH ，

ab = AB  *  ( oh / oH )   ，              oH   是  AB 到 瞳孔（镜头） 的 距离，   所以， 像 的 大小 和 物体 离 瞳孔（镜头） 的 距离 成  反比  。

 

像 就是 有 透视效果 的 投影 ，   我们也可以把 像 称为 透视投影  。

 

那么，  根据上面 这个 反比 关系，是不是可以来 计算 透视投影 了呢？ 还不行， 因为 最关键 的 是 要 确定 组成 物体（模型） 的 单元面 的 端点 的 位置，

所以，  还是 需要 根据 成像 的 原理 来 计算 单元面 端点 的 位置 ，  以此 得到 物体（模型） 在 视平面 上的 透视投影  。

上图 中 的  视网膜（胶片）  就是    视平面  。

 

因为  像  是 倒立相反 的，我们 还要 把 像  “反转”  过来，  才能得到  正立  的 像，   在 计算机  里 这 很简单，   像 是 一个 位图，    位图 是 一个 二维数组，  只要 以 倒序 的 方式 输出 数组 的 数据 得到的 就是 “反转” 的 像，  倒序 就是 以 从 最后一个 元素  到  第一个元素 的 顺序 访问 元素  。

 

虽然 3D 中 需要 根据 成像 原理 计算 像（透视投影），     但是， 在 2D 的 第一视角游戏 等 一些 模拟 3D 效果 的 场合（俗称 “假 3D”）  可以 使用 上述 的 反比关系 模拟 3D 透视效果，  比如  2D 下 的 第一视角 赛车游戏 什么的  。

 

接下来说 遮挡，   遮挡 是个 麻烦事，  遮挡 是 图形学 里的 一个  大问题，  我们先来看看    二维   里 的 遮挡 是 怎么 计算 的 ，

二维 里 的 遮挡 比如 浏览器 里的 元素 之间 的 叠放，   还有 Windows 操作系统 里 窗口 之间 的 叠放 。

只要 根据 元素（窗口） 的  叠放层次 来 渲染  就可以 。

 

不过 我们 先说说   “渲染”   这个词，    渲染 的 英文 是  Render  ，   但是 在  Windows 编程 里 ，通常说  “绘制” ，  比如    绘制窗口，   所以， .Net 的 System.Windows.Forms 下 的 Control 基类 有  OnPaint()  和  OnPaintBackground()  虚方法，  而 窗口（Form） 和 所有的 控件 都是 继承 Control 基类 的，

Paint 就是 画画， 绘制 的 意思，     还有一个 近义词，就是 Draw，    Draw 也有 画画 的 意思，      所以 .Net 提供 GDI+ 的 名字空间 System.Drawing 是用 Drawing 来命名  。  里面 那些 矢量图形 的 绘制方法 大概 也是  Draw()   ，    我猜的，   记不清了  。

当然，    System.Drawing   名字空间 下 还有一个 重要的 角色 是 Brush  ，    刷子 ，     又称  画刷  。

 

我觉得  Draw  主要是 画线条，   Paint  则 偏重于   涂色，以及 整个 综合 的 绘画过程  。

 

以 浏览器 为例，   设 有  1 到 n 层 元素，   1 层 为 最低层，  n 层 为 最高层，    则 从 最低层 开始 渲染，  逐层 渲染 至 最高层，

渲染  就是 输出 像素   。

 

这样 高层 会 覆盖 底层 的 内容（像素），    这样 就 实现 了  叠放（遮挡） 效果  。

 

再说说 半透明 的 问题，     假设 2 层 的 透明度 是 40% ，  那 在  2 层 遮挡  1 层 的 区域，  应该 有 40% 的 像素 显示 1 层 的 像素，   这 40% 的 1 层 像素， 应该 均匀 的 分布 在 遮挡区域 内 ，    这样 来 实现 半透明 的 效果  。

对于 多层叠放 和 多层半透明，   一样的方法，  逐层 计算 即可 。

 

当然 大家 会问，   能不能 不用 这种 笨办法，  能不能 计算出  每一层 被 上层 遮挡 后  “露出”  的 部分，  然后 每一层 只 渲染 露出 的 部分 ？

 

也可以  。  但是 遮挡 会产生 许多 不规则 的 图形，   虽然 浏览器 的 元素 和 Windows 窗口 都是 矩形，  即便如此，   遮挡 也会 产生 各种 不规则 图形，

就像 围棋盘 一样  。

不规则图形 是指 “露出” 的 部分，   因为 露出 部分 是 不规则图形，    所以计算起来 比较 麻烦，    如果 元素（窗口） 小 而 密集，  那 露出 部分 会 呈 不规则 和 “碎片化”，   这样 计算量 也不小  。

 

在 三维 下，   计算 露出 部分 就 更复杂，   因为  三维 模型 之间 遮挡 的 露出部分 的 投影 会是 各种 奇怪 的 不规则的 图形，  这个 投影 包括 几何投影 和 透视投影  。

所以，我放弃了  三维  下  计算 露出 部分 的 算法  。

 

退而求其次，   像 二维 那样，  根据 叠放（遮挡） 的  层级，   让 每个 模型 的 每个 单元面 一一 渲染，    如何？

这首先需要 知道 叠放（遮挡） 的 层级，

用通俗的话说，     叠放（遮挡） 的 层级 就是 单元面 谁在前 谁在后，   这个  单元面 包含 所有模型 的 所有单元面，

同一个 模型 的 单元面 也有 前后 遮挡 的 关系，      因为 一个 物体 有 “正面” 和 “背面” 。

要给 所有模型 的 所有单元面 计算出 遮挡层级，      也就是说，  要给 所有模型 的 所有单元面 排一个序，  看看 谁在前 谁在后，就像 给 幼儿园 的 小朋友 排队一样 。

 

假设 场景 里的 所有模型 由  n 个 单元面 组成，    每个 单元面 需要 和 其它 的 所有单元面 都 比较一次 谁在前 谁在后，   

那么， 需要 比较 的 次数 是      (n - 1) + (n - 2) + (n - 3) + (n - 4) + …… + 1     。

 

比较 的 算法 是 看 2 个 单元面 在 视平面 上的 投影 有没有 相交，   如果没有 则 2 者 不存在 遮挡关系，  如果有，  则 取 投影 中的 任意一点，  比较 该 点 到 单元面 的 距离，  距离大的 单元面 靠后，  距离小 的 单元面 靠前，  距离大 的 单元面 被 距离小 的 单元面 遮挡  。

这里说的 投影 包括了  几何投影 和 透视投影 ，     投影点 到 单元面 的 距离 就是 投影点 沿着 投影线 到 单元面 的 距离 。

当然，  几何投影 和 透视投影 的 投影方式 不同，     投影线 也 不一样 。

这个 方法 可以用于 计算 单元面 在 几何投影 上 是否有 遮挡， 也可以用于 计算 单元面 在 透视投影 上 是否有遮挡 。

 

 

可以看到，         (n - 1) + (n - 2) + (n - 3) + (n - 4) + …… + 1         这个 比较 次数 不小  。

假设 组成 所有模型 的 单元面 是 10000 个，  那么   (n - 1) + (n - 2) + (n - 3) + (n - 4) + …… + 1   就等于    10000 * (9998 / 2) + 5555  =   49995555  ，   差不多 5 千万，  或者说 接近   10000 * 10000 / 2 = 5 千万   。

 

10000 * (9998 / 2) + 5555  =   49995555                   这是 高斯先生 的 算法，   高斯  小学 时候 老师 出了 一道题， 让 同学们 从 1 加 到 100，  然后 高斯 很快就算好了，他的算法是 100 + 1 = 101 ,   99 + 2 = 101 ,    99 + 3 = 101   ，  一共有 50 个 101，    所以  1 + 2 + 3 + …… + 100 = 101 * 50 = 5050  。

 

一个 比较细腻 的 模型 ，比如 人体模型，  似乎 很容易 花费  1 万 个 单元面，   当然 这是 推测 。

 

所以，  一个  和 现实世界 比较 接近 的 场景 中 所有模型 的 单元面 数量 也是 可观 的， 计算这些 单元面 的 遮挡层次 的 计算量 也很 可观  。

 

所以 我 暂时 对 这种 做法 持 保留态度，    不过我们还是可以看看 如果 知道 所有 单元面 的 遮挡层级，   那么 如何 来 渲染  。

其实 和 二维 差不多，   区别 是 三维 下 要 先 计算 透视投影，   

三维 的 渲染 是 先 计算 透视投影，    把 透视投影 输出像素 到  位图 ，   位图 就是 渲染结果 。

 

和 二维一样，    从 最低层 的 单元面 开始 渲染，  逐层 渲染 至 最高层  ，     这样  高层 会 覆盖 底层 的 内容（像素），    这样 就 实现 了  叠放（遮挡） 效果  。

 

对于 半透明 的 效果，   也 和 二维 一样，   在 渲染 中，    如果 单元面 遮挡了 某些 物体，   则  在 该 单元面 的 渲染结果 中 以 透明度 为 比例 显示 上层 渲染结果 的 像素  。   假设 单元面 的 透明度 是 40%，那么 在 单元面 的 渲染结果（输出像素）中  应该有 40% 的 像素 显示的是 上层 的 渲染结果 的 像素  。    这 40% 的 像素 是 均匀 的 分布在 单元面 的 渲染结果 里 的  。

 

显然， 这个做法 的 前提 是 计算出 所有 单元面 的 遮挡层次，   但是，  上文讨论了，   计算 所有 单元面 的 遮挡层次  的 计算量 是 很大的，  所以 3D 里的 半透明 效果 是 比较 麻烦 的 。    这里 还没有 考虑 半透明 介质 在 不同角度 上 的 透明度 的 变化 呢  。    比如，  一块 玻璃，   把 它 放 斜，   相当于 厚度 增加了， 透明度 会 降低  。

还有 折射 半反射  ，，，

 

那么，  能不能 不 计算出 所有 单元面 的 遮挡层次 而 实现 遮挡 效果 ？    有一个 办法，  是 个 笨办法  。

就是 每个 单元面 独立 渲染，    不需要 考虑 单元面 渲染 的 顺序，     在 输出 每个像素 的 时候， 比较 当前 位置 的 有没有 其它 单元面 已经 输出 的 像素， 如果没有， 则 直接 输出像素，   如果有，   则 比较 当前 像素 表示 的 投影点 到 单元面 的 距离 ，      这个 距离 是 投影点 沿 投影线 到 单元面 的 距离 ，     距离 大 的 表示 靠后， 距离 小 的 表示 靠前 ，   靠前 覆盖 靠后   。       也就是说，  如果 当前 像素 的 距离 小，则 覆盖 已有像素， 否则 保持 原有像素  。

 

 

假设  位图 的 分辨率 是 1000 * 700 ，    位图 的 像素 数   1000 * 700 = 70 万 ，    那么 比较输出像素  的  次数  可能 小于 70 万，  也可能 远大于 70 万，

如果 模型 比较小 或者 离 “镜头” 比较远，     那么，  模型 的 像（透视投影） 就  很小，    像（透视投影） 的 像素 数量 也少，   这种情况下，  所有 模型 的 所有 单元面 的  像（透视投影） 的 像素 加起来 可能 小于 70 万，  当然 也可能 大于  。

 

这里要 提 一下 背景，

背景 也是 一个 或 多个 模型，    是 一种 特殊 的 模型， 它 的 特点 是  在 “最底层”，  不会 遮挡 其它 模型， 只会被 其它 模型 遮挡  。

所以，    背景   最先 被 渲染，   且 不需要 遮挡比较 计算  。

但 问题 是，   如果  背景 由 多个 模型 组成，这些 模型 之间 也可能 存在 遮挡，  这样 还是 需要 遮挡比较 计算  。

实际应用中 可能 存在 “固定背景” ，    就是 把 背景 预先 渲染 好，    而 人物 道具 等 实时模型 直接在 背景 渲染好的 位图 上 继续 实时渲染 ，

这样可以  减少 计算量， 省时省力，  就好像 拍电影 在 演员 身后 用 一块 幕布 做 背景 那样，     就像 照相馆 一样 。

  

假设  场景  有 100 个 模型，   平均 每个 模型 的  像（透视投影） 的 像素 是 10 万 ，  那么 ，  100 个 模型 的 输出像素 数量 是   100 * 10 万  = 1000 万 ，   也就是要 计算   1000 万 次 遮挡比较  。

 

把   每次 输出像素 时 的 比较 操作 的 时间复杂度 看作 O(1) ，   那么，   对于 这 100  个 模型 的 场景，   渲染 时 计算 遮挡比较 时间复杂度 是  O( 1000 万 )，

假设 CPU 每次 比较输出 像素 的 操作 耗时 100 纳秒（ns），    1 秒钟 可以 比较输出 像素  1000 万 次 ，

那么， CPU   1 秒钟 可以  渲染  1000 万 / 1000 万 = 1 个       这样 的  100 个 模型 的 场景  。

 

当然 这些 是 推演 和 估算，    但 也 大概可以看出     3D 需要 密集 的 浮点计算 以及 把 计算 独立 到 GPU 里 进行 的 原因 了 吧  ~  ！

同样 也可以看出，    分辨率  是   3D 的 一个 重要指标，         分辨率 的 增长 会 带来 显著的 计算量 增长，  随之带来 对 硬件 性能 的 要求 的 增长  。

当然 这里 的 渲染 仅仅 是 计算 遮挡，   没有 包括 皮肤材质 、光影 等  。

 

我们可以看看  3D 国漫 ，      比如 《画江湖 之 不良人》，     不良人 第一季 第二季 的 最高 分辨率 是  720 P   ，    直到  第三季，  才变成 了  1080 P 。

第一季 大概是   2014 年 出的，   第三季 应该是 到了  2019 年，     从  720 P 到 1080 P ，   走了 5 年，  不容易 啊 ！

 

需要说明的是，    第 3 种 方法 （就是上面这种 每个 单元面 独立 渲染，  每个 像素 在 渲染 时 比较 到 单元面 的 距离） 不能 实现 半透明 效果 ，   实现 半透明 必须 第 2 种 方法（计算出 所有 单元面 的 遮挡层次，   按 层次 渲染）  。

这是 因为 半透明 必须 考虑 一个 整体 的 效果，   即 在 上层 单元面 上 按比例 均匀 的 显示 下层内容 的 像素 ，    比例 就是 透明度  。

这 需要 按 层次 渲染 和 按 单元面 呈现 半透明 效果  。

 

上面 我们 讨论 了 模型 边界判断 透视 遮挡  ，   这 4 个 问题 是 图形学 的 基本问题，    这 4 个  问题 解决了，   皮肤 材质 光影 重力 机械运动 以及 其它 种种 问题 都是   添砖加瓦 的 工作量 问题  。

 

于是， 我们 可以 来 总结 一些 基本 的 库函数 ：

1    求得 简单图形面（三角形面 矩形面） 在 任意 平面 上的 几何投影

2    求得 简单图形面（三角形面 矩形面）  的 透视投影，   “摄像机” 镜头 和 简单图形面 的 距离 角度 可以 任意 设置

3    求得 多个 简单图形面（三角形面 矩形面） 之间 有 遮挡 效果 的 透视投影

 

以上 的 透视投影 不 包含 皮肤 材质 光影，   只 包含 简单图形面 的 边 ，     实现了 这 3 个 库函数，  实际上 这 已经 是一个 简单 的 图形引擎（3D 引擎）了 。

 

这篇 文章 可以作为 图形学 的 理论基础  。