GPUDevice: createShaderModule() 方法

实验性： 这是一个实验性技术
在生产环境中使用此功能之前，请仔细查看浏览器兼容性表。

安全上下文： 此功能仅在安全上下文（HTTPS）中可用，在部分或全部支持的浏览器中可用。

createShaderModule() 方法是 GPUDevice 接口的一部分，它从 WGSL 源代码字符串创建 GPUShaderModule。

语法

js
createShaderModule(descriptor)

参数

descriptor

包含以下属性的对象

code

表示着色器模块的 WGSL 源代码的字符串。

hints 可选

一系列记录类型，结构为 ("string", compilationHint)。它们的行为类似于有序映射。在每种情况下，"string" 都是用于标识或选择记录的键，compilationHint 则是 GPUPipelineLayout 对象实例或枚举值 "auto"。

hints 的目的是尽早提供有关管道布局的信息，以提高性能。其目的是最大限度地提高 createShaderModule() 可以完成的编译量，而不是在对 GPUDevice.createComputePipeline() 和 GPUDevice.createRenderPipeline() 的多次调用中多次执行。

注意：不同的实现可能以不同的方式处理 hints，包括可能完全忽略它们。提供提示不能保证所有浏览器/系统上的着色器编译性能都能得到改善。

label 可选

一个字符串，提供一个标签，可以用来标识该对象，例如在 GPUError 消息或控制台警告中。

sourceMap 可选

一个源映射定义，用于提供开发者工具集成，例如源语言调试。源映射中的 WGSL 名称（标识符）应遵循 WGSL 标识符比较 中定义的规则。如果定义，源映射可以被解释为 源映射 v3 格式。

注意：不同的实现可能以不同的方式处理 sourceMap，包括可能完全忽略它们。

返回值

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

  let device = await adapter.requestDevice();

  // ...
  // later on

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

  // ...
}

规范

规范
WebGPU
# dom-gpudevice-createshadermodule

浏览器兼容性

BCD 表格仅在启用 JavaScript 的浏览器中加载。

另请参阅