webgl 在浏览器中的执行流程
缓冲区
gl.COLOR_BUFFER_BIT // 颜色缓冲区
gl.DEPTH_BUFFER_BIT // 深度缓冲区
gl.STENCIL_BUFFER_BIT // 模板缓冲区
着色器
1. 颜色着色器
2. 片元着色器
attribute 、 uniform、varying
- attribute: 只存在顶点着色器，实时改变的，通常用于存放顶点数据、颜色值。类型只能为 float，vec2，vec3，vec4，mat2，mat3，mat4
- uniform: 顶点着色器、片元着色器都存在。一次渲染过程不变。
- varying：可以将顶点着色器传递给片元着色器，只接受 float，vec2，vec3，vec4，mat2，mat3，mat4。
绘制
// 顶点着色器绘制图形
gl.drawArrays(mode, first<number>, count<number>)
// mode 绘制方式，包括 gl.POINTS gl.LINES gl.LINE_STRIP gl.LINE_LOOP gl.TRIANGLES gl.TRIANGLE_STRIP gl.TRIANGLE_FAN
// first 从哪个顶点开始绘制
// count 绘制需要用到几个顶点
顶点着色器顶点数据存入缓冲区对象步骤
// 1. 创建缓冲区
gl.createBuffer()
// 2. 将缓冲区对象绑定到 target 上
// target gl.ARRAY_BUFFER 缓冲区对象包含顶点数据；gl.ELEMENT_ARRAY_BUFFER 缓冲区对象包含顶点的索引值
// buffer gl.createBuffer() 的返回值
gl.bindBuffer(target, buffer)
// 3. 将数据写入缓冲区
// target gl.ARRAY_BUFFER gl.ELEMENT_ARRAY_BUFFER
// data 写入的数据 Float32Array
// usage 表示程序如何使用存储在缓冲区的数据，传入错误的值不会报错，只是不会优化。gl.STATIC_DRAW 只向缓冲区写入一次数据，但需要绘制很多次；gl.STREAM_DRAW 只写入一次数据，然后绘制若干次 gl.DYNAMIC_DRAW 多次写入，并绘制多次
gl.bufferData(target, data, usage)
// 4. 将缓冲区对象分配给一个 attribute 变量
// location 指定待分配 attribute 变量的存储位置
// size 指定缓冲区中每个顶点的分量个数(1到4)
// type 数据类型 gl.UNSIGNED_BYTE => Uint8Array
// normalize true | false 是否将非浮点数的数据归化到 [0, 1] | [-1, 1] 区间
// stride 相邻两个顶点间的字节数
// offset 指定缓冲区中的偏移量
gl.vertexAttribPointer(location, size, type, normalize, stride, offset)
// 5. 开启缓冲区变量
gl.enableVertexAttribArray()
顶点着色器 => 片元着色器
- 图形装配过程：将孤立的顶点坐标装配成几何图形。几何图形的类别由 gl.drawArrays() 函数第一个参数决定。
- 将装配好的几何图形转化为片元
