GPUDevice: createShaderModule() Methode

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Experimentell: Dies ist eine experimentelle Technologie
Überprüfen Sie die Browser-Kompatibilitätstabelle sorgfältig vor der Verwendung auf produktiven Webseiten.

Sicherer Kontext: Diese Funktion ist nur in sicheren Kontexten (HTTPS) in einigen oder allen unterstützenden Browsern verfügbar.

Hinweis: Diese Funktion ist in Web Workers verfügbar.

Die createShaderModule()-Methode der GPUDevice-Schnittstelle erstellt ein GPUShaderModule aus einem String von WGSL-Quellcode.

Syntax

js
createShaderModule(descriptor)

Parameter

descriptor

Ein Objekt mit den folgenden Eigenschaften:

code

Ein String, der den WGSL-Quellcode für das Shader-Modul darstellt.

hints Optional

Eine Sequenz von Datensatztypen mit der Struktur ("string", compilationHint). Diese verhalten sich wie geordnete Maps. In jedem Fall ist der "string" ein Schlüssel, der zum Identifizieren oder Auswählen des Datensatzes verwendet wird, und compilationHint ist entweder eine GPUPipelineLayout-Objektinstanz oder ein aufgezählter Wert von "auto".

Der Zweck von hints ist es, Informationen über das Pipeline-Layout so früh wie möglich bereitzustellen, um die Leistung zu verbessern. Die Idee ist, die Menge der Kompilierung zu maximieren, die einmal von createShaderModule() durchgeführt werden kann, anstatt mehrfach in mehreren Aufrufen von GPUDevice.createComputePipeline() und GPUDevice.createRenderPipeline().

Hinweis: Unterschiedliche Implementierungen können hints auf unterschiedliche Weise behandeln, möglicherweise ignorieren sie sogar vollständig. Das Bereitstellen von Hinweisen garantiert keine verbesserte Shader-Kompilierungsleistung in allen Browsern/Systemen.

label Optional

Ein String, der ein Label bereitstellt, das zur Identifizierung des Objekts verwendet werden kann, z. B. in GPUError-Meldungen oder Konsolenwarnungen.

sourceMap Optional

Eine Definition der Quellkarte, um die Integration mit Entwicklertools zu ermöglichen, wie z.B. das Debuggen der Quellsprache. WGSL-Namen (Bezeichner) in Quellkarten sollten den in WGSL identifier comparison definierten Regeln folgen. Wenn definiert, kann die Quellkarte als source-map-v3 Format interpretiert werden.

Hinweis: Unterschiedliche Implementierungen können sourceMaps auf unterschiedliche Weise behandeln, möglicherweise ignorieren sie sogar vollständig.

Rückgabewert

Eine GPUShaderModule-Objektinstanz.

Validierung

Die folgenden Kriterien müssen erfüllt sein, wenn createShaderModule() aufgerufen wird, andernfalls wird ein GPUValidationError generiert und ein ungültiges GPUShaderModule-Objekt zurückgegeben:

  • Wenn Ihr WGSL-Code des Shaders den halbbreiten Gleitkommatyp f16 verwendet, enthält er enable f16; am Anfang und das zugehörige GPUDevice wird mit dem aktivierten shader-f16 Feature erstellt.

Beispiele

In unserem einfachen Render-Demo wird unser Shader-Modul mit folgendem Code erstellt:

js
const shaders = `
struct VertexOut {
  @builtin(position) position : vec4f,
  @location(0) color : vec4f
}

@vertex
fn vertex_main(@location(0) position: vec4f,
               @location(1) color: vec4f) -> VertexOut
{
  var output : VertexOut;
  output.position = position;
  output.color = color;
  return output;
}

@fragment
fn fragment_main(fragData: VertexOut) -> @location(0) vec4f
{
  return fragData.color;
}
`;

async function init() {
  if (!navigator.gpu) {
    throw Error("WebGPU not supported.");
  }

  const adapter = await navigator.gpu.requestAdapter();
  if (!adapter) {
    throw Error("Couldn't request WebGPU adapter.");
  }

  let device = await adapter.requestDevice();

  // ...
  // later on

  const shaderModule = device.createShaderModule({
    code: shaders,
  });

  // ...
}

Spezifikationen

Specification
WebGPU
# dom-gpudevice-createshadermodule

Browser-Kompatibilität

Report problems with this compatibility data on GitHub
desktopmobileserver
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
Deno
createShaderModule
Experimental

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Partial support
Partial support
In development. Supported in a pre-release version.
In development. Supported in a pre-release version.
No support
No support
Experimental. Expect behavior to change in the future.
See implementation notes.
User must explicitly enable this feature.
Has more compatibility info.

Siehe auch