This feature is not Baseline because it does not work in some of the most widely-used browsers.
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
Note: This feature is available in Web Workers.
The writeBuffer() method of the GPUQueue interface writes a provided data source into a given GPUBuffer.
This is a convenience function, which provides an alternative to setting buffer data via buffer mapping and buffer-to-buffer copies. It lets the user agent determine the most efficient way to copy the data over.
writeBuffer(buffer, bufferOffset, data, dataOffset, size)
bufferA GPUBuffer object representing the buffer to write data to.
bufferOffsetA number representing the offset, in bytes, to start writing the data at inside the GPUBuffer.
dataAn object representing the data source to write into the GPUBuffer. This can be an ArrayBuffer, TypedArray, or DataView.
dataOffset OptionalA number representing the offset to start writing the data from inside the data source. This value is a number of elements if data is a TypedArray, and a number of bytes if not. If omitted, dataOffset defaults to 0.
size OptionalA number representing the size of the content to write from data to buffer. This value is a number of elements if data is a TypedArray, and a number of bytes if not. If omitted, size will be equal to the overall size of data, minus dataOffset.
None (Undefined).
OperationError DOMException
The method throws an OperationError if the following criteria are not met:
data is equal to or greater than 0.dataOffset is equal to or smaller than the size of data.data (when converted to bytes, in the case of TypedArrays) is a multiple of 4.The following criteria must be met when calling writeBuffer(), otherwise a GPUValidationError is generated and the GPUQueue becomes invalid:
buffer is available for use, i.e., not unavailable (GPUBuffers are unavailable if they are currently mapped) or destroyed (with the GPUBuffer.destroy() method).buffer's GPUBuffer.usage includes the GPUBufferUsage.COPY_DST flag.bufferOffset, when converted to bytes, is a multiple of 4.data - dataOffset + bufferOffset, when converted to bytes, is equal to or less than the buffer's GPUBuffer.size.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, // make it big enough to store vertices in
usage: GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST,
});
To get the data into the buffer we can use writeBuffer():
device.queue.writeBuffer(vertexBuffer, 0, vertices, 0, vertices.length);
| Specification |
|---|
| WebGPU> # dom-gpuqueue-writebuffer> |
| Desktop | Mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Opera | Safari | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet | WebView Android | WebView on iOS | |
writeBuffer |
113Currently supported on ChromeOS, macOS, and Windows only. |
113Currently supported on ChromeOS, macOS, and Windows only. |
141Currently supported on Windows only, in all contexts except for service workers. |
99Currently supported on ChromeOS, macOS, and Windows only. |
26 | 121 | No | 81 | 26 | 25.0 | 121 | 26 |
© 2005–2025 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/GPUQueue/writeBuffer