这是我参与「第四届青训营 」笔记创作活动的的第18天
1、什么是WebGL
WebGL经常被当成3D API，人们总想“我可以使用WebGL和一些神奇的东西做出炫酷的3D作品”。 事实上WebGL仅仅是一个光栅化引擎，它可以根据你的代码绘制出点，线和三角形。 想要利用WebGL完成更复杂任务，取决于你能否提供合适的代码，组合使用点，线和三角形代替实现。
WebGL在电脑的GPU中运行。因此你需要使用能够在GPU上运行的代码。 这样的代码需要提供成对的方法。每对方法中一个叫顶点着色器， 另一个叫片断着色器，并且使用一种和C或C++类似的强类型的语言 GLSL。 (GL着色语言)。 每一对组合起来称作一个 program（着色程序）。
顶点着色器的作用是计算顶点的位置。根据计算出的一系列顶点位置，WebGL可以对点， 线和三角形在内的一些图元进行光栅化处理。当对这些图元进行光栅化处理时需要使用片断着色器方法。 片断着色器的作用是计算出当前绘制图元中每个像素的颜色值。
2. 现代图形系统中的相关概念
- 光栅（Raster）：几乎所有的现代图形系统都是基于光栅来绘制图形的，光栅就是指构成图像的像素阵列
- 像素（Pixel）：一个像素对应图像上的一个点，它通常保存图像上某个具体位置的颜色等信息
- 帧缓存（Frame Buffer）：在绘图过程中，像素信息被存放在帧缓存中，帧缓存是一块内存地址
- 绘制图形的过程：轮廓提取（meshing）、光栅化、帧缓存、渲染
- GPU（Graphics Processing Unit）：图像处理单元，负责图形计算（由于 GPU 由大量的小运算单元构成，每个运算单元只负责处理很简单的计算且彼此独立，因此所有计算可以并行处理，适合对图像中的大量像素点进行处理）
3、WebGL Startup
1.创建WebGL上下文
2.创建WebGL Proaram
3.将数据存入缓冲区
4.将缓冲区数据读取到 GPU
5.GPU 执行WebGL程序,输出结果
4、创建 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);
5、3D Matrix
3D标准模型的四个齐次矩阵(mat4)
1.投影矩阵Projection Matrix：处理坐标系
2.模型矩阵Model Matrix：改变大小方向
3.视图矩阵View Matrix：模拟摄像机在某个位置观察，移动摄像机位置观察
4.法向量矩阵Normal Matrix
我们可以根据矩阵，数学模型，来做自己想要做的东西自己创造出如下图一样的东西
5、总结
想深入学习需要很多数学知识
