GPUDevice: createShaderModule() method

Limited availability

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

Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.

Note: This feature is available in Web Workers.

The createShaderModule() method of the GPUDevice interface creates a GPUShaderModule from a string of WGSL source code.

Syntax

js
createShaderModule(descriptor)

Parameters

descriptor

An object containing the following properties:

code

A string representing the WGSL source code for the shader module.

hints Optional

A sequence of record types, with the structure ("string", compilationHint). These behave like ordered maps. In each case, the "string" is a key used to identify or select the record, and the compilationHint is either a GPUPipelineLayout object instance or an enumerated value of "auto".

The point of hints is to provide information about the pipeline layout as early as possible to improve performance. The idea is to maximize the amount of compilation that can be done once by createShaderModule(), rather than multiple times in multiple calls to GPUDevice.createComputePipeline() and GPUDevice.createRenderPipeline().

Note: Different implementations may handle hints in different ways, including possibly ignoring them entirely. Providing hints does not guarantee improved shader compilation performance on all browsers/systems.

label Optional

A string providing a label that can be used to identify the object, for example in GPUError messages or console warnings.

sourceMap Optional

A source map definition to provide developer tool integration such as source-language debugging. WGSL names (identifiers) in source maps should follow the rules defined in WGSL identifier comparison. If defined, the source map may be interpreted as a source-map-v3 format.

Note: Different implementations may handle sourceMaps in different ways, including possibly ignoring them entirely.

Return value

A GPUShaderModule object instance.

Validation

The following criteria must be met when calling createShaderModule(), otherwise a GPUValidationError is generated and an invalid GPUShaderModule object is returned:

  • If your shader's WGSL code uses the half-precision floating-point type f16, it includes enable f16; at the top, and the associated GPUDevice is created with the shader-f16 feature enabled.

Examples

In our basic render demo, our shader module is created using the following code:

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,
  });

  // ...
}

Specifications

Specification
WebGPU
# dom-gpudevice-createshadermodule

Browser compatibility

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.

See also