Why WebGL/Why GPU

• WebGL是什么？
• GPU != WebGL != 3D
• WebGL为什么不像其他前端技术那么简单？

初识WebGL

WebGL（Web 图形库）是一个JavaScript API，可在任何兼容的Web浏览器中渲染高性能的交互式3D和2D图形，而无需使用插件。WebGL通过引入一个与OpenGL ES 2.0非常一致的API来做到这一点，该 API 可以在HTML5元素中使用。这种一致性使API可以利用用户设备提供的硬件图形加速。

现代图形系统中的相关概念

• 光栅（Raster）：几乎所有的现代图形系统都是基于光栅来绘制图形的，光栅就是指构成图像的像素阵列
• 像素（Pixel）：一个像素对应图像上的一个点，它通常保存图像上某个具体位置的颜色等信息
• 帧缓存（Frame Buffer）：在绘图过程中，像素信息被存放在帧缓存中，帧缓存是一块内存地址
• 绘制图形的过程：轮廓提取（meshing）、光栅化、帧缓存、渲染
• GPU（Graphics Processing Unit）：图像处理单元，负责图形计算（由于 GPU 由大量的小运算单元构成，每个运算单元只负责处理很简单的计算且彼此独立，因此所有计算可以并行处理，适合对图像中的大量像素点进行处理）

图形绘制过程：

1.轮廓提取/meshing

2.光栅化

3.帧缓存

4.渲染

GPU与CPU的区别：

CPU主要用来处理复杂的问题，比如涉及“流”的问题。 GPU适合前后计算步骤无依赖性，相互独立的计算场景。

GPU的长处：

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

图形渲染

利用WebGL绘图步骤：

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

3D Matrix

3D标准模型的四个齐次矩阵： 1、投影矩阵Projection Matrix 2、模型矩阵Model Matrix 3、视图矩阵View Matrix 4、法向量矩阵Normal Matrix