Signatur
Beschreibung
getCurrentTexture() ist der Dreh- und Angelpunkt jeder WebGPU-Renderschleife: Die Methode liefert die Textur, die im aktuellen Frame auf dem <canvas> angezeigt wird. Typischerweise erzeugt man daraus mit createView() eine GPUTextureView und verwendet sie als colorAttachments[].view in einem Render-Pass.
Die Textur ist nur bis zum Ende der aktuellen Aufgabe (Task) gültig. Wenn der Browser den Frame mit dem Dokument zusammensetzt, wird sie „abgelaufen“ (destroyed). Deshalb muss getCurrentTexture() in jedem Frame neu aufgerufen werden, am besten innerhalb eines requestAnimationFrame-Callbacks. Innerhalb derselben Aufgabe liefern mehrere Aufrufe dasselbe Objekt.
Bevor die Methode funktioniert, muss der Kontext mit GPUCanvasContext.configure() konfiguriert werden (Gerät, Format, Verwendung). Format, Größe und usage der zurückgegebenen Textur entsprechen dieser Konfiguration und der aktuellen Größe des Canvas (canvas.width/canvas.height).
Rückgabewert
usage-Flags ergeben sich aus der Konfiguration via configure() und der Canvas-Größe.Beispiele
Canvas in einer Farbe löschen
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(),
alphaMode: 'premultiplied'
});
const encoder = device.createCommandEncoder();
const pass = encoder.beginRenderPass({
colorAttachments: [{
view: context.getCurrentTexture().createView(),
clearValue: { r: 0.1, g: 0.2, b: 0.4, a: 1 },
loadOp: 'clear',
storeOp: 'store'
}]
});
pass.end();
device.queue.submit([encoder.finish()]);Renderschleife mit requestAnimationFrame
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() });
const frame = (time) => {
// In JEDEM Frame eine neue Textur holen
const view = context.getCurrentTexture().createView();
const t = (Math.sin(time / 1000) + 1) / 2;
const encoder = device.createCommandEncoder();
const pass = encoder.beginRenderPass({
colorAttachments: [{
view,
clearValue: { r: t, g: 0.3, b: 1 - t, a: 1 },
loadOp: 'clear',
storeOp: 'store'
}]
});
pass.end();
device.queue.submit([encoder.finish()]);
requestAnimationFrame(frame);
};
requestAnimationFrame(frame);Texturgröße nach Canvas-Größenänderung prüfen
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() });
canvas.width = canvas.clientWidth * devicePixelRatio;
canvas.height = canvas.clientHeight * devicePixelRatio;
const tex = context.getCurrentTexture();
console.log(tex.width, tex.height, tex.format);// Wichtig · Fallstricke
- Nicht zwischenspeichern: Die Textur wird nach dem Zusammensetzen des Frames ungültig. Wer sie über Frames hinweg wiederverwendet, erzeugt Validierungsfehler (z. B. „Destroyed texture used in a submit“).
- Ohne vorheriges
configure()(oder nachunconfigure()) wirft die Methode eineInvalidStateError-DOMException. - Die Texturgröße richtet sich nach
canvas.width/canvas.height, nicht nach der CSS-Größe. Für scharfe Darstellung auf HiDPI-Displays mitdevicePixelRatioskalieren; ändert sich die Größe, liefert der nächste Aufruf automatisch eine passende neue Textur. - Standardmäßig hat die Textur nur
GPUTextureUsage.RENDER_ATTACHMENT. Für Kopier- oder Storage-Zugriffe (z. B.copyTextureToTexture) mussusageinconfigure()entsprechend erweitert werden. - Kompatibilität: WebGPU ist nur in sicheren Kontexten verfügbar und in Firefox/Safari erst seit Kurzem bzw. plattformabhängig aktiv. Vorab
if (!navigator.gpu)prüfen und ggf. auf WebGL zurückfallen. Auch inOffscreenCanvas/Workern nutzbar.