GPUShaderModule

Limited availability

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

Want more support for this feature? Tell us why.

Learn more
See full compatibility

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 GPUShaderModule interface of the WebGPU API represents an internal shader module object, a container for WGSL shader code that can be submitted to the GPU for execution by a pipeline.

A GPUShaderModule object instance is created using GPUDevice.createShaderModule().

Instance properties

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

Instance methods

getCompilationInfo(): Returns a Promise that fulfills with a GPUCompilationInfo object containing messages generated during the GPUShaderModule's compilation.

Examples

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
}
@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.");
 }
 const device = await adapter.requestDevice();
 // ...
 // later on
 const shaderModule = device.createShaderModule({
 code: shaders,
 });
 // ...
}