如何在JavaScript中混合TypedArray类型存储WebGL顶点数据？

当然可以混合不同类型的数据存到同一个字节缓冲区，完全不需要把所有顶点数据都转成float！你遇到的问题是对TypedArray的set()方法的用法理解错了——它是按元素个数复制值，而不是直接复制底层字节。

问题出在哪？ #

你原来的代码里：

const src = new Float32Array(2); // 2个float元素，占8字节
src[0] = 100; src[1] = 200;
const dest = new Uint8Array(8);
dest.set(src, 0);

这里的set()会遍历src的每个元素（两个float值100和200），把它们转换为uint8类型后写入dest的前两个位置，而不是把每个float的4个字节拆分写入。这就是为什么你只得到前两个字节被填充的原因。

正确的做法：利用ArrayBuffer的多视图特性 #

TypedArray本质上是共享同一个底层ArrayBuffer的不同"视图"——你只需要先创建一个足够大的ArrayBuffer，然后给不同类型的数据创建对应的TypedArray视图，直接写入数据即可，它们会自动按字节布局在缓冲区里。

1. 复制已有TypedArray的底层字节

如果你只是想把一个Float32Array的字节完整复制到Uint8Array，应该先获取源数组的底层缓冲区，创建Uint8视图再复制：

const src = new Float32Array(2);
src[0] = 100; src[1] = 200;

// 把src的底层缓冲区转成Uint8视图
const srcBytes = new Uint8Array(src.buffer);

const dest = new Uint8Array(8);
dest.set(srcBytes);
// 现在dest就是两个float的8个原始字节（比如[0, 0, 192, 66, 0, 0, 64, 67]，具体取决于float的二进制表示）

2. WebGL中混合顶点属性的典型场景

比如你要存储包含2个float的位置和4个uint8的颜色的顶点数据，每个顶点占2*4 + 4*1 = 12字节：

const vertexCount = 3;
const totalBytes = vertexCount * 12; // 3个顶点共36字节

// 创建底层缓冲区
const buffer = new ArrayBuffer(totalBytes);

// 创建不同类型的视图，指向缓冲区的对应位置
const positions = new Float32Array(buffer, 0, vertexCount * 2); // 从0字节开始，6个float（24字节）
const colors = new Uint8Array(buffer, 24, vertexCount * 4); // 从24字节开始，12个uint8（12字节）

// 填充数据
// 第一个顶点
positions[0] = 0; positions[1] = 1;
colors[0] = 255; colors[1] = 0; colors[2] = 0; colors[3] = 255;
// 第二个顶点
positions[2] = 1; positions[3] = -1;
colors[4] = 0; colors[5] = 255; colors[6] = 0; colors[7] = 255;
// 第三个顶点
positions[4] = -1; positions[5] = -1;
colors[8] = 0; colors[9] = 0; colors[10] = 255; colors[11] = 255;

// 传给WebGL缓冲区
const glBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, glBuffer);
gl.bufferData(gl.ARRAY_BUFFER, buffer, gl.STATIC_DRAW);

// 设置顶点属性指针（关键要指定正确的类型、步长和偏移）
// 位置属性：2个float，步长12字节，偏移0
gl.vertexAttribPointer(posAttribLoc, 2, gl.FLOAT, false, 12, 0);
// 颜色属性：4个uint8，归一化到0-1范围，步长12字节，偏移8字节
gl.vertexAttribPointer(colorAttribLoc, 4, gl.UNSIGNED_BYTE, true, 12, 8);

总结 #

• 完全不需要将所有顶点数据都存为float，利用ArrayBuffer的多视图特性就能轻松混合float、uint8、int等不同类型的数据。
• TypedArray的set()方法是按元素复制值，而非复制底层字节——如果需要字节级复制，要先通过Uint8视图访问底层缓冲区。
• 这是WebGL中处理混合顶点属性的标准做法，能有效减少缓冲区的内存占用。

内容的提问来源于stack exchange，提问作者GenericPtr