WebGL 基础教程：采用索引缓存共享数据，提升内存效率

WebGL 基础教程：采用索引缓存共享数据，提升内存效率 | 极客日志

参数	类型	必填	详细说明	本示例中的值
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` (颜色)

<!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"></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>

定义索引数据：定义两个三角形的绘制顺序，共用顶点 0。

const indices = new Uint16Array([
    0, 1, 2,  // 第一个三角形 (左侧)，使用顶点 0,1,2
    0, 3, 4   // 第二个三角形 (右侧)，使用顶点 0,3,4
]);

创建索引缓冲区 (ELEMENT_ARRAY_BUFFER) - 关键步骤！

const indexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer);
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, indices, gl.STATIC_DRAW);

获取着色器中 attribute 变量的位置，配置位置属性

gl.vertexAttribPointer(aPosition, 2, gl.FLOAT, false, stride, 0);

绘制图形，GPU 会按照索引顺序，从顶点缓冲区中取出对应顶点进行组装

gl.drawElements(
    gl.TRIANGLES,     // 绘制三角形
    indices.length,   // 使用 6 个索引
    gl.UNSIGNED_SHORT,// 索引数据类型为无符号短整型 (对应 Uint16Array)
    0                 // 从索引缓冲区的开头读取
);

// 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 个顶点和索引缓存绘制了两个不重叠且共用顶点的三角形。');

参数	本示例中的值	作用	常见错误
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 倍数的值）

// 每个顶点的总字节数
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 顶点 +6 索引)	优势
唯一顶点数	6	5	减少 1 个
总内存占用	6 × 5 × 4 = 120 字节	(5 × 5 × 4) + (6 × 2) = 100 + 12 = 112 字节	节省 8 字节 (约 6.7%)
绘制调用次数	1 次 (`drawArrays`)	1 次 (`drawElements`)	相同
顶点复用能力	无	有 (顶点 0 被复用)	为复杂模型奠定基础

WebGL 基础教程：采用索引缓存共享数据，提升内存效率

前言

适用人群

核心目标

基础知识：什么是索引缓存？

为什么需要索引缓存？

索引缓存的工作原理

索引缓存的核心使用场景

复杂 3D 模型渲染

更多推荐文章

相关免费在线工具

几何体拼接与复用

动态 LOD（细节层次）技术

骨骼动画与蒙皮

程序化生成地形

本示例的应用场景

vertexAttribPointer 参数深度解析

函数签名

参数详解表格

stride 和 offset 的可视化理解

实战准备：HTML 结构与环境

核心实现：使用索引缓存绘制共用顶点的三角形

关键步骤

核心参数解析总结

vertexAttribPointer 参数速查表

stride 和 offset 的计算黄金法则

索引缓存使用场景总结

性能对比与数据总结

完整示例与总结

更多推荐文章

相关免费在线工具

WebGL 基础教程：采用索引缓存共享数据，提升内存效率

前言

适用人群

核心目标

基础知识：什么是索引缓存？

为什么需要索引缓存？

索引缓存的工作原理

索引缓存的核心使用场景

复杂 3D 模型渲染

微信扫一扫，关注极客日志

更多推荐文章

相关免费在线工具

几何体拼接与复用

动态 LOD（细节层次）技术

骨骼动画与蒙皮

程序化生成地形

本示例的应用场景

vertexAttribPointer 参数深度解析

函数签名

参数详解表格

stride 和 offset 的可视化理解

实战准备：HTML 结构与环境

核心实现：使用索引缓存绘制共用顶点的三角形

关键步骤

核心参数解析总结

vertexAttribPointer 参数速查表

stride 和 offset 的计算黄金法则

索引缓存使用场景总结

性能对比与数据总结

完整示例与总结

微信扫一扫，关注极客日志

更多推荐文章

相关免费在线工具