GPUTexture

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

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

GPUTexture 是 WebGPU API 中的一个接口，它表示一个容器，用于存储图像等数据的 1D、2D 或 3D 数组，以用于 GPU 渲染操作。

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

实例属性

depthOrArrayLayers 实验性只读: 表示 GPUTexture 深度或层数（像素或层数）的数字。
dimension 实验性只读: 表示每个 GPUTexture 子资源的纹素集维度的枚举值。
format 实验性只读: 表示 GPUTexture 格式的枚举值。
height 实验性只读: 表示 GPUTexture 高度（以像素为单位）的数字。
label 实验性: 一个字符串，提供一个标签，可用于标识对象，例如在 GPUError 消息或控制台警告中。
mipLevelCount 实验性只读: 表示 GPUTexture 的 mip 级数的数字。
sampleCount 实验性只读: 表示 GPUTexture 的样本数的数字。
usage 实验性只读: 表示 GPUTexture 的允许用法的位标志。
width 实验性只读: 表示 GPUTexture 宽度（以像素为单位）的数字。

实例方法

createView() 实验性: 创建一个 GPUTextureView，表示 GPUTexture 的特定视图。
destroy() 实验性: 销毁 GPUTexture。

示例

在 WebGPU 示例纹理立方体示例中，通过以下方式创建用于立方体面的纹理：

将图像加载到 HTMLImageElement 中，并使用 createImageBitmap() 创建图像位图。
使用 createTexture() 创建新的 GPUTexture。
使用 GPUQueue.copyExternalImageToTexture() 将图像位图复制到纹理中。

//...
let cubeTexture;
{
  const img = document.createElement("img");

  img.src = new URL(
    "../../../assets/img/Di-3d.png",
    import.meta.url,
  ).toString();

  await img.decode();

  const imageBitmap = await createImageBitmap(img);

  cubeTexture = device.createTexture({
    size: [imageBitmap.width, imageBitmap.height, 1],
    format: "rgba8unorm",
    usage:
      GPUTextureUsage.TEXTURE_BINDING |
      GPUTextureUsage.COPY_DST |
      GPUTextureUsage.RENDER_ATTACHMENT,
  });

  device.queue.copyExternalImageToTexture(
    { source: imageBitmap },
    { texture: cubeTexture },
    [imageBitmap.width, imageBitmap.height],
  );
}
//...

规范

规范
WebGPU # texture-interface

浏览器兼容性

BCD 表格仅在启用 JavaScript 的浏览器中加载。

另请参阅

WebGPU API