GPUTexture

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.

TheGPUTexture interface of theWebGPU API represents a container used to store 1D, 2D, or 3D arrays of data, such as images, to use in GPU rendering operations.

AGPUTexture object instance is created using theGPUDevice.createTexture() method.

Instance properties

depthOrArrayLayersRead only: A number representing the depth or layer count of theGPUTexture (pixels, or number of layers).
dimensionRead only: An enumerated value representing the dimension of the set of texels for eachGPUTexture subresource.
formatRead only: An enumerated value representing the format of theGPUTexture. See theTexture formats section of the specification for all the possible values. Also seeTier 1 and Tier 2 texture formats.
heightRead only: A number representing the height of theGPUTexture in pixels.
label: A string providing a label that can be used to identify the object, for example inGPUError messages or console warnings.
mipLevelCountRead only: A number representing the number of mip levels of theGPUTexture.
sampleCountRead only: A number representing the sample count of theGPUTexture.
usageRead only: Thebitwise flags representing the allowed usages of theGPUTexture.
widthRead only: A number representing the width of theGPUTexture in pixels.

Instance methods

createView(): Creates aGPUTextureView representing a specific view of theGPUTexture.
destroy(): Destroys theGPUTexture.

Examples

In the WebGPU samplesTextured Cube sample, a texture to use on the faces of a cube is created by:

Loading the image into anHTMLImageElement and creating an image bitmap usingcreateImageBitmap().
Creating a newGPUTexture usingcreateTexture().
Copying the image bitmap into the texture usingGPUQueue.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],  );}// …