Signatur
Beschreibung
Die Eigenschaft GPUTexture.width liefert die Breite der Textur in Texeln. Der Wert entspricht der ersten Komponente von size aus dem Deskriptor, der an GPUDevice.createTexture() übergeben wurde. Bei Texturen aus GPUCanvasContext.getCurrentTexture() entspricht er der Breite des Canvas-Zeichenpuffers (canvas.width) zum Zeitpunkt des Abrufs.
Brauchbar ist die Eigenschaft vor allem dann, wenn Code eine Textur übernimmt, deren Deskriptor er nicht kennt. Typische Fälle: Viewport- oder Scissor-Rechtecke setzen, Tiefenpuffer mit passender Größe anlegen, Compute-Dispatches berechnen (Math.ceil(texture.width / workgroupSize)) oder bei copyTextureToBuffer() das bytesPerRow bestimmen.
Der Wert ist unveränderlich. WebGPU-Texturen lassen sich nicht in der Größe ändern. Wenn du eine andere Größe brauchst, musst du eine neue Textur erzeugen und die alte mit destroy() freigeben. Beachte, dass width immer die Breite der Mip-Stufe 0 angibt. Die Breite der Stufe n ist Math.max(1, texture.width >> n).
Rückgabewert
Beispiele
Breite einer neu erzeugten Textur auslesen
const adapter = await navigator.gpu.requestAdapter();
const device = await adapter.requestDevice();
const texture = device.createTexture({
size: [640, 480],
format: 'rgba8unorm',
usage: GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.COPY_DST,
});
console.log(texture.width, texture.height);Passenden Tiefenpuffer zur Canvas-Textur anlegen
const canvas = document.querySelector('canvas');
const adapter = await navigator.gpu.requestAdapter();
const device = await adapter.requestDevice();
const context = canvas.getContext('webgpu');
context.configure({ device, format: navigator.gpu.getPreferredCanvasFormat() });
let depthTexture = null;
const getDepthTexture = (colorTexture) => {
// Nur neu anlegen, wenn sich die Größe geändert hat
if (!depthTexture ||
depthTexture.width !== colorTexture.width ||
depthTexture.height !== colorTexture.height) {
depthTexture?.destroy();
depthTexture = device.createTexture({
size: [colorTexture.width, colorTexture.height],
format: 'depth24plus',
usage: GPUTextureUsage.RENDER_ATTACHMENT,
});
}
return depthTexture;
};
const colorTexture = context.getCurrentTexture();
console.log('Tiefenpuffer-Breite:', getDepthTexture(colorTexture).width);Compute-Dispatch und Mip-Breiten berechnen
const adapter = await navigator.gpu.requestAdapter();
const device = await adapter.requestDevice();
const texture = device.createTexture({
size: [1000, 600],
mipLevelCount: 4,
format: 'rgba8unorm',
usage: GPUTextureUsage.STORAGE_BINDING,
});
const WORKGROUP = 8;
const groupsX = Math.ceil(texture.width / WORKGROUP);
console.log('Workgroups X:', groupsX);
for (let level = 0; level < texture.mipLevelCount; level++) {
console.log(`Mip ${level}: ${Math.max(1, texture.width >> level)} px`);
}// Wichtig · Fallstricke
- Schreibgeschützt: Eine Zuweisung wie
texture.width = 800wird stillschweigend ignoriert und wirft nur im strikten Modus einenTypeError. Um die Größe zu ändern, erzeugst du eine neue Textur. - Nur Mip-Stufe 0: Für höhere Mip-Stufen musst du die Breite selbst berechnen (
Math.max(1, width >> level)). - Canvas-Texturen:
getCurrentTexture()liefert pro Frame eine neue Textur. Deren Breite folgtcanvas.width, nicht der CSS-Größe. Ob sich die Größe geändert hat, prüfst du deshalb jeden Frame neu. - Grenzen: Die maximale Breite hängt von
device.limits.maxTextureDimension2Dab (mindestens 8192) bzw. vonmaxTextureDimension1D/3D. - Kompatibilität: WebGPU gibt es nur in sicheren Kontexten und noch nicht in allen Browsern bzw. auf allen Plattformen. Prüfe vorher mit
if (!navigator.gpu), ob es verfügbar ist.