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

什么是WebGL？

• GPU≠WebGL≠3D

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

图形绘制过程

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

WebGL&OpenGL

WebGL Startup

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

The Shaders（着色器）

1. Vertex Shader（顶点着色器）
2. Fragment Shader（片源着色器）

坐标系

Mesh.js

在2D中绘制多边形

mesh.js绘制多边形

Apply Transforms

平移

旋转

缩放

缩放+旋转->线性变换

运用

3D Matrix

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

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

尾声

因为有些知识点对我来说还是模糊的，导致此次学习笔记比较少也比较基础，留下来以后完善吧......