这是我参与[第五届青训营]笔记创作活动的第十七天

本课堂重点内容：

• 何为 WebGL
• Modern Graphics System
• The Pipeline
• CPU与GPU
• WebGL Startup
• Mesh.js

详细知识点介绍：

何为 WebGL：

GPU != WebGL != 3D

Modern Graphics System：

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

流程：

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

The Pipeline：

GPU：

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

WebGL Startup：

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

Create WebGL Context：

Transforms：

旋转 + 缩放是线性变换：

从线性变换到齐次矩阵

3D Matrix：

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

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

实践练习例子：

Create Program：

Draw Polygon with 2D Triangulations：

使用 Earcut 进行三角分割：

个人课后总结：

WebGL 具有较高的技术要求性，技术覆盖面较广