WebGL与动画实现

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

什么是webGL？

WebGL其实不是3D绘图，也不是GUP

首先我们来了解一个绘图有关的小知识

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

图形绘制过程：

1. 轮廓提取
2. 光栅化
3. 帧缓存
4. 渲染（显示到桌面上）

CPU虽然处理功能很强大，但是一个很小的图形都有几十万的像素，单独交给CPU处理当然是不能的，因此，我们就会用到GPU，简单了解一下GPU，GPU是由大量的小运算单位构成，每个运算单位只负责处理很简单的计算，每个运算单位彼此独立，因此所有计算可以并行处理，用他来处理图片再合适不过了。

WEbGL其实是openGL的子集，OpenGL是图形渲染引擎。WebGL缺少常规OpenGL具有的许多功能，例如仅支持顶点和片段着色器。OpenGL也有着WebGL所不具备的功能，例如几何体着色器，镶嵌细分着色器和计算着色器，两者可谓是各有千秋。

怎么使用WebGL？

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

3D Matrix

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

1. 投影矩阵 Projection Matrix
2. 模型矩阵 Model Matrix
3. 视图矩阵 View Matrix
4. 法向量矩阵 Normal Matrix

个人总结

通过本节的学习，初步认识了什么是WebGL和他的使用，但其中所蕴含的知识还有很多，如果对此感兴趣需要课下再去寻找更多的东西学习。