ThecreateShaderModule() method of theGPUDevice interface creates aGPUShaderModule from a string ofWGSL source code.

Syntax

createShaderModule(descriptor)

Parameters

descriptor

An object containing the following properties:

code

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

hintsOptional

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

The point ofhints 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 bycreateShaderModule(), rather than multiple times in multiple calls toGPUDevice.createComputePipeline() andGPUDevice.createRenderPipeline().

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

labelOptional

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

sourceMapOptional

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 inWGSL identifier comparison. If defined, the source map may be interpreted as asource-map-v3 format.

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

Return value

AGPUShaderModule object instance.

Validation

The following criteria must be met when callingcreateShaderModule(), otherwise aGPUValidationError is generated and an invalidGPUShaderModule object is returned:

• If your shader's WGSL code uses the half-precision floating-point typef16, it includesenable f16; at the top, and the associatedGPUDevice is created with theshader-f16feature enabled.

Examples

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

const shaders = `struct VertexOut {  @builtin(position) position : vec4f,  @location(0) color : vec4f}@vertexfn vertex_main(@location(0) position: vec4f,               @location(1) color: vec4f) -> VertexOut{  var output : VertexOut;  output.position = position;  output.color = color;  return output;}@fragmentfn 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.");  }  const device = await adapter.requestDevice();  // …  // later on  const shaderModule = device.createShaderModule({    code: shaders,  });  // …}

Specifications

Browser compatibility

See also

• TheWebGPU API
• TheWebGPU Shading Language specification