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 36 bytes, which implies the bytes arrangement in the array is consequent and all the padding is "moved to the end" (thus, the 48 offset for .b). 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?