webgpu 从 js 传输缓冲区未在正确位置解压

Question

我是 webgpu 新手，尝试使用片段着色器渲染一些球体，球体定义为

struct Material {
    category: u32,
    attenuation:  vec3f,
    fuzz: f32,
    refraction_index: f32,
}
    
struct Sphere {
    center: vec3f,
    radius: f32,
    mat: Material
}

function createSpheresStorageBuffer2(spheres: Sphere[]): GPUBuffer {

    const bufferElements: (Float32Array | Uint32Array)[] = [];
    let size = 0;
    let arrayBuffer;

    for (const sphere of spheres) {
        arrayBuffer = new Float32Array([...sphere.center, sphere.radius]);
        size+=arrayBuffer.byteLength;
        bufferElements.push(arrayBuffer);

        const {type,attenuation,fuzz,refraction_index} = sphere.material;

        arrayBuffer = new Uint32Array([type]);
        size+=arrayBuffer.byteLength;
        bufferElements.push(arrayBuffer);
        
        arrayBuffer = new Float32Array([...attenuation,fuzz,refraction_index]);
        size+=arrayBuffer.byteLength;
        bufferElements.push(arrayBuffer);
    }

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

    let offset = 0;
    for(const buff of bufferElements){
        device.queue.writeBuffer(buffer, offset, buff);
        offset+=buff.byteLength
    }
    return buffer
}

enum MaterialType {
    Labertian = 0,
    Metal = 1,
}

const spheres: Sphere[] = [
    {
        center: [0, -100.5, -1],
        radius: 100,
        material: {
            type: MaterialType.Labertian,
            attenuation: [0.5,0.5,0.5],
            fuzz: 1.0,
            refraction_index: 1.0
        }
    },
    {
        center: [1, 0, -1],
        radius: 0.5,
        material: {
            type: MaterialType.Metal,
            attenuation: [0.5,0.5,0.5],
            fuzz: 0,
            refraction_index: 1.0
        }
    },
]

但是着色器中shpere 2的中心值为0.5,0.5,1，它们是衰减[2,3]+模糊的值（我可以通过反复试验知道）

当衰减为 f32 而不是矢量时，代码可以正常工作

Answer 1

您打包数据的方式似乎与 WebGPU 的内存布局不匹配

这是布局

从这里生成的图表