Possible bug in connection with WebGPU, no automatic padding?

[lukan-vs]

Hey surma,

couple of things, first, thanks a lot for All of the cores, none of the canvas, it helped me a lot understanding the basic concepts of WebGPU. This is also, where I am coming from. And some things could of course be more perfect and I hope you don't mind, if I just drop them here, before I get to my main issue (it is connected)

• the first example of a webcompute, that does absolutely nothing. But it works, so that’s cool., is sadly not working anymore in chrome(apparently now it needs some sort of data), a small Update section mentioning this, might help newcomers
• "If you are curious, you can take a look at the source code of the final demo" I was curious and I did, but I only found the minified source. I don't know if this was the idea, or if I am missing something? In either case, I played around with it a bit, to add simple gravity and damping and maybe I will add boxes as well. It's nice to have all this potential power at hand ... but still would be nicer, to work with the unminified code. (is there a licence btw?)
• the section about staging buffers could be probably improved, but I don't know how, as I still don't really understand it yet .. (but I will go to the matrix channel for specific help)

Then to the issue of buffer-backed-object:

First something minor, the example in the README, is not working:
Line 4

 id: BBO.BufferBackedObject.Uint16({ endianness: "big" }),

should be:

id: BBO.Uint16({ endianness: "big" }),

Then my main problem,

I want to rewrite the sample code from all of the canvas, to use buffer-backed-object, to make it simpler. So instead of this:

let inputBalls = new Float32Array(new ArrayBuffer(BUFFER_SIZE));
for (let i = 0; i < NUM_BALLS; i++) {
  inputBalls[i * 6 + 0] = randomBetween(2, 10); // radius
  inputBalls[i * 6 + 1] = 0; // padding
  inputBalls[i * 6 + 2] = randomBetween(0, ctx.canvas.width); // position.x
  inputBalls[i * 6 + 3] = randomBetween(0, ctx.canvas.height); // position.y
  inputBalls[i * 6 + 4] = randomBetween(-100, 100); // velocity.x
  inputBalls[i * 6 + 5] = randomBetween(-100, 100); // velocity.y
}

I wrote:

const descriptor = {
    id: BBO.Float32(),
    position: BBO.NestedBufferBackedObject({
      x: BBO.Float32(),
      y: BBO.Float32(),
   }),
   velocity: BBO.NestedBufferBackedObject({
      x: BBO.Float32(),
      y: BBO.Float32(),
   }
  };

const buffer = new ArrayBuffer(BBO.structSize(descriptor));
const aosv=BBO.ArrayOfBufferBackedObjects(buffer, descriptor)
for ( var i=0;i< numberOfBalls;i++){
  var ball=aosv[i]
  ball.radius = randomBetween(2, 10); 
  ball.position.x = randomBetween(0, ctx.canvas.width); 
  ball.position.x = randomBetween(0, ctx.canvas.height); 
  ball.velocity.x = randomBetween(-100, 100);
  ball.velocity.x = randomBetween(-100, 100); 
}

And it is nicer to work with, but it does not seem to automatically create the necessary padding.

[999, 0, 0, 0, 0, 999, 1, 0, 1, 0, 999, ...

instead of

[999, 0, 0, 0, 0, 0, 999, 0, 1, 0, 1, 0, 999, ...

So I am not sure if this is a bug, or if I have to do it manually. Do I have to define my own structs and alignment rules, when working with WebGPU buffers?

I assumed it would be handled automatically, since WebGPU is specifically mentioned. Right now my workaround is to just add an empty float like this:

const descriptor = {
      id: BBO.Float32(),
      empty: BBO.Float32(),
      position: BBO.NestedBufferBackedObject({
      x: BBO.Float32(),
      y: BBO.Float32(),
   }),
   velocity: BBO.NestedBufferBackedObject({
      x: BBO.Float32(),
      y: BBO.Float32(),
   }
  };