Start · Sprachen · JavaScript · Referenz · GPUSupportedFeatures

GPUSupportedFeatures

Schnittstelle

Set-ähnliches, schreibgeschütztes Objekt mit den Namen optionaler WebGPU-Features, die ein <code>GPUAdapter</code> oder <code>GPUDevice</code> unterstützt.

seit JavaScript WebGPU; Chrome/Edge 113+, Firefox 141+ (Windows), Kategorie: webapi

Signatur

interface GPUSupportedFeatures

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

Typ
GPUSupportedFeatures
Beschreibung
Wird von 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();
Anzahl Features: 5 depth-clip-control texture-compression-bc timestamp-query shader-f16 float32-filterable (die Ausgabe hängt von Hardware und Browser ab)

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();
Aktiv auf dem Gerät: ['timestamp-query', 'shader-f16'] Zeitmessung möglich: true

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();
Verwende Texturformat: bc

// Wichtig · Fallstricke

  • Adapter und Gerät unterscheiden: adapter.features zeigt, was möglich ist. device.features enthält nur die Features, die du über requiredFeatures angefordert hast. Wenn du ein Feature ohne Aktivierung nutzt, bekommst du Validierungsfehler.
  • Wenn du in requiredFeatures ein Feature anforderst, das der Adapter nicht unterstützt, wird das Promise von requestDevice() mit einem TypeError zurückgewiesen. Prüfe deshalb vorher mit has().
  • Das Objekt ist schreibgeschützt. add(), delete() und clear() gibt es nicht. Um ein normales Array zu bekommen, nutze [...features] oder Array.from(features).
  • Datenschutz: Die Liste der Features kann zum Fingerprinting beitragen. Browser können einzelne Features deshalb ausblenden, zum Beispiel timestamp-query mit 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, dass requestAdapter() null liefert.