JS `GPU` `Memory Management`：纹理、缓冲区与着色器程序的优化

各位观众老爷，大家好！我是今天的主讲人，很高兴能和大家一起聊聊JS GPU Memory Management这个磨人的小妖精。

今天咱们的目标很明确，就是要搞清楚在JS里，怎么像个老司机一样，高效地管理GPU的内存，让你的WebGL应用跑得飞起，而不是卡成PPT。

一、GPU内存：你口袋里的钞票，花起来要精打细算

首先，我们需要明确一点：GPU内存是极其宝贵的资源。它就像你口袋里的钞票，能买很多好东西（高性能渲染），但是花没了就只能饿肚子（性能暴跌）。

GPU内存不像CPU内存那样可以随便申请和释放，它的管理更加严格和复杂。在WebGL中，我们主要通过以下几种方式来使用GPU内存：

• 纹理（Textures）： 存放图像数据，比如模型的皮肤、环境贴图等等。
• 缓冲区（Buffers）： 存放顶点数据、索引数据，也就是模型的骨架和肌肉。
• 着色器程序（Shaders）： 编译后的GPU代码，负责执行渲染逻辑。

这些东西都会占用GPU内存，所以我们需要像葛朗台一样，精打细算，才能把每一分钱都花在刀刃上。

二、纹理优化：让你的皮肤又薄又美

纹理是GPU内存消耗的大户，所以纹理优化是GPU内存管理的关键一环。

1. 纹理尺寸：能小则小，能省则省

纹理的尺寸直接决定了它占用的GPU内存大小。一个2048x2048的纹理占用的内存是1024x1024纹理的四倍！ 所以，在保证视觉效果的前提下，尽量使用较小的纹理。

// 假设你有一个图片对象 image
let texture = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, texture);

// 如果图片太大，可以先缩放
let canvas = document.createElement('canvas');
canvas.width = 512; // 缩小到512x512
canvas.height = 512;
let ctx = canvas.getContext('2d');
ctx.drawImage(image, 0, 0, 512, 512);

gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, canvas);

// 生成mipmap，优化远处 viewing 的效果
gl.generateMipmap(gl.TEXTURE_2D);

gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR_MIPMAP_LINEAR);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);

2. 纹理格式：选择合适的“化妆品”

不同的纹理格式占用内存的大小也不同。比如，RGBA格式每个像素占用4个字节，而RGB格式只占用3个字节。如果你的纹理不需要透明通道，那么使用RGB格式就可以节省25%的内存。

// 使用RGB格式，省略alpha通道
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE, image);

3. 纹理压缩：像打包行李一样压缩纹理

纹理压缩可以大大减小纹理占用的GPU内存。WebGL支持多种纹理压缩格式，比如ASTC、ETC、S3TC等等。

// 检查浏览器是否支持ASTC纹理压缩
let ext = gl.getExtension('WEBGL_compressed_texture_astc');
if (ext) {
    // 使用ASTC纹理压缩
    // (需要根据具体的ASTC纹理格式和数据进行设置)
    gl.compressedTexImage2D(gl.TEXTURE_2D, 0, gl.COMPRESSED_RGBA_ASTC_4x4_KHR, width, height, 0, textureData);
} else {
    console.warn('ASTC纹理压缩不支持');
    // 使用未压缩的纹理格式
    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image);
}

当然，纹理压缩需要额外的处理步骤，比如使用专门的工具将图片压缩成对应的格式。

4. Mipmap：让远处更清晰

Mipmap是一种预先计算好的多级纹理，每一级都是上一级的缩小版本。当物体距离相机较远时，WebGL会自动选择合适的mipmap级别，从而减少纹理采样的计算量，提高渲染性能。

// 生成mipmap
gl.generateMipmap(gl.TEXTURE_2D);

// 设置纹理过滤模式
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR_MIPMAP_LINEAR);

5. 纹理复用：一个萝卜一个坑

如果多个物体使用相同的纹理，那么只需要在GPU内存中存储一份纹理即可。这样可以大大节省GPU内存。

表格总结：纹理优化小技巧

优化技巧	描述	效果
纹理尺寸	尽量使用较小的纹理尺寸	减少GPU内存占用
纹理格式	选择合适的纹理格式，省略不必要的通道	减少GPU内存占用
纹理压缩	使用纹理压缩格式，减小纹理大小	大幅减少GPU内存占用
Mipmap	生成mipmap，优化远处纹理采样	提高渲染性能，优化视觉效果
纹理复用	多个物体共享相同的纹理	减少GPU内存占用

三、缓冲区优化：让你的骨架更精简

缓冲区用于存储顶点数据、索引数据等几何信息。缓冲区优化主要关注以下几点：

1. 数据类型：够用就好，别浪费

顶点数据可以使用不同的数据类型来存储，比如float、int、short、byte等等。不同的数据类型占用内存的大小也不同。如果你的顶点坐标只需要精确到小数点后两位，那么使用short类型就足够了，没必要使用float类型。

// 使用Float32Array存储顶点坐标
let vertices = new Float32Array([
    -0.5, -0.5, 0.0,
    0.5, -0.5, 0.0,
    0.0, 0.5, 0.0
]);

// 使用Uint16Array存储索引
let indices = new Uint16Array([
    0, 1, 2
]);

2. 顶点属性：按需分配，不要贪多

每个顶点可以包含多个属性，比如位置、法线、纹理坐标等等。如果你的着色器程序不需要某个顶点属性，那么就不要将它存储在缓冲区中。

// 只包含位置属性的顶点数据
let vertices = new Float32Array([
    -0.5, -0.5, 0.0,
    0.5, -0.5, 0.0,
    0.0, 0.5, 0.0
]);

// 创建缓冲区并上传数据
let vertexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);

// 启用顶点属性并设置指针
let positionAttributeLocation = gl.getAttribLocation(program, 'a_position');
gl.enableVertexAttribArray(positionAttributeLocation);
gl.vertexAttribPointer(positionAttributeLocation, 3, gl.FLOAT, false, 0, 0);

3. 索引缓冲区：化零为整，减少重复

索引缓冲区用于存储顶点索引，可以减少重复顶点的数量，从而节省GPU内存。

// 顶点数据
let vertices = new Float32Array([
    -0.5, -0.5, 0.0, // 0
    0.5, -0.5, 0.0,  // 1
    0.5, 0.5, 0.0,   // 2
    -0.5, 0.5, 0.0   // 3
]);

// 索引数据
let indices = new Uint16Array([
    0, 1, 2,
    0, 2, 3
]);

// 创建缓冲区并上传数据
let vertexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);

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

// 启用顶点属性并设置指针
let positionAttributeLocation = gl.getAttribLocation(program, 'a_position');
gl.enableVertexAttribArray(positionAttributeLocation);
gl.vertexAttribPointer(positionAttributeLocation, 3, gl.FLOAT, false, 0, 0);

// 绘制
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer);
gl.drawElements(gl.TRIANGLES, indices.length, gl.UNSIGNED_SHORT, 0);

4. 缓冲区更新：能不动就不动

频繁更新缓冲区会带来性能开销。如果缓冲区中的数据不需要经常改变，那么可以使用gl.STATIC_DRAW标志来创建缓冲区，告诉WebGL缓冲区中的数据是静态的，可以进行优化。

// 创建静态缓冲区
let vertexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);

如果缓冲区中的数据需要经常改变，那么可以使用gl.DYNAMIC_DRAW标志来创建缓冲区。

// 创建动态缓冲区
let vertexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.DYNAMIC_DRAW);

// 更新缓冲区数据
gl.bufferSubData(gl.ARRAY_BUFFER, 0, newVertices);

表格总结：缓冲区优化小技巧

优化技巧	描述	效果
数据类型	选择合适的数据类型，避免浪费内存	减少GPU内存占用
顶点属性	按需分配顶点属性，避免不必要的属性	减少GPU内存占用
索引缓冲区	使用索引缓冲区，减少重复顶点数量	减少GPU内存占用，提高渲染性能
缓冲区更新	尽量避免频繁更新缓冲区	提高渲染性能

四、着色器程序优化：让你的代码更简洁高效

着色器程序是运行在GPU上的代码，负责执行渲染逻辑。着色器程序的性能直接影响到渲染性能。

1. 代码精简：能用一行代码解决的，绝不用两行

着色器程序中的代码越少，执行速度就越快。所以，尽量使用简洁高效的代码。

// 避免不必要的计算
// 优化前
float diffuse = max(dot(normal, lightDirection), 0.0);

// 优化后
float diffuse = clamp(dot(normal, lightDirection), 0.0, 1.0);

2. 变量类型：选择合适的变量类型

着色器程序中的变量类型也会影响性能。比如，float类型的计算速度通常比int类型慢。所以，尽量使用合适的变量类型。

// 避免不必要的类型转换
// 优化前
float intensity = float(lightIndex);

// 优化后
int intensity = lightIndex; // 如果lightIndex本来就是int类型

3. 预编译：提前做好准备

着色器程序需要在运行时编译，编译过程会消耗时间。如果你的着色器程序是静态的，那么可以提前编译好，避免运行时编译的开销。

// 创建着色器程序
let vertexShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vertexShader, vertexShaderSource);
gl.compileShader(vertexShader);

let fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fragmentShader, fragmentShaderSource);
gl.compileShader(fragmentShader);

let program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);

// 检查编译和链接是否成功
if (!gl.getShaderParameter(vertexShader, gl.COMPILE_STATUS)) {
    console.error('顶点着色器编译失败：' + gl.getShaderInfoLog(vertexShader));
}

if (!gl.getShaderParameter(fragmentShader, gl.COMPILE_STATUS)) {
    console.error('片元着色器编译失败：' + gl.getShaderInfoLog(fragmentShader));
}

if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
    console.error('着色器程序链接失败：' + gl.getProgramInfoLog(program));
}

4. Uniform变量：能少则少，避免频繁更新

Uniform变量用于从CPU向GPU传递数据。频繁更新Uniform变量会带来性能开销。所以，尽量减少Uniform变量的数量，避免频繁更新。

// 尽量减少Uniform变量的数量
// 优化前
gl.uniformMatrix4fv(modelViewMatrixLocation, false, modelViewMatrix);
gl.uniformMatrix4fv(projectionMatrixLocation, false, projectionMatrix);

// 优化后
// 可以将modelViewMatrix和projectionMatrix合并成一个矩阵
let mvpMatrix = mat4.create();
mat4.multiply(mvpMatrix, projectionMatrix, modelViewMatrix);
gl.uniformMatrix4fv(mvpMatrixLocation, false, mvpMatrix);

5. 避免使用动态分支 (Dynamic Branching)

在shader中使用if语句可能导致性能问题，因为GPU擅长并行处理，而动态分支会使得不同线程执行不同的代码，导致性能下降。 尽量使用 step, mix 等函数来避免动态分支。

// 避免动态分支
// 优化前
if (condition) {
  color = color1;
} else {
  color = color2;
}

// 优化后
color = mix(color2, color1, step(0.5, condition));

表格总结：着色器程序优化小技巧

优化技巧	描述	效果
代码精简	尽量使用简洁高效的代码	提高渲染性能
变量类型	选择合适的变量类型	提高渲染性能
预编译	提前编译着色器程序	减少运行时编译开销
Uniform变量	减少Uniform变量的数量，避免频繁更新	提高渲染性能
避免动态分支	尽量避免使用if语句	提高渲染性能

五、内存泄漏：防患于未然

内存泄漏是指程序在使用完GPU内存后，没有及时释放，导致GPU内存被占用，最终导致程序崩溃。

1. 及时释放资源：用完就扔，不要留恋

当不再需要纹理、缓冲区、着色器程序等资源时，要及时释放它们。

// 释放纹理
gl.deleteTexture(texture);

// 释放缓冲区
gl.deleteBuffer(vertexBuffer);

// 释放着色器程序
gl.deleteProgram(program);
gl.deleteShader(vertexShader);
gl.deleteShader(fragmentShader);

2. 对象池：重复利用，节约资源

对于需要频繁创建和销毁的对象，可以使用对象池来管理。对象池可以预先创建一些对象，当需要使用对象时，从对象池中获取，使用完后，将对象放回对象池，而不是销毁。

3. 工具检测：防微杜渐，及时发现

可以使用一些工具来检测内存泄漏，比如Chrome浏览器的开发者工具。

六、总结：性能优化之路，永无止境

JS GPU 内存管理是一个复杂而重要的课题。今天我们只是简单地介绍了一些基本的优化技巧。性能优化之路，永无止境。希望大家在实践中不断探索，找到最适合自己的优化方案。

记住，代码写得好，性能跑得高！

谢谢大家！ 希望各位能有所收获，让你的WebGL应用跑得更快更稳！下次再见！