系列博客总目录：https://segmentfault.com/a/1190000040716735

对应文档中的 https://www.w3.org/TR/webgpu/…

对于着色器模块的创立，与 WebGL 中的 Shader 有改良，提供了编译信息。

GPUShaderModule 接口

这个接口是能够序列化的，意味着能够传递其援用进行多线程编程。

它是不可变对象（只读），所以不存在抵触的问题。

[Exposed=(Window, DedicatedWorker), SecureContext]
interface GPUShaderModule {Promise<GPUCompilationInfo> compilationInfo();
};
GPUShaderModule includes GPUObjectBase;

创立

创立一个 GPUShaderModule，须要调用 device.createShaderModule 办法。

此办法承受一个 GPUShaderModuleDescriptor 接口类型的对象，它不能为空对象，也不能不传递。

dictionary GPUShaderModuleDescriptor : GPUObjectDescriptorBase {
  required USVString code;
  object sourceMap;
};

如果传递了 sourceMap，即可应用一些工具来调试。这个是可选的。

例子：

const vsModule = device.createShaderModule({
  code: `
  struct PositionColorInput {[[location(0)]] in_position_2d: vec2<f32>;
    [[location(1)]] in_color_rgba: vec4<f32>;
  };

  struct PositionColorOutput {[[builtin(position)]] coords_output: vec4<f32>;
    [[location(0)]] color_output: vec4<f32>;
  };

  // 能够写正文

  [[stage(vertex)]]
  fn main(input: PositionColorInput) 
    -> PositionColorOutput {
    var output: PositionColorOutput;
    output.color_output = input.in_color_rgba;
    output.coords_output = vec4<f32>(input.in_position_2d, 0.0, 1.0);
    return output;
  }
  `
})

const fsModule = device.createShaderModule({
  code: `
    [[stage(fragment)]]
  fn main([[location(0)]] in_color: vec4<f32>) 
    -> [[location(0)]] vec4<f32> {return in_color;}`,
})

获取编译信息

enum GPUCompilationMessageType {
  "error",
  "warning",
  "info"
};

[Exposed=(Window, DedicatedWorker), Serializable, SecureContext]
interface GPUCompilationMessage {
  readonly attribute DOMString message;
  readonly attribute GPUCompilationMessageType type;
  readonly attribute unsigned long long lineNum;
  readonly attribute unsigned long long linePos;
  readonly attribute unsigned long long offset;
  readonly attribute unsigned long long length;
};

[Exposed=(Window, DedicatedWorker), Serializable, SecureContext]
interface GPUCompilationInfo {readonly attribute FrozenArray<GPUCompilationMessage> messages;};

编译信息是由 GPUShaderModule 在编译着色器代码时生成的编译日志，包含信息、正告、谬误。

开发者能够通过调用 shaderModule.compilationInfo() 并 await 其 resolve 值查看编译信息对象。

编译信息对象实现自接口 GPUCompilationInfo，它包含了字符串音讯 message、编译信息类型 type、着色器代码行数 lineNum、着色器代码行哪个字符 linePos、着色器代码中的地位 offset 以及代码单元个数 length 几个属性。

留神，个别比拟罕用 lineNum 和 linePos，比拟合乎代码编辑器里的行和列。

举例：

给一段旧版本的谬误 WGSL 代码：

const fsModule = device.createShaderModule({
  code: `
  [[location(0)]] var<out> outColor: vec4<f32>;

  [[stage(fragment)]]
  fn main() -> void {outColor = vec4<f32>(1.0, 0.2, 0.4, 1.0);
    return;
  }
    `,
})

编译时控制台会报错：

获取编译信息：