Utilizing loose schemas with vertex buffer storage

[ytreu111]

I just recently started learning WebGPU and I don't understand why I can't use unstruct in vertex buffer
After all, in that case, it would not be necessary to calculate the offset for normalized values each time.

Examples

WGSL

struct Vertex {
  @location(0) color: vec4f,
  @location(1) position: vec2f,
}

Vanila

const vertexBufferLayout = {
  arrayStride: 4 + 2 * 4
  attributes: [
    // color
    {
      format: 'unorm8x4',
      offset: 0,
      shaderLocation: 0,
    },
    // position
    {
      format: 'float32x2',
      offset: 4,
      shaderLocation: 1,
    },
  ]
}

const count = 100
const vertexUnitSize = 4 + (2 * 4) // color 4 bytes + position 2 32 bit floats
const vertexBufferSize = count * vertexUnitSize

const vertexBuffer = device.createBuffer({
  size: vertexBufferSize,
  usage: GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST
})

const vertexValuesU8 = new Uint8Array(vertexBufferSize)
const vertexValuesF32 = new Float32Array(vertexValuesU8.buffer)

for(let i = 0; i < count; ++i) {
  const vertexOffsetU8 = i * vertexUnitSize
  const vertexOffsetF32 = vertexOffsetU8 / 4

  staticVertexValuesU8.set([rand() * 255, rand() * 255, rand() * 255, 255], vertexOffsetU8)
  staticVertexValuesF32.set([rand(-0.9, 0.9), rand(-0.9, 0.9)], vertexOffsetF32 + 1)
}

device.queue.writeBuffer(vertexBuffer, 0, vertexValuesF32)

How could this work in TypeGPU

const Vertex = d.unstruct({
  color: d.location(0, d.unorm8x4),
  position: d.location(1, d.float32x2),
})

const vertexBufferLayout = root.unwrap(tgpu.vertexLayout((n) => d.disarrayOf(Vertex, n)))

const count = 100
const vertexBuffer = root.createBuffer(d.disarrayOf(Vertex, count)).$usage('vertex').$addFlags(GPUBufferUsage.COPY_DST)
const vertexBufferValues = []

for(let i = 0; i < count; ++i) {
  vertexBufferValues.push({
      color: d.vec4f(rand() * 255, rand() * 255, rand() * 255, 255), // or d.unorm8x4(rand() * 255, rand() * 255, rand() * 255, 255)
      position: d.vec2f(rand(-0.9, 0.9), rand(-0.9, 0.9))
    })
}

vertexBuffer.write(vertexBufferValues)

[reczkok]

Hi! Thanks for the discussion. You are absolutely right, this should work and the issue comes from an oversight in our schema writer compilation. I will create an issue and jump on it right away. We already have the necessary infrastructure in place so it should not take long to get this fixed.

In the meantime, if you need a temporary workaround, you can use the writePartial API. It does not rely on the compiled writers that are causing the problem, though it will be noticeably slower:

vertexBuffer.writePartial(
  vertexBufferValues.map((value, idx) => {
    return {
      idx,
      value,
    };
  }),
);

I will keep this discussion updated as we make progress.

I also noticed that you use .$addFlags(GPUBufferUsage.COPY_DST). This is not necessary since the flag is included by default.

[reczkok]

Implementation is in review now. Should land in TypeGPU 0.7.0
#1560

[iwoplaza]

TypeGPU 0.7.0 released yesterday, and along with it, Unstructs and Disarrays should be properly serializable. Thanks for opening the discussion, let us know if you encounter other bugs down the line @ytreu111 🙇‍♂️