/Web APIs

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.






An object containing the following properties:


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.


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


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

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

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,

  // ...


Browser compatibility

Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet
113Currently supported on ChromeOS, macOS, and Windows only.
113Currently supported on ChromeOS, macOS, and Windows only.
previewCurrently supported on Linux and Windows only.
99Currently supported on ChromeOS, macOS, and Windows only.
No No No No No No No

See also

© 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.