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 thecompilationHint
is either aGPUPipelineLayout
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 bycreateShaderModule()
, rather than multiple times in multiple calls toGPUDevice.createComputePipeline()
andGPUDevice.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