GPUBuffer

Limited availability

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 insecure contexts (HTTPS), in some or allsupporting browsers.

Note: This feature is available inWeb Workers.

TheGPUBuffer interface of theWebGPU API represents a block of memory that can be used to store raw data to use in GPU operations.

AGPUBuffer object instance is created using theGPUDevice.createBuffer() method.

Instance properties

label: A string providing a label that can be used to identify the object, for example inGPUError messages or console warnings.
mapStateRead only: An enumerated value representing the mapped state of theGPUBuffer.
sizeRead only: A number representing the length of theGPUBuffer's memory allocation, in bytes.
usageRead only: Thebitwise flags representing the allowed usages of theGPUBuffer.

Instance methods

destroy(): Destroys theGPUBuffer.
getMappedRange(): Returns anArrayBuffer containing the mapped contents of theGPUBuffer in the specified range.
mapAsync(): Maps the specified range of theGPUBuffer. Returns aPromise that resolves when theGPUBuffer's content is ready to be accessed withGPUBuffer.getMappedRange().
unmap(): Unmaps the mapped range of theGPUBuffer, making its contents available for use by the GPU again.

Examples

In ourbasic compute demo, we create an output buffer to read GPU calculations to, and a staging buffer to be mapped for JavaScript access.

const output = device.createBuffer({  size: BUFFER_SIZE,  usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_SRC,});const stagingBuffer = device.createBuffer({  size: BUFFER_SIZE,  usage: GPUBufferUsage.MAP_READ | GPUBufferUsage.COPY_DST,});

Later on, once thestagingBuffer contains the results of the GPU computation, a combination ofGPUBuffer methods are used to read the data back to JavaScript so that it can then be logged to the console:

GPUBuffer.mapAsync() is used to map theGPUBuffer for reading.
GPUBuffer.getMappedRange() is used to return anArrayBuffer containing theGPUBuffer's contents.
GPUBuffer.unmap() is used to unmap theGPUBuffer again, once we have read the content into JavaScript as needed.

// map staging buffer to read results back to JSawait stagingBuffer.mapAsync(  GPUMapMode.READ,  0, // Offset  BUFFER_SIZE, // Length);const copyArrayBuffer = stagingBuffer.getMappedRange(0, BUFFER_SIZE);const data = copyArrayBuffer.slice(0);stagingBuffer.unmap();console.log(new Float32Array(data));