WebGPU从JS传输Buffer时数据解析位置错误问题求助

你遇到的是WebGPU/WGSL的内存对齐问题：WGSL的结构体成员有严格的内存布局规则，vec3f类型的对齐要求是16字节（SPIR-V标准中，vec3的对齐与vec4一致），但你手动拼接数据时没有在Material.category和Material.attenuation之间添加填充字节，导致GPU读取第二个球体数据时偏移错误，把第一个球体的材质数据当成了第二个球体的中心坐标。

按照WGSL的内存对齐规则，在构造缓冲区数据时添加必要的填充字节，确保CPU端构造的二进制数据和GPU端结构体的内存布局完全匹配。以下是修复后的代码：

function createSpheresStorageBuffer2(spheres: Sphere[]): GPUBuffer {
    // 每个Sphere按WGSL对齐要求占64字节
    const sphereByteSize = 64;
    const totalByteSize = spheres.length * sphereByteSize;
    const arrayBuffer = new ArrayBuffer(totalByteSize);
    const dataView = new DataView(arrayBuffer);

    spheres.forEach((sphere, index) => {
        const baseOffset = index * sphereByteSize;

        // 写入center: vec3f（偏移0-11）
        dataView.setFloat32(baseOffset + 0, sphere.center[0], true);
        dataView.setFloat32(baseOffset + 4, sphere.center[1], true);
        dataView.setFloat32(baseOffset + 8, sphere.center[2], true);

        // 写入radius: f32（偏移12-15）
        dataView.setFloat32(baseOffset + 12, sphere.radius, true);

        // 写入material.category: u32（偏移16-19）
        dataView.setUint32(baseOffset + 16, sphere.material.type, true);

        // 跳过20-31字节的填充（让attenuation对齐到16字节的倍数）
        // 写入attenuation: vec3f（偏移32-43）
        dataView.setFloat32(baseOffset + 32, sphere.material.attenuation[0], true);
        dataView.setFloat32(baseOffset + 36, sphere.material.attenuation[1], true);
        dataView.setFloat32(baseOffset + 40, sphere.material.attenuation[2], true);

        // 写入fuzz: f32（偏移44-47）
        dataView.setFloat32(baseOffset + 44, sphere.material.fuzz, true);

        // 写入refraction_index: f32（偏移48-51）
        dataView.setFloat32(baseOffset + 48, sphere.material.refraction_index, true);

        // 52-63字节为填充，无需写入
    });

    const buffer = device.createBuffer({
        label: "spheres buffer",
        size: totalByteSize,
        usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_DST,
    });

    device.queue.writeBuffer(buffer, 0, arrayBuffer);
    return buffer;
}

如果你想简化数据构造，也可以在WGSL结构体中手动指定对齐属性（会稍微浪费内存），比如修改Material结构体：

struct Material {
    [[align(16)]] category: u32,
    attenuation:  vec3f,
    fuzz: f32,
    refraction_index: f32,
}

这样category会直接对齐到16字节，无需手动添加填充，但本质还是遵循了WGSL的内存对齐规则。

内容的提问来源于stack exchange，提问作者Karthik S Salian