GPUBuffer

实验性：这是一个实验性技术
在生产环境中使用此功能之前，请仔细查看浏览器兼容性表格。

安全上下文：此功能仅在安全上下文（HTTPS）中可用，在某些或所有支持的浏览器中。

GPUBuffer是WebGPU API中的一个接口，它表示一块内存块，可以用来存储原始数据，并在 GPU 操作中使用。

GPUBuffer 对象实例是使用GPUDevice.createBuffer() 方法创建的。

实例属性

label 实验性: 一个字符串，提供一个标签，可用于识别对象，例如在GPUError 消息或控制台警告中。
mapState 实验性只读: 一个枚举值，表示 GPUBuffer 的映射状态。
size 实验性只读: 一个数字，表示 GPUBuffer 内存分配的长度，以字节为单位。
usage 实验性只读: 表示允许使用的位标志 GPUBuffer。

实例方法

destroy() 实验性: 销毁 GPUBuffer。
getMappedRange() 实验性: 返回一个包含指定范围内 GPUBuffer 映射内容的 ArrayBuffer。
mapAsync() 实验性: 映射 GPUBuffer 的指定范围。返回一个 Promise，当 GPUBuffer 的内容准备好可以使用 GPUBuffer.getMappedRange() 访问时，该 Promise 会完成。
unmap() 实验性: 取消映射 GPUBuffer 的映射范围，使 GPU 再次能够使用其内容。

示例

在我们基本的计算演示中，我们创建了一个输出缓冲区来读取 GPU 计算结果，以及一个用于 JavaScript 访问的暂存缓冲区。

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,
});

稍后，一旦 stagingBuffer 包含 GPU 计算的结果，就会使用一系列 GPUBuffer 方法将数据读回 JavaScript，以便将其记录到控制台。

GPUBuffer.mapAsync() 用于映射 GPUBuffer 以进行读取。
GPUBuffer.getMappedRange() 用于返回一个包含 GPUBuffer 内容的 ArrayBuffer。
GPUBuffer.unmap() 用于在根据需要将内容读入 JavaScript 后，再次取消映射 GPUBuffer。

// map staging buffer to read results back to JS
await 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));

规范

规范
WebGPU # gpubuffer

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅

WebGPU API