第4章 效果路线与生态对照

第 4 章 · 效果路线与生态对照

章节摘要：有了通道和状态机，效果仍然不是单解。光照可以逐顶点也可以逐片元，阴影可以平面投影也可以阴影贴图，动画可以每帧改矩阵也可以 GPU 蒙皮。生态上，扩展补丁对 WebGL2 内置、引擎对裸 API、CPU 瓶颈对 GPU 瓶颈，同样要对照着选。本章把常见效果写成路线表，把案例收进性能对照里，不提供社区链接清单。读完你应能按产品约束选出一条主路，并说清另一条的代价。

本节目标

阅读完本章，你应当能够：

1. 对照 Gouraud 与 Phong 类逐片元光照的带宽与外观差
2. 说明平面阴影与阴影贴图在真实性、CPU/GPU 税上的差别
3. 在 2D 纹理、立方体环境、PBR 贴图集之间按项目阶段选型
4. 对照 CPU 矩阵动画与 GPU 蒙皮、变形目标
5. 把 WebGL1 扩展矩阵对照成 WebGL2 核心能力
6. 按管线控制权选择引擎与加载器组合
7. 用“瓶颈在哪一端”组织优化，而不是收集零散技巧

核心概念速览

金句：效果选型是在外观、版本合同、封装控制权、两端账单之间做减法，不是在论文里做加法。

子章节导航

4.1 光照：逐顶点 vs 逐片元

顶点处算光照再插值，还是片元处点积。低模高光差很大。PBR 是逐片元路线的延伸，不是另一种管线。

4.2 阴影：平面投影 vs 阴影贴图

平面投影便宜、假。阴影贴图要离屏深度、采样比较、处理 acne。方向光正交、点光更贵。

4.3 纹理进阶：2D vs 立方体 vs PBR

环境反射、法线、金属粗糙度如何加通道。与第 2.6 节的过滤合同衔接。

4.4 动画：CPU 改矩阵 vs GPU 蒙皮

物体级运动走 Uniform；骨骼应把权重当 Attribute、矩阵当纹理或 Uniform 数组。

4.5 扩展补丁 vs WebGL2 内置

把 1.0 扩展表映射到 2.0 核心，说明哪些补丁永远补不上。

4.6 引擎选型与资源加载对照

Three、Babylon、2D 引擎、裸加加载器。glTF 相对自研二进制。

4.7 性能：CPU 瓶颈 vs GPU 瓶颈

合批、overdraw、状态切换、案例里的典型误诊。

子章节之间的逻辑关系

前四节是效果路线，后三节是约束与治理。先选怎么亮、怎么影、怎么动，再看版本和封装允不允许，最后用瓶颈表收口。案例不单独成节，以免变成无法引用外链的空列表。

4.1-4.4 效果怎么走
        └► 4.5 版本允不允许
        └► 4.6 谁来实现
        └► 4.7 账单在哪端
​

效果路线一旦选定，不要在同一物体上叠两条互斥实现。平面影加阴影贴图通常不是更真，而是两份账单。PBR 加逐顶点烘焙光也容易能量重复。减法写在材质文档里：这个网格用哪条光、哪条影、几张贴图。

生态对照服务于约束。扩展检测失败要能指向 4.5 的降级表；引擎扛不住自定义时要能退回第 2 章的通道语言。第 4.7 节是收口，不是另起一本优化秘籍。

效果节与生态节要交叉读。选了阴影贴图却锁 WebGL1 且没有深度纹理扩展，路线不成立。选了 GPU 蒙皮却每帧 CPU 写回位置，路线名不副实。选了引擎却绕过渲染器改混合，封装合同撕裂。交叉检查比单节的表格更接近项目现场。

第 4.7 节不要当成附录技巧。它是把前六节的选择翻译成账单。账单大的那一端，才值得动刀。动刀前看档位表：低中高三档是否已经覆盖设备。没有档位，优化会在同一条路上反复微调，产品仍只有一档外观。

效果路线与档位一起发布。没有档位的路线会在最弱设备上按最强公式跑。把低中高三档写进第 4.7 节之前，先在本章各节的表格里标好“低档走哪一列”。表格是选型，档位是运营。两者缺一，优化会变成事后补锅。

发布前用第 4.7 节的档位机跑一遍三档。低档仍能看懂产品，高档才上贴图影与 IBL。低档崩了说明路线没有减法。减法是对比驱动的最后一刀：不是都能要。本章把能要的列成表，把不能同时要的留给档位。表和档位一起，文集才收得住。

效果与档位必须一起发布。没有低档的高档公式，会在渠道最弱设备上把填充率打满。把低中高三档提前写进需求，美术按档做槽，程序按档做 pass。事后优化补不出档位。档位是减法的制度化，也是对比驱动在产品上的落点。

七节里前四节选路线，后三节选约束。路线与约束打架时砍路线，不要砍约束去迁就一张效果图。效果图不会在低端机上替你付钱。付钱的是填充率与包体。把这两笔写进档位，再谈新效果。

前置知识与后续延伸

• 前置知识：第 2 章通道、第 3 章 FBO 与深度；阴影贴图是二者的组合题。
• 后续延伸：WebGPU 不在本文集合同内。学完应对 WebGL 两端分界有肌肉记忆，再迁新 API 时仍能问“数据停在哪一端”。