GPUShaderModule

Limited availability

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

Secure context: This feature is available only insecure contexts (HTTPS), in some or allsupporting browsers.

Note: This feature is available inWeb Workers.

TheGPUShaderModule interface of theWebGPU API represents an internal shader module object, a container forWGSL shader code that can be submitted to the GPU for execution by a pipeline.

AGPUShaderModule object instance is created usingGPUDevice.createShaderModule().

Instance properties

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

Instance methods

getCompilationInfo(): Returns aPromise that fulfills with aGPUCompilationInfo object containing messages generated during theGPUShaderModule's compilation.

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