GPUTexture
Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.
The GPUTexture
interface of the WebGPU API represents a container used to store 1D, 2D, or 3D arrays of data, such as images, to use in GPU rendering operations.
A GPUTexture
object instance is created using the GPUDevice.createTexture()
method.
Instance properties
depthOrArrayLayers
Experimental Read only-
A number representing the depth or layer count of the
GPUTexture
(pixels, or number of layers). dimension
Experimental Read only-
An enumerated value representing the dimension of the set of texels for each
GPUTexture
subresource. format
Experimental Read only-
An enumerated value representing the format of the
GPUTexture
. height
Experimental Read only-
A number representing the height of the
GPUTexture
in pixels. label
Experimental-
A string providing a label that can be used to identify the object, for example in
GPUError
messages or console warnings. mipLevelCount
Experimental Read only-
A number representing the number of mip levels of the
GPUTexture
. sampleCount
Experimental Read only-
A number representing the sample count of the
GPUTexture
. usage
Experimental Read only-
The bitwise flags representing the allowed usages of the
GPUTexture
. width
Experimental Read only-
A number representing the width of the
GPUTexture
in pixels.
Instance methods
createView()
Experimental-
Creates a
GPUTextureView
representing a specific view of theGPUTexture
. destroy()
Experimental-
Destroys the
GPUTexture
.
Examples
In the WebGPU samples Textured Cube sample, a texture to use on the faces of a cube is created by:
- Loading the image into an
HTMLImageElement
and creating an image bitmap usingcreateImageBitmap()
. - Creating a new
GPUTexture
usingcreateTexture()
. - Copying the image bitmap into the texture using
GPUQueue.copyExternalImageToTexture()
.
js
//...
let cubeTexture: GPUTexture; // Sample is written in TypeScript
{
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]
);
}
//...
Specifications
Specification |
---|
WebGPU # texture-interface |
Browser compatibility
BCD tables only load in the browser
See also
- The WebGPU API