GPUShaderModule

可用性有限

此特性不是基线特性,因为它在一些最广泛使用的浏览器中不起作用。

安全上下文: 此功能仅在安全上下文(HTTPS)中可用,且支持此功能的浏览器数量有限。

注意:此功能在 Web Workers 中可用。

GPUShaderModule 接口是 WebGPU API 的一部分,代表一个内部着色器模块对象,它是 WGSL 着色器代码的容器,可以提交给 GPU 以便通过管道执行。

GPUShaderModule 对象实例是使用 GPUDevice.createShaderModule() 创建的。

实例属性

label

一个字符串,提供可用于识别对象的标签,例如在 GPUError 消息或控制台警告中。

实例方法

getCompilationInfo()

返回一个 Promise,该 Promise 会以一个 GPUCompilationInfo 对象解析,该对象包含在 GPUShaderModule 编译期间生成的各种消息。

示例

在我们 基本的渲染演示中,我们的着色器模块是使用以下代码创建的:

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.");
  }

  const device = await adapter.requestDevice();

  // …
  // later on

  const shaderModule = device.createShaderModule({
    code: shaders,
  });

  // …
}

规范

规范
WebGPU
# gpushadermodule

浏览器兼容性

另见