一、前言
1.1 适用人群
本教程适合已经了解基础的HTML/CSS/JavaScript，对WebGL有基本概念（知道着色器、绘制流程），但希望深入理解其核心性能机制——缓冲区（Buffer） 以及索引缓存（Index Buffer） 的开发者。我们将聚焦于“索引缓存如何通过顶点复用高效管理顶点数据”，并通过一个5个顶点绘制两个共用顶点三角形的经典案例，解决内存浪费的核心痛点。
效果如图：
1.2 核心目标
-
理解本质：掌握索引缓存（ELEMENT_ARRAY_BUFFER）的作用，它如何与GPU通信，以及为何它是处理复杂模型绘制的基石。
-
掌握方法：学会创建、绑定、配置索引缓冲区，并使用 drawElements 进行绘制，体验顶点复用带来的内存节省。
-
实战应用：通过完整代码示例，使用 5个唯一顶点 和 6个索引，绘制两个空间上不重叠但共用同一个顶点的彩色三角形。
二、基础知识：什么是索引缓存？
2.1 为什么需要索引缓存？
在WebGL中，顶点缓冲区（ARRAY_BUFFER） 用于存储顶点数据。当绘制由多个三角形组成的图形时，许多顶点会被多个三角形共享。如果不使用索引缓存，这些共享的顶点数据会被重复存储，造成极大的内存浪费。
示例对比：
-
两个无共享顶点的三角形：需要6个独立顶点。
-
两个共享一个顶点的三角形：只需要5个唯一顶点（一个被共用）。通过索引缓存，我们可以只存储5份顶点数据，再用6个索引定义绘制顺序，从而节省内存。
2.2 索引缓存的工作原理
索引缓存是一种特殊的缓冲区，绑定到 gl.ELEMENT_ARRAY_BUFFER 目标。它不存储顶点属性，而是存储指向顶点缓冲区中顶点的整数索引。
核心思想：将“顶点数据”与“绘制顺序”分离。
-
顶点缓冲区 (ARRAY_BUFFER)：只存储所有唯一的顶点（例如5个顶点）。
-
索引缓冲区 (ELEMENT_ARRAY_BUFFER)：存储一个索引列表，定义如何连接这些唯一顶点来构成三角形（例如6个索引）。
工作流程：
在JS中创建唯一顶点数据数组。
创建索引数组，定义三角形的连接顺序（例如 [0, 1, 2, 0, 3, 4]）。
创建顶点缓冲区并上传顶点数据。
创建索引缓冲区并上传索引数据。
在着色器中用 vertexAttribPointer 配置顶点属性读取方式。
使用 gl.drawElements 发起绘制调用。GPU会按照索引顺序，从顶点缓冲区中取出对应顶点进行组装。
三、索引缓存的核心使用场景
索引缓存是WebGL性能优化的基石技术，广泛应用于以下场景：
3.1 复杂3D模型渲染
场景描述：渲染一个由数千个三角形组成的复杂模型（如角色、建筑、地形）。这些模型的顶点共享率极高，一个顶点可能被多个三角形共用。
索引缓存的价值：
-
内存节省：避免重复存储共享顶点，通常可节省50%以上的显存。
-
性能提升：减少顶点着色器的调用次数，降低GPU负载。
-
示例：一个细分球体有数千个三角形，但顶点数远少于三角形数×3。
3.2 几何体拼接与复用
场景描述：需要绘制大量重复的几何体（如城市中的楼房、森林中的树木）。这些几何体形状相同，但位置、颜色不同。
索引缓存的价值：
-
结合实例化绘制，可以进一步优化性能。
-
每个几何体的内部顶点通过索引缓存组织，外部通过实例化属性变换。
3.3 动态LOD（细节层次）技术
场景描述：根据物体距离摄像机的远近，使用不同精细度的模型版本。
索引缓存的价值：
-
可以在同一个顶点缓冲区中存储最高精度的顶点数据。
-
通过切换不同的索引缓冲区（或同一索引缓冲区的不同偏移量），实现低精度、中精度、高精度模型的切换。
-
顶点数据无需重复上传，只需改变绘制时的索引范围和顺序。
3.4 骨骼动画与蒙皮
场景描述：角色动画中，顶点受多个骨骼影响，权重信息与顶点绑定。
索引缓存的价值：
-
顶点属性（位置、法线、骨骼权重）存储在顶点缓冲区。
-
索引缓存确保动画过程中三角形连接关系不变，顶点数据可以动态更新。
3.5 程序化生成地形
场景描述：通过高度图动态生成网格地形，顶点数量巨大。
索引缓存的价值：
-
顶点缓冲区存储所有网格顶点。
-
索引缓冲区定义三角形带（Triangle Strip）或三角形列表，高效组织绘制顺序。
-
可以快速修改地形高度（更新顶点缓冲区）而不影响连接关系。
3.6 本示例的应用场景
本教程中的5顶点两个三角形，虽然简单，但演示了索引缓存最核心的能力：
-
顶点复用：红色顶点V0被左右两个三角形共享。
-
灵活连接：通过索引数组 [0,1,2,0,3,4]，两个三角形可以独立绘制而不互相干扰。
-
内存优化：相比6个独立顶点，节省了8字节内存（约6.7%）。
四、vertexAttribPointer 参数深度解析
gl.vertexAttribPointer 是WebGL中核心的函数之一，它将顶点缓冲区中的数据与着色器中的attribute变量连接起来。理解其每个参数的含义，是正确配置顶点数据的关键。
4.1 函数签名
gl.vertexAttribPointer(index, size, type, normalized, stride, offset);
4.2 参数详解表格
| index | GLuint | 是 | 属性位置索引。指定当前配置对应着色器中的哪个attribute变量。这个值必须与通过gl.getAttribLocation获取或手动在着色器中layout(location = index)指定的值一致。 | aPosition (位置属性索引) aColor (颜色属性索引) |
| size | GLint | 是 | 每顶点分量数。指定每个顶点包含的分量数量，必须是1、2、3或4。例如，vec2位置使用2，vec3颜色使用3。 | 2 (位置x,y) 3 (颜色r,g,b) |
| type | GLenum | 是 | 数据类型。指定缓冲区中每个分量的数据类型，常用的有： • gl.FLOAT：32位浮点数（4字节） • gl.UNSIGNED_BYTE：无符号字节（1字节），范围0-255 • gl.SHORT：有符号短整数（2字节） • gl.UNSIGNED_SHORT：无符号短整数（2字节） |
gl.FLOAT |
| normalized | GLboolean | 是 | 是否归一化。当type为整数类型时此参数有效： • true：将整数映射到浮点范围。无符号整数映射到[0,1]，有符号整数映射到[-1,1]。 • false：直接转换为浮点数（如127变成127.0）。 当type为gl.FLOAT时此参数无效，应设为false。 |
false |
| stride | GLsizei | 是 | 步长。指定相邻两个顶点同一属性之间的字节间隔。如果数据是紧密排列的（即没有间隙），填0。如果数据是交错排列的（如本示例），需要计算间隔。例如，每个顶点包含位置(2个float)和颜色(3个float)，则步长 = (2+3) × 4 = 20字节。 | 20 |
| offset | GLintptr | 是 | 偏移量。指定该属性在缓冲区中第一个顶点数据的起始字节位置。例如，在交错布局中，位置属性从0开始，颜色属性从8字节（2个float）开始。 | 0 (位置) 8 (颜色) |
4.3 stride 和 offset 的可视化理解
对于本示例中的交错数据布局 [x, y, r, g, b]，stride 和 offset 的作用如下图所示：
ascii
缓冲区内存布局 (每个顶点占用20字节)：
-
stride = 20：告诉GPU，从一个顶点的某个属性跳到下一个顶点的同一个属性，需要跨越20字节。
-
offset = 0 (位置属性)：告诉GPU，第一个顶点的位置数据从缓冲区的第0字节开始。
-
offset = 8 (颜色属性)：告诉GPU，第一个顶点的颜色数据从缓冲区的第8字节开始（跳过了前2个float）。
五、实战准备：HTML结构与环境
首先，我们需要一个承载WebGL画布的HTML文件。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>WebGL示例</title>
<style>
#webgl {
border: 2px solid red;
}
</style>
</head>
<body>
<canvas id="canvas" width="400" height="400"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gl-matrix/2.8.1/gl-matrix-min.js"></script>
<script src="main.js"></script>
</body>
</html>
</body>
</html>
六、核心实现：使用索引缓存绘制共用顶点的三角形
接下来是 main.js 中的完整代码，我们将分步解释。
关键步骤
1.定义索引数据 定义两个三角形的绘制顺序，共用顶点0
const indices = new Uint16Array([
0, 1, 2, // 第一个三角形 (左侧)，使用顶点0,1,2
0, 3, 4 // 第二个三角形 (右侧)，使用顶点0,3,4
]);
2. 创建索引缓冲区 (ELEMENT_ARRAY_BUFFER) – 关键步骤！
const indexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer);
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, indices, gl.STATIC_DRAW);
3.获取着色器中attribute变量的位置，配置位置属性
gl.vertexAttribPointer(aPosition, 2, gl.FLOAT, false, stride, 0);
4.绘制图形，GPU会按照索引顺序，从顶点缓冲区中取出对应顶点进行组装
gl.drawElements(
gl.TRIANGLES, // 绘制三角形
indices.length, // 使用6个索引
gl.UNSIGNED_SHORT, // 索引数据类型为无符号短整型 (对应Uint16Array)
0 // 从索引缓冲区的开头读取
);
javascript
// main.js
// — 步骤1：初始化WebGL上下文 —
const canvas = document.getElementById('canvas');
const gl = canvas.getContext('webgl');
if (!gl) {
alert('您的浏览器不支持WebGL！');
throw new Error('WebGL初始化失败');
}
// 设置视口大小和清屏颜色
gl.viewport(0, 0, canvas.width, canvas.height);
gl.clearColor(0.1, 0.1, 0.1, 1.0);
// — 步骤2：编写着色器程序 —
// 顶点着色器：接收位置和颜色属性
const vsSource = `
attribute vec2 aPosition; // 2D位置 (x, y)
attribute vec3 aColor; // 颜色 (r, g, b)
varying vec3 vColor;
void main() {
gl_Position = vec4(aPosition, 0.0, 1.0);
vColor = aColor;
}
`;
// 片元着色器：接收并输出颜色
const fsSource = `
precision mediump float;
varying vec3 vColor;
void main() {
gl_FragColor = vec4(vColor, 1.0);
}
`;
// — 步骤3：创建着色器程序 —
// 辅助函数：编译着色器
function loadShader(gl, type, source) {
const shader = gl.createShader(type);
gl.shaderSource(shader, source);
gl.compileShader(shader);
if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
console.error('着色器编译错误:', gl.getShaderInfoLog(shader));
gl.deleteShader(shader);
return null;
}
return shader;
}
// 编译顶点和片元着色器
const vertexShader = loadShader(gl, gl.VERTEX_SHADER, vsSource);
const fragmentShader = loadShader(gl, gl.FRAGMENT_SHADER, fsSource);
// 创建程序并链接
const program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);
if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
console.error('程序链接失败:', gl.getProgramInfoLog(program));
}
gl.useProgram(program);
// — 步骤4：准备数据 (关键部分：5个顶点 + 6个索引) —
// 4.1 顶点数据：5个唯一顶点，每个顶点包含位置(x,y)和颜色(r,g,b)
const vertices = new Float32Array([
// 顶点0 (共用顶点，红色) – 位于中间偏左
-0.2, 0.0, 1.0, 0.0, 0.0,
// 顶点1 (三角形1左下，绿色)
-0.8, -0.5, 0.0, 1.0, 0.0,
// 顶点2 (三角形1左上，蓝色)
-0.8, 0.5, 0.0, 0.0, 1.0,
// 顶点3 (三角形2右下，黄色)
0.8, -0.5, 1.0, 1.0, 0.0,
// 顶点4 (三角形2右上，紫色)
0.8, 0.5, 1.0, 0.0, 1.0
]);
// 4.2 索引数据：定义两个三角形的绘制顺序，共用顶点0
const indices = new Uint16Array([
0, 1, 2, // 第一个三角形 (左侧)，使用顶点0,1,2
0, 3, 4 // 第二个三角形 (右侧)，使用顶点0,3,4
]);
// — 步骤5：创建并填充缓冲区 —
// 5.1 创建顶点缓冲区 (ARRAY_BUFFER)
const vertexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
// 5.2 创建索引缓冲区 (ELEMENT_ARRAY_BUFFER) – 关键步骤！
const indexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer);
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, indices, gl.STATIC_DRAW);
// — 步骤6：获取着色器中attribute变量的位置 —
const aPosition = gl.getAttribLocation(program, 'aPosition');
const aColor = gl.getAttribLocation(program, 'aColor');
// — 步骤7：使用 vertexAttribPointer 配置顶点属性读取方式 —
// 计算步长：每个顶点占用的字节数 (2个位置float + 3个颜色float) * 4字节
const stride = (2 + 3) * 4; // 20字节
// 重新绑定顶点缓冲区（确保当前操作的是顶点缓冲区）
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
// 配置位置属性 aPosition
// 参数详解：
// index: aPosition – 对应顶点着色器中的位置属性
// size: 2 – 每个顶点取2个分量 (x,y)
// type: gl.FLOAT – 32位浮点数
// normalized: false – 浮点数不需要归一化
// stride: 20 – 跳到下一个顶点位置属性需要20字节
// offset: 0 – 位置数据从缓冲区开头开始
gl.vertexAttribPointer(aPosition, 2, gl.FLOAT, false, stride, 0);
gl.enableVertexAttribArray(aPosition);
// 配置颜色属性 aColor
// 参数详解：
// index: aColor – 对应顶点着色器中的颜色属性
// size: 3 – 每个顶点取3个分量 (r,g,b)
// type: gl.FLOAT – 32位浮点数
// normalized: false – 浮点数不需要归一化
// stride: 20 – 跳到下一个顶点颜色属性需要20字节
// offset: 8 – 颜色数据从第8字节开始 (跳过前2个float位置数据)
gl.vertexAttribPointer(aColor, 3, gl.FLOAT, false, stride, 2 * 4);
gl.enableVertexAttribArray(aColor);
// 注意：索引缓冲区已经在步骤5.2中绑定，无需再次配置
// — 步骤8：绘制场景 —
// 清空画布
gl.clear(gl.COLOR_BUFFER_BIT);
// 使用索引绘制函数 drawElements
// 参数：mode(图元类型), count(索引数量), type(索引数据类型), offset(字节偏移)
gl.drawElements(
gl.TRIANGLES, // 绘制三角形
indices.length, // 使用6个索引
gl.UNSIGNED_SHORT, // 索引数据类型为无符号短整型 (对应Uint16Array)
0 // 从索引缓冲区的开头读取
);
console.log('✅ 绘制完成：使用5个顶点和索引缓存绘制了两个不重叠且共用顶点的三角形。');
七、核心参数解析总结
7.1 vertexAttribPointer 参数速查表
| index | aPosition / aColor | 关联着色器中的attribute变量 | 值未通过gl.getAttribLocation正确获取 |
| size | 2 (位置) / 3 (颜色) | 定义每个顶点取几个数值 | 与着色器中类型不匹配（如对vec3传了2） |
| type | gl.FLOAT | 定义数据类型和字节大小 | 对整数数据未正确设置normalized |
| normalized | false | 是否将整数映射到浮点范围 | 对颜色等归一化数据误设为false |
| stride | 20 | 定义相邻顶点同一属性的字节间隔 | 计算错误导致数据读取错位 |
| offset | 0 (位置) / 8 (颜色) | 定义第一个顶点属性的起始位置 | 未考虑字节对齐（如对FLOAT传了不是4倍数的值） |
7.2 stride 和 offset 的计算黄金法则
javascript
// 每个顶点的总字节数
const vertexSizeBytes = (positionComponents + colorComponents + …) * Float32Array.BYTES_PER_ELEMENT;
// 位置属性的 stride 和 offset
gl.vertexAttribPointer(posLoc, positionComponents, gl.FLOAT, false, vertexSizeBytes, 0);
// 颜色属性的 stride 和 offset (假设位置之后)
const colorOffsetBytes = positionComponents * Float32Array.BYTES_PER_ELEMENT;
gl.vertexAttribPointer(colorLoc, colorComponents, gl.FLOAT, false, vertexSizeBytes, colorOffsetBytes);
八、索引缓存使用场景总结
| 复杂3D模型 | 角色、建筑、地形等数千三角形模型 | 节省50%+内存，减少顶点着色器调用 | 游戏角色模型 |
| 几何体复用 | 大量相同形状的物体（城市、森林） | 结合实例化，单次绘制调用渲染大量物体 | 森林中的树木 |
| 动态LOD | 根据距离切换模型精细度 | 同一顶点数据，不同索引实现细节层次 | 开放世界地形 |
| 骨骼动画 | 顶点受多个骨骼影响 | 顶点属性与索引分离，动画更新高效 | 角色行走动画 |
| 程序化地形 | 高度图生成网格 | 网格顶点复用，三角形带优化 | 无尽跑酷游戏地面 |
| 本示例 | 两个三角形共用顶点 | 演示顶点复用基本机制 | 学习索引缓存入门 |
九、性能对比与数据总结
为了直观感受索引缓存带来的内存节省，我们对比一下：
| 唯一顶点数 | 6 | 5 | 减少1个 |
| 总内存占用 | 6 × 5 × 4 = 120字节 | (5 × 5 × 4) + (6 × 2) = 100 + 12 = 112字节 | 节省8字节 (约6.7%) |
| 绘制调用次数 | 1次 (drawArrays) | 1次 (drawElements) | 相同 |
| 顶点复用能力 | 无 | 有 (顶点0被复用) | 为复杂模型奠定基础 |
虽然本示例因三角形不重叠，节省的内存比例不高，但它清晰地展示了顶点复用的机制。当模型复杂度增加，顶点共享率变高时（例如一个由两个三角形拼成的正方形只需4个顶点+6个索引，相比6个顶点节省25%内存），索引缓存的优势将变得非常显著。
十、完整示例与总结
将以上 main.js 的代码整合到HTML文件中，你就可以看到一个包含两个彩色三角形的静态画面：
-
左侧三角形：由共用顶点V0（红色）、V1（绿色）、V2（蓝色）构成渐变。
-
右侧三角形：由共用顶点V0（红色）、V3（黄色）、V4（紫色）构成渐变。
两个三角形在空间上左右分离，通过索引 [0, 1, 2, 0, 3, 4] 巧妙地复用了红色的V0顶点。
总结：
索引缓存是WebGL中处理复杂模型的核心机制，它将“顶点数据”与“绘制顺序”解耦，通过顶点复用节省显存和带宽。
使用场景广泛：从复杂3D模型到程序化生成，从LOD到骨骼动画，索引缓存无处不在。
vertexAttribPointer 是连接CPU数据与GPU着色器的桥梁，正确理解并配置其6个参数是WebGL开发的基石。
stride 和 offset 是处理交错数据布局的关键，它们的计算必须准确无误。
即使在本例这种非典型的场景中，我们也掌握了索引缓存和vertexAttribPointer的标准用法。理解并掌握它们，是迈向高效WebGL渲染的重要一步。
感谢阅读！ 喜欢本文请不要吝啬你的 一键三连：点赞、收藏、留言，让更多小伙伴看到这份干货！
