区块链技术博客
www.b2bchain.cn

WebGPU 规范篇 07 着色器模块求职学习资料

本文介绍了WebGPU 规范篇 07 着色器模块求职学习资料,有助于帮助完成毕业设计以及求职,是一篇很好的资料。

对技术面试,学习经验等有一些体会,在此分享。

系列博客目录传送门:https://xiaozhuanlan.com/topic/9587342601

  • GPUShaderModule 接口
    • 创建


对应文档中的 https://www.w3.org/TR/webgpu/#shader-modules

关于着色器模块的创建,与 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,即可使用一些工具来调试。这个是可选的。

例子:

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

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

// 可以写注释

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

const fsModule = device.createShaderModule({

系列博客目录传送门:https://xiaozhuanlan.com/topic/9587342601

  • GPUShaderModule 接口
    • 创建


对应文档中的 https://www.w3.org/TR/webgpu/#shader-modules

关于着色器模块的创建,与 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,即可使用一些工具来调试。这个是可选的。

例子:

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

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

// 可以写注释

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

const fsModule = device.createShaderModule({

系列博客目录传送门:https://xiaozhuanlan.com/topic/9587342601

  • GPUShaderModule 接口
    • 创建


对应文档中的 https://www.w3.org/TR/webgpu/#shader-modules

关于着色器模块的创建,与 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,即可使用一些工具来调试。这个是可选的。

例子:

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

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

// 可以写注释

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

const fsModule = device.createShaderModule({

部分转自互联网,侵权删除联系

赞(0) 打赏
部分文章转自网络,侵权联系删除b2bchain区块链学习技术社区 » WebGPU 规范篇 07 着色器模块求职学习资料
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

b2b链

联系我们联系我们