这是我参与「第四届青训营 」笔记创作活动的的第14天。
WebGL
GPU≠WebGL≠3D
1
-
光栅（Raster）：几乎所有的现代图形系统都是基于光栅来绘制图形的，光栅就是指构成图像的像素阵列。
-
像素（Pixel）：一个像素对应图像上的一个点，它通常保存图像上的某个具体位置的颜色等信息。
-
帧缓存（Frame Buffer）：在绘制过程中，像素信息被存放于帧缓存中，帧缓存是一块内存地址。
-
CPU（Central Processing Unit）：中央处理单元，负责逻辑计算。
-
GPU（Graphics ProcessingUnit）：图形处理单元，负责图形计算。
2、图像绘制过程
-
轮廓提取/meshing
-
光栅化
-
帧缓存
-
渲染
3、CPU vs GPU
GPU由大量的小运算单元构成，每个运算单元只负责处理很简单的计算，每个运算单位彼此独立，因此所有计算可以并行处理。
4、启动WebGL的步骤
-
创建WebGL上下文
- 顶点着色器（Vertex Shader）
- 片状着色器（Fragment Shader）
-
创建WebGL Program
-
将数据存入到缓冲区
-
将缓冲区数据读取到GPU
-
GPU执行WebGL程序，输出结果
5、图像位置Transforms
-
平移
-
旋转
-
缩放
-
旋转+缩放是线性变换
6、3D Matrix
3D标准模型的四个齐次矩阵（mat4）
-
投影矩阵 Projection Matrix
-
模型矩阵 Model Matrix
-
视图矩阵 View Matrix
-
法向量矩阵 Normal Matrix
