WebGPU学习(9)---使用Pipeline Overridable Constants

使用Pipeline Overridable Constants

WebGPU 的着色器语言是 WGSL,但与 GLSL 和 HLSL 不同,不支持 #ifdef 等宏。为了实现各种着色器变体,迄今为止,宏一直是着色器编程中非常重要的功能。那么应该如何处理没有宏的 WGSL?

WebGPU 和 WGSL 提供了一个名为"Pipeline Overridable Constants"的函数,用于从 JavaScript 端覆盖着色器常量。这种方式可以接近宏的实现了。

程序

1. 在着色器中定义可重写常量

首先,在着色器中定义一个常量。稍后可以从 JavaScript 端覆盖该常量。 这次我们在片段着色器中定义它。

rust 复制代码
override is_red: bool;
override color_r: f32 = 1.0;
override color_g: f32 = 1.0;
override color_b: f32 = 1.0;

@fragment
fn main() -> @location(0) vec4<f32> {
    if (is_red) {
        return vec4<f32>(1.0, 0.0, 0.0, 1.0);
    } else {
        return vec4<f32>(color_r, color_g, color_b, 1.0);  
    }
}

通过在常量名称之前添加 override,该常量就成为可以从 JavaScript 端覆盖的常量。 是否指定默认值并不重要,但如果不指定,则必须始终从 JavaScript 端覆盖它。 如果不覆盖,将使用着色器端定义的默认值。

2.在JavaScript端覆盖常量

在 JavaScript 方面,为 Pipeline 的 GPUProgrammableStageconstants 属性指定一个常量值。

javascript 复制代码
const pipeline = g_device.createRenderPipeline({
  layout: 'auto',
  vertex: {
    module: g_device.createShaderModule({
      code: vertWGSL,
    }),
    entryPoint: 'main',
  },
  fragment: {
    module: g_device.createShaderModule({
      code: fragWGSL,
    }),
    entryPoint: 'main',
    constants: {
      'is_red': false,
      'color_r': 0.5,
      'color_g': 0.25,
      'color_b': 1.0,
    }
      ...

有关可以指定的常量的类型和功能的更多详细信息,请参阅WebGPU规范

结论

通过使用 Pipeline-Overridable-Constants,我们能够覆盖着色器端的常量值。查看示例

相关推荐
allenjiao4 天前
WebGPU vs WebGL:WebGPU什么时候能完全替代WebGL?Web 图形渲染的迭代与未来
前端·图形渲染·webgl·threejs·cesium·webgpu·babylonjs
SmalBox10 天前
【URP】Unity[RendererFeatures]渲染对象RenderObjects
unity3d·游戏开发·图形学
吃饺子不吃馅25 天前
[开源] 从零到一打造在线 PPT 编辑器:React + Zustand + Zundo
前端·svg·图形学
九章云极AladdinEdu1 个月前
WebGPU深度学习前端:基于浏览器的分布式模型推理
人工智能·webgpu·计算着色器·深度学习推理·模型分片·分布式浏览器计算·协同推理
魏无忌1 个月前
BIM+GIS尝试
图形渲染·webgpu·bim引擎·bim+gis
吃饺子不吃馅1 个月前
如何设计一个 Canvas 事件系统?
前端·canvas·图形学