这是我参与「第四届青训营 」笔记创作活动的第14天
一、课前准备
二、初识WebGL
WebGL是什么？
GPU≠WebGL≠3D
Modern Graphics System
- 光栅（Raster）：几乎所有的现代图形系统都是基于光栅来绘制图形的，光栅就是指构成图像的像素列阵。
- 像素（Pixel）：一个像素对应图像上的一个点，它通常保存图像上的某个具体位置的颜色等信息。
- 帧缓存（Frame Buffer）：在绘图过程中，像素信息被存放于帧缓存中，帧缓存是一块内存地址。
- CPU（Central Processing Unit）：中央处理单元，负责逻辑运算。
- GPU（Graphics Processing Unit）：图形处理单元，负责图形计算。
- 轮廓提取/meshing
- 光栅化
- 帧缓存
- 渲染
The Pipeline
graph LR
start--Data--> Processor --> Frame buffer --Pixels--> stop
CPU vs GPU
GPU由大量的小运算单元构成
每个运算单元只负责处理很简单的计算
每个运算单元彼此独立
因此所有计算可以并行处理
WebGL Startup
- 创建WebGL上下文
- 创建WebGL Program
- 将数据存入缓冲区
- 将缓冲区数据读取到GPU
- GPU执行WebGL程序，输出结果
3D Matrix
3D标准模型的四个齐次矩阵（mat4）
- 投影矩阵Projection Matrix
- 模型矩阵Model Matrix
- 视图矩阵View Matrix
- 法向量矩阵Normal Matrix
三、课后小结
WebGL利用JavaScript来准备数据，将数据通过共享数据结构（ArrayBuffer）传递给GPU，由GPU进行着色处理，然后再将处理后的数据输出到帧缓冲区，最后再渲染出来。
这其中的关键是头两个步骤，也就是准备数据和着色处理，其中准备数据一般是通过JavaScript的类型数组（TypedArray），着色处理是通过WebGL Program执行一种特殊的glsl语言来实现。在WebGL中，着色阶段通常分为两步，分别是顶点着色和片段着色。
