GPUShaderModule
Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.
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
Instance methods
getCompilationInfo()
Experimental-
Returns a
Promise
that fulfills with aGPUCompilationInfo
object containing messages generated during theGPUShaderModule
'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.");
}
let device = await adapter.requestDevice();
// ...
// later on
const shaderModule = device.createShaderModule({
code: shaders,
});
// ...
}
Specifications
Specification |
---|
WebGPU # gpushadermodule |
Browser compatibility
BCD tables only load in the browser
See also
- The WebGPU API