GPUDevice: createShaderModule() method
======================================

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

 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 `sourceMap`s in different ways, including possibly ignoring them entirely.



### Return value

A `GPUShaderModule` object instance.

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
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* The WebGPU API
* The WebGPU Shading Language specification