WebGPU学习（9）---使用Pipeline Overridable Constants-Toy模板网

这篇具有很好参考价值的文章主要介绍了WebGPU学习（9）---使用Pipeline Overridable Constants。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

使用Pipeline Overridable Constants

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

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

程序

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

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

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 的 GPUProgrammableStage 的 constants 属性指定一个常量值。

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,
    }
      ...