初识WebGL

Modern Graphics System

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

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

WebGL Startup

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

创建WebGL Program

• 顶点着色器 Vertex Shader ： 用于处理顶点的位置
• 片元着色器 Fragment Shader: 并行处理顶点包围内的所有像素，处理次数更多。颜色取值 从 0.0 - 1.0 的浮点范围。
• 用浮点类型数组表示顶点数据，创建buffer后将返回的bufferid绑定到上下文

大致步骤

• 创建WebGL Program
• 将数据存入缓冲区Frame Buffer
• 将缓冲区数据读取到GPU Buffer to GPU
• GPU执行WebGL程序，输出结果 Output

坐标系知识

坐标系知识：canvas和浏览器的坐标轴都是左上角为原点。但WebGL的坐标体系，是一个以绘制画布的中心为原点，范围从 -1 到 1。在3D的情况下，z轴正方向是向外的。

其他方式绘图

• 使用 canvas 2D
• 使用mesh.js的开源库
• 其他图形（Polygons）的绘制

方法：三角剖分

• 使用3D Meshing

步骤：

1. 设计软件设计模型
2. 提取所有的顶点数据
3. 渲染

图形的变换

平移

旋转

缩放

*旋转+缩放是线性变换

3D Matrix

3D 标准模型的四个齐次矩阵 (mat4)

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