The copyExternalImageToTexture()
method of the GPUQueue
interface copies a snapshot taken from a source image, video, or canvas into a given GPUTexture
.
Using this function allows the user agent to determine the most efficient way to copy the data over for each source type.
copyExternalImageToTexture(source, destination, copySize)
The following criteria must be met when calling writeTexture()
, otherwise a GPUValidationError
is generated and the GPUQueue
becomes invalid:
In the WebGPU Samples Textured Cube example, the following snippet is used to fetch an image and upload it into a GPUTexture
:
let cubeTexture: GPUTexture;
{
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]
);
}