The GPUQueue interface of the WebGPU API controls execution of encoded commands on the GPU.
A device's primary queue is accessed via the GPUDevice.queue property.
In our basic render demo, we define some vertex data in a Float32Array that we'll use to draw a triangle:
const vertices = new Float32Array([
0.0, 0.6, 0, 1, 1, 0, 0, 1, -0.5, -0.6, 0, 1, 0, 1, 0, 1, 0.5, -0.6, 0, 1, 0,
0, 1, 1,
]);
To use this data in a render pipeline, we need to put it into a GPUBuffer. First we'll create the buffer:
const vertexBuffer = device.createBuffer({
size: vertices.byteLength,
usage: GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST,
});
To get the data into the buffer we can use the writeBuffer() function, which lets the user agent determine most efficient way to copy the data over:
device.queue.writeBuffer(vertexBuffer, 0, vertices, 0, vertices.length);
Later on, a set of commands is encoded into a GPUCommandBuffer using the GPUCommandEncoder.finish() method. The command buffer is then passed into the queue via a submit() call, ready to be processed by the GPU.
device.queue.submit([commandEncoder.finish()]);