第1章 先选路：版本、管线、封装

第 1 章 · 先选路：版本、管线、封装

章节摘要：WebGL 入门最容易走错的不是“三角形怎么画”，而是三条路还没选就动手。本章把选型拆成三轴：上下文版本（WebGL1 对 WebGL2）、管线模型（固定功能记忆对可编程现实）、封装层级（引擎场景图对裸状态机）。读完你应能在项目启动前写出一张对照表：目标浏览器决定版本，效果清单决定要不要 2.0 能力，团队与管线控制权决定要不要引擎。后面三章默认你已经站在这张表的某一格里，而不是同时脚踩四条路。

阅读收获

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

1. 对照列出 WebGL1 与 WebGL2 在缓冲、纹理、着色器、帧缓冲上的关键差异，并给出选型理由
2. 说明浏览器为什么没有固定管线，以及可编程管线把哪些决策从驱动挪到了你的着色器
3. 画出引擎封装与裸 WebGL 的职责分层，指出各自省掉什么、藏掉什么
4. 针对“产品展示页 / 自定义后处理 / 教学实验”三类场景，给出版本加封装的组合建议
5. 识别“用 1.0 习惯调 2.0 对象”和“引擎外再改全局状态”两类混用错误

核心概念速览

金句：WebGL 的第一课不是画三角形，而是承认你同时面对版本、管线和封装三套选择，混用比不会写更危险。

图：三条选型轴如何卡住后续章节

子章节导航

1.1 WebGL1 与 WebGL2 该选哪条

把“2.0 更新更好”拆成可检验的能力差：顶点数组对象、多渲染目标、三维纹理、整数纹理、变换反馈、实例化绘制。重点是兼容面与能力面如何对赌，而不是版本号崇拜。

1.2 固定管线记忆 vs 可编程现实

对照桌面时代的固定功能（光照开关、纹理环境）和 WebGL 强制着色器。说明为什么“打开灯光就能亮”在浏览器里不成立，以及这套强制如何反过来让后处理成为可能。

1.3 引擎封装 vs 裸 WebGL

对照 Three.js / Babylon.js 一类场景图与裸状态机。引擎省的是缓冲绑定与矩阵样板，藏的是全局状态与合批策略。自定义管线越深，封装越容易变成障碍。

子章节之间的逻辑关系

三节不是递进教程，而是同一决策的三个正交轴。版本决定你手里有哪些对象；管线模型决定你必须写什么；封装决定谁来写这些样板。先钉版本，再接受可编程这个现实，最后才谈要不要把状态机交给引擎。

1.1 版本能力  ──►  1.2 必须着色器  ──►  1.3 谁来写样板
        │                                    │
        └──────── 三轴同时约束项目 ──────────┘
​

选型不是投票。三轴同时成立时才会打架：市场要覆盖老设备，效果清单却写了体积雾和 MRT，团队又只会场景图。这时应砍效果或砍覆盖面，而不是写一套“自动降级”却没有第二条渲染器。本章三节提供的是砍哪一刀的语言，不是让你三轴全要。

把决定写下来，贴在仓库说明里。后面章节的代码示例按裸 WebGL2 心智写概念片段，但讨论会标明 1.0 做不到什么。读的时候对照你写下的那一格，避免把示例里的 VAO 直接粘进 WebGL1 全局状态机。

读完三节，请用一句话写出你的组合，例如：“锁 WebGL2、接受可编程强制项、交付用场景图、内核实验保留裸调用”。这句话会约束第 2 章你如何看待 VAO，约束第 4 章你如何看待扩展失败。没有这句话，后面所有对照表都会被当成百科，而不是决策工具。

三轴里最容易被忽略的是管线轴。版本和封装好选，因为有对象名和库名；管线轴是承认没有灯光开关。不承认的人会在引擎材质面板里找 enableLight，找到了还以为硬件固定功能回来了。第 1.2 节就是为了把这层幻觉拆掉，好让第 4.1 节的光照路线从公式粒度谈起。

本章三节读完如果仍想“先画三角形再说”，请至少先填版本格。三角形在 1.0 与 2.0 都能画，但样板里的 VAO 与着色器版本会把你锁进其中一格。先锁格，再画，能少一次推倒重来。封装格可以晚填：教学用裸，交付再换引擎，只要通道映射还在。

选型记录建议包括：目标设备抽样结果、效果清单里哪些是卖点哪些可砍、团队谁能读调用表。三行就够。不够的是讨论时没有这三行还在加功能。功能加在错误的格子里，后面三章的对照全部错位。本章的产出不是代码，是格子。

⚠️ 章支柱页的对照表是决策工具，不是名词表。读完若填不出自己的格子，说明还在用感觉。

💡 后续章节默认你已经站在某一格里。混用格子会让缓冲、状态、效果三章的药方同时失效。

前置知识与后续延伸

• 前置知识：会写基本 JavaScript，知道 HTML canvas 是一块位图画布；不要求线性代数一次到位，矩阵细节放到第 3 章。
• 后续延伸：第 2 章沿 CPU/GPU 分界展开缓冲与着色器；第 4 章把扩展补丁与 WebGL2 内置、引擎选型再对照一次。选错本章，后面所有“最佳实践”都会绑在错误的上下文上。