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?
Update
My confusion was regarding inner padding of data passed to the array<vec3f>. It is now clear, that in order for it to work correctly, the data should be padded:
[
1, 2, 3,
4, 5, 6,
7, 8, 9
] ->
[
1, 2, 3, 0,
4, 5, 6, 0,
7, 8, 9, 0
]
