阶段 7 · WebGL基础24 分钟

WebGL2 对照：同一个三角形，两种 API 心智模型

GLSL、状态机与 WebGPU 显式管线映射

用 WebGL2 重画入门三角形，逐项对照上下文、着色器、顶点输入、渲染状态和提交模型，理解迁移时真正变化的部分。

LEARNING GOALS

先明确本课目标

编译并链接 GLSL ES 着色器

使用 VAO 与 Buffer 描述顶点输入

建立 WebGL 状态调用到 WebGPU 管线描述的映射

MENTAL MODEL · 再建立心智模型

WebGL 像操作一台不断改变旋钮状态的机器；WebGPU 更像先组装并验证管线配方，再显式录制和提交一批命令。

MINIMAL EXAMPLE

从 WebGL 迁移时，为什么不能只替换函数名？

WebGL 把 Program、Buffer、Texture 等绑定进可变 Context 状态；WebGPU 把着色器、布局和固定状态预先固化为 Pipeline，并在 Pass 中显式绑定资源与提交命令。

最小例子glsl

// WebGL2：修改当前上下文状态后绘制
gl.useProgram(program);
gl.bindVertexArray(vao);
gl.drawArrays(gl.TRIANGLES, 0, 3);

// WebGPU：在 Pass 中声明所用对象
pass.setPipeline(pipeline);
pass.setVertexBuffer(0, vertexBuffer);
pass.draw(3);

Program → Pipeline WebGPU Pipeline 不只包含着色器，还包含图元、深度、混合和目标格式。
隐式状态 → 显式对象 资源布局和用法在创建时即可验证，减少 Draw 时的隐藏依赖。
即时调用 → 命令编码 WebGPU 先记录 Pass 和命令，再 finish/submit。

迁移的核心是重组数据流和资源合同，而不是寻找一对一 API 名称替换。

本课概念

WebGL2 GLSL ES WebGL State Machine Vertex Array Object +1 个

●OPTIONAL · 按需查阅完整术语表与概念边界

遇到陌生术语时再展开，不打断主线实验。

展开⌄

WebGL 对照Vertex Array ObjectWebGL2 中记录顶点属性启用状态、格式和 Element Array Buffer 绑定的对象，WebGPU 对应信息主要进入 Pipeline 与 Buffer 绑定。WebGL 对照WebGLProgramWebGL 顶点与片元 Shader 链接后的可执行程序对象，使用前通过 useProgram 写入 Context 当前状态。WebGL 对照WebGL2浏览器中的即时模式图形 API，通过有状态 Context、GLSL ES 着色器和绘制调用访问光栅化管线。WebGL 对照GLSL ESWebGL 使用的着色语言；顶点与片元着色器分别编译，再链接为 WebGLProgram。WebGL 对照WebGL State Machine由 bind、enable、useProgram 等调用持续修改的隐式上下文状态，绘制结果取决于调用时的完整状态组合。运行环境API软件向外暴露的一组可调用接口与行为契约；WebGPU API 规定 JavaScript 如何请求设备、创建资源和提交工作。

LIVE EXPERIMENT · 先获得反馈

边改边运行

浏览器加载后会激活代码编辑器、独立运行环境与实时输出。

本课挑战

为页面加入 API 切换，让同一组三角形数据分别走 WebGL2 与 WebGPU 渲染并保持视觉一致。

DEEP DIVE · 实验之后

回到原理，解释刚才发生了什么

先用结果建立反馈，再按运行流程、核心原理和知识关系逐层深入。

CORE IDEA

核心讲解

相同的 GPU 阶段，不同的控制方式

两种 API 都会执行顶点着色、图元装配、光栅化和片元着色。WebGL 通过 bind、enable、useProgram 等调用逐步改变隐式状态；WebGPU 则把大部分状态集中到可验证、可复用的 Pipeline 描述中。

迁移不是逐行翻译

GLSL 要改写为 WGSL，attribute 与 uniform 要映射为显式布局和绑定组，draw 前的状态调用要重组为资源创建、命令编码与提交阶段。先按职责映射，比按函数名寻找替代项更可靠。

●OPTIONAL · 迁移时查阅WebGPU 与 WebGL2 对照

主线实验完成后，再用完整映射处理跨平台或跨 API 迁移。

展开⌄

API COMPARISON

把同一组三角形数据在两种 API 中运行，是整套对照学习的最小闭环。

WebGL

本课主版本展示 GLSL 编译链接、VAO 状态和 drawArrays。

WebGPU

伴随版本展示 WGSL、RenderPipeline、CommandEncoder 与 Queue.submit。

先确保几何、颜色和动画参数一致，再观察 API 结构差异，避免把输入差异误判为渲染差异。