WebGL 与 WebGPU比对[5] - 渲染计算的过程_webgpurenderer和webglrenderer

前两篇文章介绍了 WebGL 和 WebGPU 是如何准备顶点和数字型 Uniform 数据的（纹理留到下一篇），当渲染所需的原材料准备完成后，就要进入逻辑组装的过程。

WebGL 在这方面通过指定“WebGLProgram”，最终触发“drawArrays”或“drawElements”来启动渲染/计算。全局状态为特征的 WebGL 显然做多步骤渲染来说会麻烦一些，WebGPU 改善了渲染计算过程的接口设计，允许开发者组装更复杂的渲染、计算流程。

以所有的“draw”函数调用为分界线，调用后，就认为 CPU 端的任务已经完成，开始移交准备好的渲染、计算原材料（数据与着色器程序）至 GPU，进而运行起渲染管线，直至输出到帧缓冲/Canvas，我称 draw 这个行为是“一个通道”。

WebGPU 的出现，除了渲染的功能，还出现了通用计算功能，draw 也有了兄弟概念：dispatch（调度），下文会对比介绍。

1. WebGL

1.1. 使用 WebGLProgram 表示一个计算过程

WebGL 的整个渲染管线（虽然没有管线 API）中，能介入编程的就两处：顶点着色阶段 和片元着色阶段，分别使用顶点着色器和片元着色器完成渲染过程的定制。

很多书或入门教程都会说，顶点着色器和片元着色器是成对出现的，而能管理这两个着色器的上层容器对象，就叫做