Limited availability
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 createShaderModule()
method of the GPUDevice
interface creates a GPUShaderModule
from a string of WGSL source code.
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 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 sourceMap
s in different ways, including possibly ignoring them entirely.
A GPUShaderModule
object instance.
The following criteria must be met when calling createShaderModule()
, otherwise a GPUValidationError
is generated and an invalid GPUShaderModule
object is returned:
f16
, it includes enable f16;
at the top, and the associated GPUDevice
is created with the shader-f16
feature enabled.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,
});
// â¦
}
Specifications Browser compatibility See also
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4