初识WebGL|青训营笔记

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

Modern Graphics System

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

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

The pipeline

graph TD
Data --> Processor
Processor -->FrameBuffer
FrameBuffer --> Pixels

GPU

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

WebGL Startup

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

Transforms

平移：

旋转：

缩放：

旋转+缩放是线性变换

从线性变换到齐次矩阵

3D Matrix

3D标准模型的四个齐次矩阵（mat4）

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