The structNode does not respect WebGPU memory layout

[holtsetio]

Description

Consider this simple struct:

const testStruct = struct({
  a: { type: "vec3" },
  b: { type: "vec3" },
});

Because of the WebGPU data memory layout restrictions, vec3 elements have to be aligned to a multiple of 16 bytes in memory. So the correct size of the above struct in memory is 32 bytes. However the structTypeNode gives a length of 6 elements = 24 bytes, so 8 bytes short. In consequence, when creating instancedArrays with this struct, not enough memory is allocated on the GPU for the array.

See attached fiddle for an example, where an array of length 2 is created, but the second element is cut off in memory.

Right now a workaround is to do the alignment calculations manually and pass a TypedArray of the correct size when creating the instancedArray.

Live example

• jsfiddle-dev WebGPURenderer

Version

r175-dev

[Spiri0]

There's no automatic detection for neccessary memory setup yet. The structs are still very new. I've always created the buffers manually using the StorageBufferAttribute. When using more complex structs with scalars and vec2, vec3, vec4, and matrices one have to reserve the 16 bytes for each value or matrix column, as you correctly identified.
An extension that checks the struct and then automatically allocates the buffer correctly would certainly be very useful for many users. It just shouldn't interfere with manual buffer setup, otherwise nothing will work for me.
But I think the instancedArray node would be very well suited for such an extension. That certainly makes sense.

This can be a nice example for the threejs examples

const testStruct = struct({
  a: { type: "uint" },
  b: { type: "int" },
  c: { type: "float" },
  d: { type: "vec2" },
  e: { type: "vec3" },
  f: { type: "vec4" },
  g: { type: "mat2" },
  h: { type: "mat3" },
  i: { type: "mat4" },
  j: { type: "bool" }
});