这是我参与「第四届青训营」笔记创作活动的第12天

WebGL是什么

通俗来说，我们可以把WebGL理解为一种帮助我们开发 3D 网页的绘图技术，其底层逻辑是JavaScriptAPI。WebGL 运行在电脑的 GPU 中，因此需要使用能在 GPU 上运行的代码。

WebGL基本概念

• 光栅：几乎所有的现代图形系统都是基于光栅来绘制图形的，光栅就是指构成图像的像素矩阵。
• 像素：一个像素对应图像上的一个点，它通常保存图像上的某个具体位置的颜色等信息。
• 帧缓存：在绘图过程中，像素信息被存放于帧缓存中，帧缓存是一块内存地址。
• CPU： 中央处理单元，负责逻辑计算。
• GPU：图像处理单元，负责图像计算。

WebGL 工作原理

在了解WebGL基本概念之后，我们开始深入理解WebGL的工作原理。WebGL 在 GPU 上的工作主要分两个部分：

• 顶点着色器将顶点转换为裁剪空间坐标
• 片元着色器基于顶点着色器的计算结果绘制像素点

当我们需要绘制一个图形时，GPU 首先计算其的位置，然后将位置信息保存到GPU；第二步，GPU调用片元着色器计算每个顶点的颜色值保存至GPU；完成以上步骤后，我们已经绘制好一个图形的像素点，最后将其光栅化即可。

CPUvsGPU

• GPU由大量的小运输单元构成
• 每个运算单元只负责处理简单的计算
• 每个运算单元彼此独立,因此所有计算可以并行计算

WebGL工作步骤

• 创建WebGL上下文
• 创建WebGL Program
• 将数据存入缓冲区
• 将缓冲区数据读取到GPU
• GPU执行webgl程序，输出结果

WebGL常见开发框架

• ThreeJSWebGL 的综合库，应用范围比较广泛
• SpriteJS 开源的跨终端canvas绘图库，可以基于canvas快速绘制结构化UI、动画和交互效果，并发布到任何拥有canvas环境的平台上
• CesiumJS专用于 3D 地图开发的 WebGL 库