Start · Sprachen · JavaScript · Referenz · GPUTexture.height

GPUTexture.height

Eigenschaft

Schreibgeschützte Eigenschaft, die die Höhe einer <code>GPUTexture</code> in Texeln (Mip-Level 0) als Ganzzahl liefert.

seit JavaScript WebGPU: Chrome/Edge 113+, Safari 26+, Firefox 141+ Kategorie: webapi

Signatur

GPUTexture.height

Beschreibung

Die Eigenschaft height des Interfaces GPUTexture gibt die Höhe der Textur in Texeln zurück. Der Wert entspricht der Höhe, die beim Erzeugen über GPUDevice.createTexture() im Feld size angegeben wurde. Das kann die zweite Array-Komponente ([width, height, depth]) oder die Objekteigenschaft size.height sein. Wurde nichts angegeben, ist der Wert 1.

Gebraucht wird die Eigenschaft vor allem dann, wenn eine Textur an anderer Stelle weiterverarbeitet wird und ihre Maße nicht separat gespeichert sind: zum Beispiel für GPUQueue.writeTexture(), für copyTextureToBuffer(), zum Berechnen von Puffergrößen (bytesPerRow * height) oder für die Anzahl der Workgroups beim Compute-Dispatch.

Der Wert bezieht sich immer auf das Basis-Mip-Level 0. Für ein Mip-Level n berechnet man die Höhe selbst mit Math.max(1, texture.height >> n). Bei Texturen, die von GPUCanvasContext.getCurrentTexture() kommen, entspricht height der Eigenschaft canvas.height zu diesem Zeitpunkt.

Rückgabewert

Typ
number
Beschreibung
Positive Ganzzahl (GPUIntegerCoordinateOut): die Höhe der Textur in Texeln auf Mip-Level 0. Bei "1d"-Texturen ist der Wert immer 1.

Beispiele

Höhe einer neu erstellten Textur auslesen

const adapter = await navigator.gpu?.requestAdapter();
if (!adapter) throw new Error('WebGPU nicht verfügbar');
const device = await adapter.requestDevice();

const texture = device.createTexture({
  size: [512, 256],
  format: 'rgba8unorm',
  usage: GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.COPY_DST
});

console.log(`${texture.width} x ${texture.height}`);
512 x 256

Pixeldaten mit writeTexture hochladen

const uploadPixels = (device, texture, pixels) => {
  const bytesPerRow = texture.width * 4; // rgba8unorm = 4 Byte pro Texel
  device.queue.writeTexture(
    { texture },
    pixels,
    { bytesPerRow, rowsPerImage: texture.height },
    { width: texture.width, height: texture.height }
  );
};

const tex = device.createTexture({
  size: { width: 64, height: 32 },
  format: 'rgba8unorm',
  usage: GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.COPY_DST
});
uploadPixels(device, tex, new Uint8Array(64 * 32 * 4).fill(255));
console.log('Hochgeladen:', tex.height, 'Zeilen');
Hochgeladen: 32 Zeilen

Mip-Level-Höhen und Compute-Dispatch berechnen

const tex = device.createTexture({
  size: [1024, 600],
  mipLevelCount: 4,
  format: 'rgba8unorm',
  usage: GPUTextureUsage.STORAGE_BINDING
});

const mipHeight = (texture, level) => Math.max(1, texture.height >> level);
for (let i = 0; i < tex.mipLevelCount; i++) {
  console.log(`Mip ${i}: Höhe ${mipHeight(tex, i)}`);
}

// Workgroups für 8x8-Kacheln in Y-Richtung
const groupsY = Math.ceil(tex.height / 8);
console.log('Workgroups Y:', groupsY);
Mip 0: Höhe 600 Mip 1: Höhe 300 Mip 2: Höhe 150 Mip 3: Höhe 75 Workgroups Y: 75

// Wichtig · Fallstricke

  • Schreibgeschützt: Eine Zuweisung wie texture.height = 100 wird still ignoriert (im Strict Mode gibt es einen TypeError). Wenn du eine andere Größe brauchst, erzeuge eine neue Textur. Die alte gibst du mit destroy() frei.
  • Nur Mip-Level 0: Die Höhe kleinerer Mip-Levels musst du selbst berechnen.
  • Canvas-Texturen: getCurrentTexture() liefert in jedem Frame eine neue Textur. Ändert sich die Größe des Canvas, ändert sich auch height. Tiefen- und MSAA-Texturen müssen dann passend neu erzeugt werden, sonst gibt es Validierungsfehler.
  • Grenzen: Die maximal erlaubte Höhe steht in device.limits.maxTextureDimension2D (bei 1D-Texturen gilt maxTextureDimension1D).
  • Kompatibilität: WebGPU gibt es nur in sicheren Kontexten und noch nicht in allen Browsern. Prüfe deshalb vorher, ob navigator.gpu vorhanden ist. Die Eigenschaft ist auch in Web Workern verfügbar.