Signatur
Beschreibung
GPUSupportedFeatures ist ein schreibgeschütztes, Set-ähnliches Objekt der WebGPU API. Es enthält Zeichenketten wie "texture-compression-bc", "timestamp-query", "shader-f16" oder "float32-filterable". Jede davon steht für eine optionale Fähigkeit, die über den WebGPU-Grundumfang hinausgeht. Du bekommst das Objekt über GPUAdapter.features (was die Hardware bzw. der Treiber kann) und über GPUDevice.features (was auf dem Gerät tatsächlich aktiviert wurde).
Die typische Nutzung sieht so aus: Du fragst zuerst beim Adapter mit has() ab, ob ein Feature vorhanden ist. Danach forderst du es beim Aufruf von adapter.requestDevice() über das Feld requiredFeatures ausdrücklich an. Nur angeforderte Features sind später auf dem GPUDevice aktiv. Ein Feature steht also nicht automatisch zur Verfügung, nur weil der Adapter es unterstützt.
Weil das Objekt wie ein schreibgeschütztes Set aufgebaut ist, hat es die Eigenschaft size und die Methoden has(), keys(), values(), entries() und forEach(). Außerdem kannst du es mit for...of durchlaufen. Methoden zum Ändern wie add(), delete() oder clear() gibt es nicht.
Rückgabewert
GPUAdapter.features und GPUDevice.features zurückgegeben. Die Einträge sind Feature-Namen vom Typ string.Beispiele
Alle Features des Adapters auflisten
const listFeatures = async () => {
if (!navigator.gpu) {
console.log('WebGPU wird nicht unterstützt');
return;
}
const adapter = await navigator.gpu.requestAdapter();
if (!adapter) {
console.log('Kein passender GPU-Adapter gefunden');
return;
}
console.log(`Anzahl Features: ${adapter.features.size}`);
for (const feature of adapter.features) {
console.log(feature);
}
};
listFeatures();
Optionales Feature prüfen und beim Gerät anfordern
const initDevice = async () => {
const adapter = await navigator.gpu?.requestAdapter();
if (!adapter) throw new Error('WebGPU nicht verfügbar');
// Nur anfordern, was der Adapter wirklich kann
const wanted = ['timestamp-query', 'shader-f16'];
const requiredFeatures = wanted.filter((f) => adapter.features.has(f));
const device = await adapter.requestDevice({ requiredFeatures });
console.log('Aktiv auf dem Gerät:', [...device.features]);
console.log('Zeitmessung möglich:', device.features.has('timestamp-query'));
return device;
};
initDevice();
Passendes Texturkompressionsformat auswählen
const pickCompression = async () => {
const adapter = await navigator.gpu.requestAdapter();
const { features } = adapter;
// Typisch: BC auf dem Desktop, ETC2/ASTC auf Mobilgeräten
const format = features.has('texture-compression-bc') ? 'bc'
: features.has('texture-compression-astc') ? 'astc'
: features.has('texture-compression-etc2') ? 'etc2'
: 'unkomprimiert';
console.log(`Verwende Texturformat: ${format}`);
};
pickCompression();
// Wichtig · Fallstricke
- Adapter und Gerät unterscheiden:
adapter.featureszeigt, was möglich ist.device.featuresenthält nur die Features, die du überrequiredFeaturesangefordert hast. Wenn du ein Feature ohne Aktivierung nutzt, bekommst du Validierungsfehler. - Wenn du in
requiredFeaturesein Feature anforderst, das der Adapter nicht unterstützt, wird das Promise vonrequestDevice()mit einemTypeErrorzurückgewiesen. Prüfe deshalb vorher mithas(). - Das Objekt ist schreibgeschützt.
add(),delete()undclear()gibt es nicht. Um ein normales Array zu bekommen, nutze[...features]oderArray.from(features). - Datenschutz: Die Liste der Features kann zum Fingerprinting beitragen. Browser können einzelne Features deshalb ausblenden, zum Beispiel
timestamp-querymit reduzierter Genauigkeit. - Kompatibilität: WebGPU steht nur in sicheren Kontexten (HTTPS) zur Verfügung. Die Unterstützung ist noch nicht in allen Browsern und auf allen Plattformen vollständig. Prüfe daher immer zuerst mit
navigator.gpu, ob die API da ist, und rechne damit, dassrequestAdapter()nullliefert.