WebGPU Triangle Strip：为每个三角形设置不同颜色

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

WebGPU Triangle Strip：为每个三角形设置不同颜色

2025-10-11

浏览次数：次

返回列表

webgpu triangle strip：为每个三角形设置不同颜色

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

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

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

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

var<private> 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, 3>( 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, 3&gt;( 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 的结构体，它包含两个成员：

pos: 顶点位置，使用 @builtin(position) 修饰符。
fi: 三角形索引，使用 @location(0) 和 @interpolate(flat) 修饰符。

在顶点着色器中，我们创建了一个 VSOut 类型的变量 vsOut，并根据顶点索引设置 vsOut.fi 的值。然后，我们将 vsOut 作为顶点着色器的输出返回。

在片元着色器中，我们将 VSOut 类型的变量 vsOut 作为输入参数。然后，我们可以通过 vsOut.fi 访问三角形索引，并根据其值设置不同的颜色。

九个不同动作和表情的柠檬矢量素材(EPS)

这张图片展示了一组活泼的柠檬卡通形象，每一个柠檬都表现出不同的情感和动作。从欢乐的微笑、自信的挥手，到忧郁的落泪、愤怒的表情，这些柠檬形象为我们带来了丰富多彩的情感表达。它们的身体都绘有简单的黑色手臂和腿，还穿着小白鞋，增加了趣味性。每个柠檬的形状和颜色保持了一致，但通过不同的面部表情和身体语言，为我们展现了它们独特的个性。这些柠檬角色可爱又充满活力，非常适合用作插图或设计元素。素材格式为 EPS

15 查看详情九个不同动作和表情的柠檬矢量素材(EPS)

理解插值修饰符

Inter-stage 变量通常会进行插值。这意味着，片元着色器接收到的值是三角形三个顶点对应值的插值结果。

为了避免插值，我们可以使用 @interpolate(flat) 修饰符。使用 @interpolate(flat) 修饰符后，片元着色器接收到的值将是三角形第一个顶点的值。这个顶点被称为 "provoking vertex"。

在 triangle-strip 模式下，第一个三角形的 provoking vertex 是顶点 0，第二个三角形的 provoking vertex 是顶点 1，依此类推。

完整代码示例

以下是完整的代码示例，展示了如何在 WebGPU 中使用 triangle-strip 拓扑结构绘制两个颜色不同的三角形：

<!DOCTYPE html>
<html>
<head>
  <style>
    body{ background-color: #000 }
    canvas{ display: block; width: 600px; height: 400px; outline: 1px solid #666 }
  </style>
</head>
<body>
  <canvas width=900 height=600></canvas>
  <script type="module">
    let C = document.querySelector('canvas').getContext(`webgpu`);

    const code = `
      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, 3>( 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
      }
    `;

    const format = `bgra8unorm`;
    const adapter = await n*igator.gpu.requestAdapter();
    const device = await adapter.requestDevice();
    const Q = device.queue;
    const A = {loadOp: `clear`, storeOp: `store`}; // Attachments
    const O = {colorAttachments: [ A ]};           // Render Pass Descriptor
    let E, R;
    const module = device.createShaderModule({ code });
    const P = device.createRenderPipeline({
      layout: `auto`,
      primitive: { topology: `triangle-strip` },
      vertex: { module, entryPoint: `vs`, },
      fragment: { module, entryPoint: `fs`, targets: [{ format }] }
    });

    C.configure({ device, format });

    function F(){
      A.view = C.getCurrentTexture().createView();

      E = device.createCommandEncoder();
      R = E.beginRenderPass(O);
      R.setPipeline(P);

      R.draw(4);
      R.end();
      Q.submit([E.finish()]);

      requestAnimationFrame(F)
    }

    F()

  </script>
</body>
</html>

这段代码首先定义了顶点和片元着色器，并在着色器中使用了 inter-stage 变量 fi 来区分不同的三角形。然后，它创建了渲染管线，并使用 triangle-strip 拓扑结构绘制了两个三角形。

总结

通过本文，你学习了如何在 WebGPU 中使用 inter-stage 变量和插值修饰符来为 triangle-strip 中的每个三角形指定不同的颜色。掌握这些技术可以让你在 WebGPU 中实现更复杂的渲染效果。

注意事项：

确保你的 WebGPU 环境配置正确。
仔细理解顶点着色器和片元着色器之间的关系，以及 inter-stage 变量的作用。
根据实际需求选择合适的插值修饰符。

希望本文对你有所帮助！

以上就是WebGPU Triangle Strip：为每个三角形设置不同颜色的详细内容，更多请关注其它相关文章！

# 展示了 # 如何对水稻进行营销推广 # 海外seo运营助理 # 网站建设的步骤过程视频 # 汽车网站建设特征 # 淘客推广网站哪个比较好 # 云南模板网站建设 # 网站制作推广工具 # 化工建设集团招投标网站 # 陕西qq营销号推广 # 青岛标题seo优化报价 # 服务端 # html # 全局变量 # 并在 # 第一个 # 修饰符 # 插值 # 器中 # 着色器 # 角形 # canva # 环境配置 # ai

相关栏目：【科技资讯46185 】【网络学院92790 】

上一篇：J*aScript中解析HTML参数字符串为JSON对象教程

下一篇：为自动完成搜索添加搜索按钮操作

首页

关于我们

产品展示

咨询研究

新闻中心

留言板

联系我们

新闻中心 NEWS CENTER

WebGPU Triangle Strip：为每个三角形设置不同颜色

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

使用 Inter-Stage 变量传递数据

理解插值修饰符

完整代码示例

总结