GPUTexture
注意：此功能在 Web Workers 中可用。
GPUTexture 介面是 WebGPU API 的一部分，它表示一個容器，用於儲存用於 GPU 渲染操作的 1D、2D 或 3D 資料陣列，例如影像。
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()將影像點陣圖複製到紋理中。
js
// …
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 # gputexture |
瀏覽器相容性
載入中…