WebGL

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

1.重点内容

WebGL的相关知识和内容

2.重要的知识点

• 现代图像系统的组成
• 图形绘制过程
• 为什么要分CPU和GPU
• WebGL的使用
• WebGL的难点
• 多边形的绘制

3.详尽的知识点

现代图像系统的组成

• 光栅：用于绘制图像

• 像素：保存图像上的某个具体位置的颜色信息
• 帧缓存：像素信息存放于此，是一块内存地址
• CPU：负责逻辑计算
• GPU：负责图形计算

图形绘制过程

1. 轮廓提取
2. 光栅化
3. 帧缓存
4. 渲染

为什么要分CPU和GPU

CPU的运算能力强大且可以承担复杂的任务，而图像通常情况下不需要复杂的计算能力，而是需要大量的简单运算。这时候就需要GPU来完成图像渲染的任务

• GPU由大量的小运算单元构成
• 每个运算单元只负责处理很简单的计算
• 每个运算单元之间独立
• 所以计算可以并行处理

WebGL的使用

1. 创建WebGL上下文
2. 创建WebGL Program
3. 将数据存入缓冲区
4. 将缓冲区的数据读取到GPU
5. GPU执行WebGL程序，输出结果

WebGL的难点

相对于canvas，WebGL画相同的简单数量较小的图形所需要的代码量是很多的。

因此对于开发者来说，使用现成的封装好的库是最优选择。比如mesh.js等等...

多边形的绘制

使用Earcut进行三角剖分，将多边形进行三角化，使得原本的多边形由多个三角形构成，这样方便WebGL的绘制和渲染。

• 平移
• 旋转

• 缩放

旋转和缩放是线性变换

所以我们可以通过线性变化+平移的方法将线性变化转换成齐次矩阵

3D的标准模型的四个齐次矩阵

1. 投影矩阵
2. 模型矩阵
3. 视图矩阵
4. 法向量矩阵

4.课后总结

WebGL在数据可视化方面有很大的运用，在前端的实际开发中，数据的可视化不仅可以让开发者提高生产效率，同时也能给用户带来良好的视觉体验，因此WebGL的使用也是前端开发人员必备的知识之一。