GPUTexture

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Sicherer Kontext: Diese Funktion ist nur in sicheren Kontexten (HTTPS) in einigen oder allen unterstützenden Browsern verfügbar.

Hinweis: Diese Funktion ist in Web Workers verfügbar.

Das GPUTexture-Interface der WebGPU-API repräsentiert einen Container, der zur Speicherung von 1D-, 2D- oder 3D-Datenarrays, wie z.B. Bildern, verwendet wird, um sie in GPU-Rendering-Operationen zu nutzen.

Ein GPUTexture-Objekt wird mit der Methode GPUDevice.createTexture() erstellt.

Instanz-Eigenschaften

depthOrArrayLayers Schreibgeschützt: Eine Zahl, die die Tiefe oder die Anzahl der Schichten des GPUTexture darstellt (Pixel oder Anzahl der Schichten).
dimension Schreibgeschützt: Ein enumerierter Wert, der die Dimension der Texelmenge für jede GPUTexture-Subressource darstellt.
format Schreibgeschützt: Ein enumerierter Wert, der das Format des GPUTexture repräsentiert. Siehe im Abschnitt Texture formats der Spezifikation für alle möglichen Werte.
height Schreibgeschützt: Eine Zahl, die die Höhe des GPUTexture in Pixeln darstellt.
label: Ein String, der ein Label zur Verfügung stellt, das verwendet werden kann, um das Objekt zu identifizieren, beispielsweise in GPUError-Meldungen oder Konsolenwarnungen.
mipLevelCount Schreibgeschützt: Eine Zahl, die die Anzahl der Mip-Level des GPUTexture darstellt.
sampleCount Schreibgeschützt: Eine Zahl, die die Anzahl der Samples des GPUTexture darstellt.
usage Schreibgeschützt: Die bitweisen Flags, die die erlaubten Nutzungen des GPUTexture darstellen.
width Schreibgeschützt: Eine Zahl, die die Breite des GPUTexture in Pixeln darstellt.

Instanz-Methoden

createView(): Erstellt eine GPUTextureView, die eine spezifische Ansicht des GPUTexture repräsentiert.
destroy(): Zerstört das GPUTexture.

Beispiele

Im WebGPU-Beispiel Textured Cube sample, wird eine Textur, die auf den Flächen eines Würfels verwendet werden soll, durch folgende Schritte erstellt:

Laden des Bildes in ein HTMLImageElement und Erstellen eines Image-Bitmaps mit createImageBitmap().
Erstellen eines neuen GPUTexture mittels createTexture().
Kopieren des Image-Bitmaps in die Textur mittels 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],
  );
}
// …

Spezifikationen

Specification
WebGPU # texture-interface

Browser-Kompatibilität

Siehe auch

Die WebGPU-API