这是我参与「第四届青训营 」笔记创作活动的的第19天。
WebGL 与动画实现
一、WebGL 介绍
❓ WebGL 是什么 ？
⭐ WebGL（全写 Web Graphics Library）是一种3D绘图协议，这种绘图技术标准允许把 JavaScript 和 OpenGL ES 2.0 结合在一起，通过增加 OpenGL ES 2.0 的一个 JavaScript 绑定，WebGL 可以为 HTML5 Canvas 提供硬件 3D 加速渲染，这样Web开发人员就可以借助系统显卡来在浏览器里更流畅地展示3D场景和模型了，还能创建复杂的导航和数据视觉化。
❓ WebGL 为什么不像其他前端技术那么简单 ？
⭐ WebGL 涉及一些硬件底层的概念，不易理解。
二、 Modern Graphics System
基本概念
⭐ 光栅(Raster)：几乎所有的现代图形系统都是基于光栅来绘制图形的，光栅就是指构成图像的像素阵列。
⭐ 像素(Pixel)：一个像素对应图像上的一个点，它通常保存图像上的某个具体位置的颜色等信息。
⭐ 帧缓存（Frame Buffer)：在绘图过程中，像素信息被存放于帧缓存中，帧缓存是一块内存地址。
⭐ CPU (Central Processing Unit):中央处理单元，负责逻辑计算。
⭐ GPU (Graphics Processing Unit):图形处理单元，负责图形计算。
图形绘制过程
- 轮廓提取 / meshing
- 光栅化
- 帧缓存
- 渲染
The Pipeline
CPU vs GPU
⭐ CPU：处理能力和运算能力非常强大，但难以并行处理。
⭐ GPU由大量的小运算单元构成，每个运算单元只负责处理很简单的计算，每个运算单元彼此独立，因此所有计算可以并行处理。
三、WebGL Startup
1. Create WebGL Context
👇 考虑浏览器兼容性
2. The Shaders
⭐ Vertex Shader
⭐ Fragment Shader
3. Create Program
4. Data to Frame Buffer
5. Frame Buffer to GPU
6. Output
为什么 WebGL 那么难呢 ？
⭐ WebGL 绘制一个三角形需要几十行代码，而使用 2D 仅需 8 行代码。
Mesh.js
Draw Polygon with 2D Triangulations
👇 使用 Earcut 进行三角剖分
四、Transforms
⭐ 平移
⭐ 旋转
⭐ 缩放
⭐ 旋转 + 缩放是线性变换
五、Matrix
3D标准模型的四个齐次矩阵(mat4)
- 投影矩阵 Projection Matrix
- 模型矩阵 Model Matrix
- 视图矩阵 View Matrix
- 法向量矩阵 Normal Matrix
