这是我参与「第四届青训营 」笔记创作活动的第 3 天
WebGL 是什么？
WebGL 是一种 3D 绘图协议 WebGL 运行在电脑的 GPU 中，因此需要使用能在 GPU 上运行的代码，这样的代码需要提供成对的方法，每对方法中的一个叫顶点着色器而另外一个叫做片元着色器，并且使用 GLSL 语言。将顶点着色器和片元着色器连接起来的方法叫做着色程序。
Modern Graphics System
绘制一个 3D 图像主要分为 4 个步骤
- 1、轮廓提取
- 2、光栅化
- 3、帧渲染
- 4、绘制
光栅(Raster):几乎所有的现代图形系统都是基于光栅来绘制图形的，光栅就是指构成图像的像素阵列。
像素(Pixel):一个像素对应图像上的一个点,它通常保存图像上的某个具体位置的颜色等信息。
帧缓存（Frame Buffer):在绘图过程中，像素信息被存放于帧缓存中,帧缓存是一块内存地址。
CPU (Central Processing Unit):中央处理单元,负责逻辑计算。
GPU (Graphics Processing Unit):图形处理单元,负责图形计算。
GPU 由大量的小运算单元构成
每个运算单元只负责处理很简单的计算每个运算单元彼此独立
因此所有计算可以并行处理
WebGL Startup
1.创建 WebGL 上下文
2 创建 WebGL Program
3.将数据存入缓冲区
4.将缓冲区数据读取到 GPU
5.GPU 执行 WebGL 程序,输出结果
创建 WebGL 上下文
const canvas = document.createElement("canvas");
const gl = canvas.getContext("webgl");
const program = gl.createProgram();
gl.attachShader(program /*某个着色器(下文的vertexShader)*/);
gl.linkProgram(program);
gl.useProgram(program);
const vertex = `
attribute vec2 position;
void main() {
gl_Position = vec4(position, 1.0, 1.0);
}
`;
const vertexShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vertexShader, vertex);
gl.compileShader(vertexShader);
3D 标准模型的四个齐次矩阵(mat4)
1.投影矩阵 Projection Matrix
2.模型矩阵 Model Matrix
3.视图矩阵 View Matrix
4.法向量矩阵 Normal Matrix
