Limited availability
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
Note: This feature is available in Web Workers.
The createTexture()
method of the GPUDevice
interface creates a GPUTexture
in which to store 1D, 2D, or 3D arrays of data, such as images, to use in GPU rendering operations.
createTexture(descriptor)
Parameters
descriptor
An object containing the following properties:
dimension
Optional
An enumerated value indicating the dimension level of the texture. Possible values are:
"1d"
: The texture is one-dimensional."2d"
: The texture is two-dimensional or an array of two-dimensional layers."3d"
: The texture is three-dimensional.dimension
defaults to "2d"
if the value is omitted.
format
An enumerated value specifying the format of the texture. See the Texture formats section of the specification for all the possible values.
Note:
depth32float-stencil8
feature needs to be enabled to create depth32float-stencil8
-format GPUTexture
s.texture-compression-bc
feature needs to be enabled to create two-dimensional BC compressed GPUTexture
s: bc1-rgba-unorm
, bc1-rgba-unorm-srgb
, bc2-rgba-unorm
, bc2-rgba-unorm-srgb
, bc3-rgba-unorm
, bc3-rgba-unorm-srgb
, bc4-r-unorm
, bc4-r-snorm
, bc5-rg-unorm
, bc5-rg-snorm
, bc6h-rgb-ufloat
, bc6h-rgb-float
, bc7-rgba-unorm
, and bc7-rgba-unorm-srgb
formats.texture-compression-astc
feature needs to be enabled to create two-dimensional ASTC compressed GPUTexture
s: astc-4x4-unorm
, astc-4x4-unorm-srgb
, astc-5x4-unorm
, astc-5x4-unorm-srgb
, astc-5x5-unorm
, astc-5x5-unorm-srgb
, astc-6x5-unorm
, astc-6x5-unorm-srgb
, astc-6x6-unorm
, astc-6x6-unorm-srgb
, astc-8x5-unorm
, astc-8x5-unorm-srgb
, astc-8x6-unorm
, astc-8x6-unorm-srgb
, astc-8x8-unorm
, astc-8x8-unorm-srgb
, astc-10x5-unorm
, astc-10x5-unorm-srgb
, astc-10x6-unorm
, astc-10x6-unorm-srgb
, astc-10x8-unorm
, astc-10x8-unorm-srgb
, astc-10x10-unorm
, astc-10x10-unorm-srgb
, astc-12x10-unorm
, astc-12x10-unorm-srgb
, and astc-12x12-unorm``astc-12x12-unorm-srgb
formats.texture-compression-etc2
feature needs to be enabled to create two-dimensional ETC2 compressed GPUTexture
s: etc2-rgb8unorm
, etc2-rgb8unorm-srgb
, etc2-rgb8a1unorm
, etc2-rgb8a1unorm-srgb
, etc2-rgba8unorm
, etc2-rgba8unorm-srgb
, eac-r11unorm
, eac-r11snorm
, eac-rg11unorm
, and eac-rg11snorm
formats.label
Optional
A string providing a label that can be used to identify the object, for example in GPUError
messages or console warnings.
mipLevelCount
Optional
A number specifying the number of mip levels the texture will contain. If omitted, this defaults to 1.
sampleCount
Optional
A number specifying the texture's sample count. To be valid, the value must be 1 or 4. If omitted, this defaults to 1. A value higher than 1 indicates a multi-sampled texture.
size
An object or array specifying the width, height, and depth/array layer count of the texture. The width value must always be specified, while the height and depth/array layer count values are optional and will default to 1 if omitted.
For example, you can pass an array like [16, 16, 2]
, or its equivalent object { width: 16, height: 16, depthOrArrayLayers: 2 }
.
usage
The bitwise flags representing the allowed usages for the GPUTexture
. The possible values are in the GPUTexture.usage
value table.
Note that multiple possible usages can be specified by separating values with bitwise OR, for example: GPUTextureUsage.COPY_DST | GPUTextureUsage.RENDER_ATTACHMENT
.
Note:
bgra8unorm-storage
feature needs to be enabled to specify STORAGE_BINDING
usage for a bgra8unorm
-format
GPUTexture
.rg11b10ufloat-renderable
feature needs to be enabled to specify RENDER_ATTACHMENT
usage for a rg11b10ufloat
-format
GPUTexture
, as well as its blending and multisampling.viewFormats
Optional
An array of enumerated values specifying other texture formats permitted when calling GPUTexture.createView()
on this texture, in addition to the texture format specified in its format
value.
A GPUTexture
object instance.
The following criteria must be met when calling createTexture()
, otherwise a GPUValidationError
is generated and an invalid GPUTexture
object is returned:
usage
is specified.size
(width, height, or depth/array layer count) are greater than 0.mipLevelCount
is greater than 0.sampleCount
is equal to 1 or 4.dimension
is set to "1d"
:
size
width value is less than or equal to the GPUDevice
's maxTextureDimension1D
limit.size
height and depth/array layer count values are equal to 1.sampleCount
is equal to 1.format
is not equal to a compressed format or depth-or-stencil format.dimension
is set to "2d"
:
dimension
is set to "3d"
:
size
width, and height, and depth/array layer count values are less than or equal to the GPUDevice
's maxTextureDimension3D
limit.sampleCount
value is equal to 1.format
is not equal to a compressed format or depth-or-stencil format.size
width value is a multiple of the texel block width.size
height value is a multiple of the texel block height.sampleCount
is greater than 1:
mipLevelCount
is equal to 1.size
depth/array layer count value is equal to 1.usage
includes the GPUTextureUsage.RENDER_ATTACHMENT
flag.usage
does not include the GPUTextureUsage.STORAGE_BINDING
flag.mipLevelCount
value is less than or equal to the maximum miplevel count.format
and viewFormats
are compatible with one another.usage
includes the GPUTextureUsage.RENDER_ATTACHMENT
flag:
format
is a renderable format (meaning a color renderable format, or a depth-or-stencil format).dimension
is set to "2d"
.usage
includes the GPUTextureUsage.STORAGE_BINDING
flag:
format
includes the STORAGE_BINDING
capability (see the Plain color formats table for reference).In the WebGPU samples Textured Cube sample, a texture to use on the faces of a cube is created by:
HTMLImageElement
and creating an image bitmap using createImageBitmap()
.createTexture()
.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],
);
}
// â¦
Specifications Browser compatibility See also
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4