Padding in a vec3f array in WebGPU memory layout

Question

I'm trying to write a WGSL structs parser (sort of webgpu-utils thing). In order to better understand the memory layout, I'm using wgsl offset computer as a helper.

Having the next struct:

struct A {
  a: array<vec3f, 3>,
  b: f32
};

The layout given by the mentioned tool looks like:

I'm struggling with the difference between the graphical representation and the AInfo object. In the graphics, it is clearly seen that each item in the array<vec3f, 3> has alignment padding of 4 bytes and the offsets for three items are 0, 16 and 32 respectively. On the other hand, in the AInfo object the offset of the array a is zero and the length is 48 bytes, which implies the bytes arrangement in the array is consequent. Referencing to the graphics, I would expect the object representation to be sort of:

const AInfo = {
  a: [
    {type: Float32Array, byteOffset: 0, length: 4}, // 16 bytes
    {type: Float32Array, byteOffset: 16, length: 4}, // 16 bytes
    {type: Float32Array, byteOffset: 32, length: 4}, // 16 bytes
  ],
  b: {type: Float32Array, byteOffset: 48, length: 1}
};

What am I missing here?

Answer 1

My confusion was regarding padding of data passed to the array<vec3f>. It is now clear, that in order for it to work correctly, the inbound data should be explicitly padded, thus:

[
  1, 2, 3, 
  4, 5, 6, 
  7, 8, 9
]

becomes

[
  1, 2, 3, 0, 
  4, 5, 6, 0,
  7, 8, 9, 0
]

In order for it to work correctly.