knowledge construction – Quickest method to retailer coloured rect information?

I am utilizing WebGPU and a storage buffer for rects. Presently I’ve this:

    struct Rect {
      x: i32,
      w: i32,
      y: i32,
      h: i32,
      c: u32,
    };

This feels fallacious for a couple of causes:

1. I am storing ints for positioning, however natively I am utilizing JavaScript which inherently has floats, which suggests I am changing to int within the CPU after which from int to drift within the GPU, which looks like a waste of cycles.

2. The colour is RGBA with 0xffffffff as a max worth, so I saved it in a uint32 and I am doing bit shifting later to get all 4 values out. I figured the GPU is quick at math, so I did it right here as an alternative of when inserting them into the storage, and likewise left it as uint32 to avoid wasting house, however perhaps that is pointless and I ought to simply use f32 to retailer every quantity?

3. There’s 5 slots of 32 bit values on this rect, whereas it could be higher if it had been 4 I feel. I do know that my max/min values are simply represented by signed ints of 16 bytes (-32k to 32k for all 4 values) so I used to be pondering of storing them in 2 i32s as an alternative of 4 and bit shifting them within the shader to get the values out, however is there a greater means?

In the end I do know that (a) this would possibly not matter except I am doing numerous issues at tremendous excessive scale, however I most likely shall be; and (b) I should not optimize with out profiling, which I agree with. However I am making an attempt to get a normal understanding of this stuff, so I am profiling and experimenting, however within the meantime I wished to see in the event you all had some knowledge to share.