WebGPU Triangle Strip：为每个三角形设置不同颜色_技术教程

本文档旨在解决在 WebGPU 中使用 `triangle-strip` 拓扑结构绘制三角形时，如何为每个三角形指定不同颜色的问题。我们将深入探讨顶点着色器和片元着色器之间的数据传递，以及如何利用插值修饰符来实现所需的效果。通过本文，你将掌握在 `triangle-strip` 模式下动态控制三角形颜色的关键技术。

理解顶点着色器和片元着色器的独立性

在 WebGPU 中，顶点着色器和片元着色器是两个完全独立的程序。它们之间不共享任何全局变量。因此，尝试在顶点着色器中设置一个变量，然后在片元着色器中直接访问它是行不通的。

例如，以下代码无法实现预期的效果：

var fi: i32; // fragment_index ( current triangle )

@vertex
fn vs( @builtin(vertex_index) vi: u32 ) -> @builtin(position) vec4f {
  if(vi<3){ fi = 1;
    var T = array( vec2f(0,0), vec2f(.4,.7), vec2f(.8,0) );
    return vec4f(T[vi],0,1);
  };
  fi = 2;
  return vec4f(.6,-.5,0,1);
}

@fragment
fn fs() -> @location(0) vec4f {
  if(fi == 1){ return vec4f(.7,.2,.2,.5); }; // color for 1st triangle ?
  return vec4f(.3,.6,.4,.5);                 // color for 2nd triangle
}

这是因为顶点着色器中的 fi 变量和片元着色器中的 fi 变量是两个完全不同的变量，它们之间没有任何关联。

使用 Inter-Stage 变量传递数据

为了在顶点着色器和片元着色器之间传递数据，我们需要使用 inter-stage 变量。Inter-stage 变量通过结构体定义，并在顶点着色器的输出和片元着色器的输入之间建立连接。

以下代码展示了如何使用 inter-stage 变量传递三角形索引：

struct VSOut {
  @builtin(position) pos: vec4f,
  @location(0) @interpolate(flat) fi: i32,
};

@vertex
fn vs( @builtin(vertex_index) vi: u32 ) -> VSOut {
  var vsOut: VSOut;
  vsOut.fi = 1;
  if (vi > 0) {
    vsOut.fi = 2;
  }

  if(vi<3){
    var T = array( vec2f(0,0), vec2f(.4,.7), vec2f(.8,0) );
    vsOut.pos = vec4f(T[vi],0,1);
    return vsOut;
  };
  vsOut.pos = vec4f(.6,-.5,0,1);
  return vsOut;
}

@fragment
fn fs(vsOut: VSOut) -> @location(0) vec4f {
  if(vsOut.fi == 1){ return vec4f(.7,.2,.2,.5); }; // color for 1st triangle ?
  return vec4f(.3,.6,.4,.5);                 // color for 2nd triangle
}

在这个例子中，我们定义了一个名为 VSOut 的结构体，它包含两个成员：