在动态绘制一个点文章中juejin.cn/post/706776… 只能绘制一个点，而不能绘制多个顶点组成的图形，比如三角形、矩形和立方体
所以我们需要方法，一次性的将图形的顶点全部传入顶点着色器，然后把图形画出来。
webGL提供了一种很方便的机制，即缓冲区对象，它可以一次性的向着色器传入多个顶点的数据。
<canvas id="glcanvas" width="640" height="480"></canvas>
// 顶点着色器程序
const VSHADER_SOURCE = `attribute vec4 a_Position; // a1.声明attribute变量
void main() {
gl_Position = a_Position; // a2.将attribute变量赋值给gl_Position变量
gl_PointSize = 10.0;
}`;
// 片元着色器程序
const FSHADER_SOURCE = `void main() {
gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
}`;
// 顶点缓冲对象（VBO）流程封装
function initVertexBuffers(gl) {
// b1.创建缓冲区对象
let vertexBuffer = gl.createBuffer();
if (!vertexBuffer) {
console.log("创建buffer Object缓冲区对象失败！");
return -1;
}
// b2.将缓冲区对象绑定到目标
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
// b3.向缓冲区对象中写入数据
let vertices = new Float32Array([
-0.5, 0.5,
-0.5, -0.5,
0.5, 0.5,
0.5, -0.5,
]); // 这里为了方便，只传入x，y，即这里有四个顶点
gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
// a3.获取 attribute 变量的存储位置
const a_Position = gl.getAttribLocation(gl.program, "a_Position");
if (a_Position < 0) {
console.log("获取a_Position的存储位置失败!");
return -1;
}
// b4.将缓冲区对象分配给 attribute (a_Position) 变量
// 第二个参数表示缓冲区中每个顶点有几个分量值，因为在缓冲区中我只提供了x，y，所以我们传入2
gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0);
// b5.连接 attribute (a_Position) 变量与分配给他的缓冲区对象
gl.enableVertexAttribArray(a_Position);
let n = vertices.length / 2; // 两个值表示一个顶点，这里计算出有4个点，供后面gl.drawArrays()使用
return n;
}
function main() {
// 1.获取canvas元素
const canvas = document.getElementById("glcanvas");
// 2.获取webgl绘图上下文
const gl = canvas.getContext("webgl");
if (!gl) {
alert("不支持webgl");
return;
}
// 初始化着色器(封装在另一个函数库中，具体请看 https://juejin.cn/post/7066335207510507534)
if (!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)) {
console.log("着色器初始化失败");
return;
}
// 3.设置顶点位置
let n = initVertexBuffers(gl);
if (n < 0) {
console.log("设置顶点位置失败");
return;
}
// 4.设置背景色（指定清空canvas的颜色）
gl.clearColor(0.0, 1.0, 0.0, 1.0);
// 5.清空canvas
gl.clear(gl.COLOR_BUFFER_BIT);
// 6.绘制
// gl.POINTS: 绘制一系列点。
// gl.LINE_STRIP: 绘制一个线条。即，绘制一系列线段，上一点连接下一点。
// gl.LINE_LOOP: 绘制一个线圈。即，绘制一系列线段，上一点连接下一点，并且最后一点与第一个点相连。
// gl.LINES: 绘制一系列单独线段。每两个点作为端点，线段之间不连接。
// gl.TRIANGLE_STRIP: 绘制一个三角带。
// gl.TRIANGLE_FAN: 绘制一个三角扇。
// gl.TRIANGLES: 绘制一系列三角形。每三个点作为顶点。
gl.drawArrays(gl.LINE_STRIP, 0, n);
}
main();
缓冲区对象
缓冲区对象是webGL系统中的一块内存区域，可以一次性地向缓冲区对象中填充大量的顶点数据，然后将这些数据保存在其中，供顶点着色器使用。
使用缓冲区对象流程
- b1.创建缓冲区对象（gl.createBuffer()）
- b2.将缓冲区对象绑定到目标（gl.bindBuffer()）
- b3.向缓冲区对象中写入数据（gl.bufferData()）
- b4.将缓冲区对象分配给 attribute 变量（gl.vertexAttribPointer()）
- b5.开启 attribute 变量（gl.enableVertexAttribArray()）
gl.createBuffer()
WebGLRenderingContext.createBuffer() 方法可创建并初始化一个用于储存顶点数据或着色数据的 WebGLBuffer 对象
/**
* 返回值：一个用于储存顶点数据或着色数据的WebGLBuffer对象
*/
WebGLBuffer gl.createBuffer();
gl.bindBuffer()
WebGLRenderingContext.bindBuffer() 方法将给定的 WebGLBuffer 绑定到目标。这个‘目标’表示缓冲区对象的用途。
/**
* @param target GLenum 指定绑定点(target)。可能的值：
* gl.ARRAY_BUFFER: 包含顶点属性的Buffer，如顶点坐标，纹理坐标数据或顶点颜色数据。
* gl.ELEMENT_ARRAY_BUFFER: 用于元素索引的Buffer。
* @param buffer 要绑定的 WebGLBuffer
*/
void gl.bindBuffer(target, buffer);
gl.bufferData()
WebGLRenderingContext.bufferData() 方法创建并初始化了 Buffer 对象的数据存储区
/**
* @param target GLenum 指定Buffer绑定点（目标）。可取以下值：
* gl.ARRAY_BUFFER: 包含顶点属性的Buffer，如顶点坐标，纹理坐标数据或顶点颜色数据。
* gl.ELEMENT_ARRAY_BUFFER: 用于元素索引的Buffer。
* @param srcData 一个ArrayBuffer，SharedArrayBuffer 或者 ArrayBufferView 类型的数组对象，将被复制到Buffer的数据存储区。 如果为null，数据存储区仍会被创建，但是不会进行初始化和定义。
* @param usage GLenum 表示程序将如何使用存储在缓冲区对象中的数据。该参数将帮助webGL优化操作，但是就算传入了错误的值，也不会终止程序（仅仅是降低程序的效率）：
* gl.STATIC_DRAW: 只会向缓冲区对象中写入一次数据，但需要绘制很多次。
* gl.DYNAMIC_DRAW: 会向缓冲区对象中多次写入数据，并绘制很多次。
* gl.STREAM_DRAW: 只会向缓冲区对象中写入一次数据，然后绘制若干次。
*/
void gl.bufferData(target, srcData, usage);
ArrayBuffer类型化数组
为了绘制三维图形，webGL通常需要同时处理大量相同类型的数据，例如顶点的坐标，为了优化性能，webGL为每种基本数据类型引入了一种特殊的数组（类型化数组）
webgl使用的各种类型化数组
| 数组类型 | 每个元素所占字节数 | 描述 |
|---|---|---|
| Int8Array | 1 | 8位整数型（signed char) |
| UInt8Array | 1 | 8位无符号整数型（unsigned char) |
| Int16Array | 2 | 16位整数型（signed short) |
| UInt16Array | 2 | 16位无符号整数型（unsigned char) |
| Int32Array | 4 | 32位整数型（signed int) |
| UInt32Array | 4 | 32位无符号整数型（unsigned char) |
| Float32Array | 4 | 单精度32位浮点数（float) |
| Float64Array | 8 | 双精度64位浮点数（double) |
类型化数组的方法、属性和常量
| 方法、属性和常量 | 描述 |
|---|---|
| get(index) | 获取第index个元素值 |
| set(inex,value) | 设置第index个元素的值为value |
| set(array,offset) | 从第offset个蒜素开始将数组array中的值填充进去数据的长度 |
| length | 数组的长度 |
| BYTES_PER_ELEMENT | 数组中每个元素所占的字节数 |
顶点数据一般使用Float32Array
let vertices = new Float32Array([
-0.5, 0.5, -0.5, -0.5, 0.5, 0.5, 0.5, -0.5,
]);
gl.vertexAttribPointer()
在动态绘制一个点文章中juejin.cn/post/706776… 使用vertexAttrib3f为attribute变量分配值，但是这个方法一次只能向attribute变量分配一个值，而vertexAttribPointer方法可以将整个缓冲区对象分配给attribute变量
WebGLRenderingContext.vertexAttribPointer() 将绑定到gl.ARRAY_BUFFER的缓冲区对象分配给由index指定的attribute变量，告诉显卡从当前绑定的缓冲区（bindBuffer()指定的缓冲区）中读取顶点数据。
/**
* @param index 指定待分配attribute变量的存储位置。
* @param size 指定每个顶点属性的组成数量，必须是1，2，3或4。
* @param type 指定数组中每个元素的数据类型可能是：
* gl.BYTE: 字节，Int8Array
* gl.UNSIGNED_BYTE: 无符号字节，Uint8Array
* gl.SHORT: 短整型，Int16Array
* gl.UNSIGNED_SHORT: 无符号短整型，Uint16Array
* gl.INT: 整型，Int32Array
* gl.UNSIGNED_INT: 无符号整型，Uint32Array
* gl.FLOAT: 浮点型，Float32Array
* @param normalized 当转换为浮点数时是否应该将整数数值归一化到特定的范围。
* 对于类型gl.BYTE和gl.SHORT，如果是true则将值归一化为[-1, 1]
* 对于类型gl.UNSIGNED_BYTE和gl.UNSIGNED_SHORT，如果是true则将值归一化为[0, 1]
* 对于类型gl.FLOAT此参数无效
* @param stride 一个GLsizei，以字节为单位指定连续顶点属性开始之间的偏移量(即数组中一行长度)。不能大于255。如果stride为0，则假定该属性是紧密打包的，即不交错属性，每个属性在一个单独的块中，下一个顶点的属性紧跟当前顶点之后。
* @param offset GLintptr指定顶点属性数组中第一部分的字节偏移量。必须是类型的字节长度的倍数。
*/
void gl.vertexAttribPointer(index, size, type, normalized, stride, offset);
gl.enableVertexAttribArray()
WebGLRenderingContext.enableVertexAttribArray() 方法使顶点着色器能够访问缓冲区内的数据（需要手动执行开启）。
在 WebGL 中，作用于顶点的数据会先储存在 attributes。这些数据仅对 JavaScript 代码和顶点着色器可用。属性由索引号引用到 GPU 维护的属性列表中。在不同的平台或 GPU 上，某些顶点属性索引可能具有预定义的值。创建属性时，WebGL 层会分配其他属性。
无论怎样，都需要你使用 enableVertexAttribArray()方法，来激活每一个属性以便使用，不被激活的属性是不会被使用的。一旦激活，以下其他方法就可以获取到属性的值了，包括 vertexAttribPointer()，vertexAttrib()，和 getVertexAttrib()。
/**
* @param index 类型为GLuint 的索引，指向要激活的顶点属性。如果您只知道属性的名称，不知道索引，您可以使用以下方法来获取索引getAttribLocation().
*/
void gl.enableVertexAttribArray(index);
gl.drawArrays()
WebGLRenderingContext.drawArrays() 方法用于从向量数组中绘制图元。
/**
* @param mode GLenum 类型，指定绘制图元的方式，可能值如下:
* gl.POINTS: 绘制一系列点。
* gl.LINE_STRIP: 绘制一个线条。即，绘制一系列线段，上一点连接下一点。
* gl.LINE_LOOP: 绘制一个线圈。即，绘制一系列线段，上一点连接下一点，并且最后一点与第一个点相连。
* gl.LINES: 绘制一系列单独线段。每两个点作为端点，线段之间不连接。
* gl.TRIANGLE_STRIP：绘制一个三角带。
* gl.TRIANGLE_FAN：绘制一个三角扇。
* gl.TRIANGLES: 绘制一系列三角形。每三个点作为顶点。
* @param first GLint 类型，指定从哪个点开始绘制。
* @param count GLsizei 类型，指定绘制需要使用到多少个点
*/
void gl.drawArrays(mode, first, count);
图片装配
顶点着色器获取到顶点数据后，执行gl.drawArrays(gl.LINE_STRIP, 0, n)时，当n有几个，顶点着色器就执行几次
- 1.修改first = 0，count = 1时，从第一个顶点开始，顶点着色器只会执行1次，所以只会绘制第一个点后就停止了。（只能看到一个点）
- 2.修改first = 1，count = 1时，从第二个顶点开始，顶点着色器只会执行1次，所以绘制第二个点后就停止了。（只能看到一个点）
- 3.修改first = 1，count = 2时，从第二个顶点开始，顶点着色器只会执行2次，所以绘制第二个，第三个点后就停止了。（能看到两个点）
- 4.以此类推...
mode模式绘制的基本图形
