真正有效的预分配是固定TypedArray内存并复用ARRAY_BUFFER，通过gl.bufferSubData局部更新、按stride/offset对齐顶点布局，结合STATIC_DRAW/DYNAMIC_DRAW策略实现高效GPU映射。
直接用 TypedArray（比如 Int32Array、Float32Array）为 WebGL 顶点数据做二进制预分配，核心是绕过 JS 对象开销、避免运行时内存碎片，并让 GPU 缓冲区能高效映射。关键不在“用不用 TypedArray”，而在于如何配合 gl.bufferData 的 STATIC_DRAW / DYNAMIC_DRAW 策略、内存对齐、以及批量更新逻辑来真正发挥预分配优势。
明确预分配目标：不是“提前 new”，而是“一次申请、多次复用”
很多人误以为“预分配”就是提前 new Float32Array(1e6) 就完事——这确实避免了后续反复 new，但若每次渲染都重新填充整个数组再调用 gl.bufferData，本质仍是全量上传，没利用 GPU 缓冲的局部更新能力。
- 真正有效的预分配 = 在 JS 层固定一块连续内存（TypedArray 实例），并在 WebGL 中创建对应大小的
ARRAY_BUFFER，后续只更新其中部分区域 - 例如：预分配支持 10 万个顶点（每个含
x,y,z,nx,ny,nz,u,v共 8 个float32）→ 总长100000 × 8 = 800000元素 →const vertices = new Float32Array(800000) - WebGL 缓冲创建一次：
const vbo = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, vbo); gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
用 subData 实现局部更新，避免全量重传
当只有部分顶点变化（如粒子系统中每帧移动几百个点），不要调用 gl.bufferData 覆盖整个缓冲，改用 gl.bufferSubData 写入偏移段：
- 假设第 5000–5999 号顶点需更新（共 1000 个顶点，每个 8 个 float）→ 偏移字节 =
5000 × 8 × 4 = 160000（每个 float32 占 4 字节） - 更新代码：
gl.bufferSubData(gl.ARRAY_BUFFER, 160000, vertices.subarray(40000, 48000));（注意：subarray 索引单位是元素数，不是字节） - ⚠️ 注意：必须确保
vertices对应区域已写入新值；且调用前vbo必须已绑定
结构体对齐与 stride 控制：让 GPU 正确解析顶点布局
WebGL 不自动识别“结构体”，它只认 stride 和 offset。预分配时要按实际布局排布数据，否则 gl.vertexAttribPointer 会读错：
- 典型顶点结构：
{pos: [x,y,z], norm: [nx,ny,nz], uv: [u,v]}→ 共 3+3+2 = 8 个 float，紧凑排列无 padding - 设置位置属性：
gl.vertexAttribPointer(posLoc, 3, gl.FLOAT, false, 8*4, 0);（stride=32 字节，offset=0） - 设置法线属性：
gl.vertexAttribPointer(normLoc, 3, gl.FLOAT, false, 8*4, 3*4);（offset=12 字节） - 设置 UV 属性：
gl.vertexAttribPointer(uvLoc, 2, gl.FLOAT, false, 8*4, 6*4);（offset=24 字节）
Int32Array 的适用场景有限，别滥用
Int32Array 在顶点属性中极少直接使用——WebGL 顶点着色器默认接收 float，整数需显式转换（float(intValue)），且精度和范围不如 Float32Array 稳定。它的合理用途包括：
- 索引缓冲（
ELEMENT_ARRAY_BUFFER）：用Uint16Array或Uint32Array存三角面索引（尤其顶点数 > 65535 时必须用 Uint32） - 顶点 ID 或实例 ID 等整型语义数据：通过
gl.vertexAttribIPointer（WebGL2）传递，着色器用highp ivec3接收 - 不建议用
Int32Array存坐标/法线——除非你明确需要整数运算且已处理归一化、溢出、符号问题
预分配本身不复杂，难点在于把 JS 内存管理、WebGL 缓冲生命周期、GPU 渲染管线三者节奏对齐。重点不是堆多大数组，而是让每一次 drawArrays 或 drawElements 都尽可能复用已有缓冲内容，减少 CPU→GPU 数据搬运。
