WebGL 与动画实现 | 青训营笔记

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

这篇文章是青训营-前端《WebGL 与动画实现》的课堂笔记。

现代图形系统

• WebGL是什么？

WebGL（全写Web Graphics Library）是一种3D绘图协议，这种绘图技术标准允许把JavaScript和OpenGL ES 2.0结合在一起，通过增加OpenGL ES 2.0的一个JavaScript绑定，WebGL可以为HTML5 Canvas提供硬件3D加速渲染，这样Web开发人员就可以借助系统显卡来在浏览器里更流畅地展示3D场景和模型了，还能创建复杂的导航和数据视觉化。显然，WebGL技术标准免去了开发网页专用渲染插件的麻烦，可被用于创建具有复杂3D结构的网站页面，甚至可以用来设计3D网页游戏等等。

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

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

WebGL Startup

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

Create WebGL Context

1、Vertex Shader

2、Fragment Shader

vertex shader处理顶点坐标，然后向后传输，经过光栅化之后，传给fragment shader，其负责颜色、纹理、光照等等。

Create Program

Data to Frame Buffer

Frame Bufffer to GPU

Transforms

3D Matrix

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

1. 投影矩阵Projection Matrix(处理坐标系)
2. 模型矩阵Model Matrix(改变图形大小、位置)
3. 视图矩阵View Matrix
4. 法向量矩阵Normal Matrix