系列博客总目录: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 几个属性。

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

举例:

给一段旧版本的谬误 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;  }    `,})

编译时控制台会报错:

获取编译信息: