【WebGPU Unleashed】1.3 硬编码顶点颜色

一部2024新的WebGPU教程，作者Shi Yan。内容很好，翻译过来与大家共享，内容上会有改动，加上自己的理解。更多精彩内容尽在 dt.sim3d.cn ，关注公众号【sky的数孪技术】，技术交流、源码下载请添加微信号：digital_twin123

在本节中，我们将对着色器代码进行细微更改，同时继续使用相同的渲染管线。在我们之前的教程中，我们在片段着色器中对输出颜色进行了硬编码。这次，我们将把这种硬编码转移到顶点阶段，并将颜色从顶点阶段传递到片段阶段。这一变化将展现值如何在管道的不同阶段之间传递，这是 GPU 编程中的一个关键概念。本节的内容不多，请访问在线示例。

struct VertexOutput {
    
    
    @builtin(position) clip_position: vec4<f32>,
    @location(0) color: vec3<f32>,
};

@vertex
fn vs_main(
        @location(0) inPos: vec3<f32>,
    ) -> VertexOutput {
    
    
    var out: VertexOutput;
    out.clip_position = vec4<f32>(inPos, 1.0);
    out.color = vec3<f32>(0.0, 0.0, 1.0);
    return out;
}

让我们看一下发生了哪些变化。在顶点输出结构中，我们引入了一个名为color的新字段。由于没有内置的顶点颜色，我们将使用 @location(0) 来存储它。在顶点阶段结束时，我们将硬编码颜色分配给 out.color。

@fragment
fn fs_main(in: VertexOutput) -> @location(0) vec4<f32> {
    
    
    return vec4<f32>(in.color, 1.0);
}

在片段阶段，我们现在可以从输入访问此颜色并将其直接作为输出传递。

现在，让我们考虑 GPU 渲染的一个重要方面。在顶点阶段，我们处理单个顶点，而在片段阶段，我们处理单个片段。片段在概念上类似于像素，但可以包含丰富的元数据，例如深度和其他值。

在顶点和片段阶段之间，有一个称为光栅化的自动过程，由 GPU 处理。此过程将几何数据转换为片段。

这里有一个值得思考的有趣问题：如果我们为每个顶点分配不同的颜色，GPU 将如何为片段分配颜色？特别是对于那些位于三角形中间而不是直接位于任何顶点上的片段？

你可以修改示例代码并亲自尝试这个概念，尝试为每个顶点分配不同的颜色，并观察 GPU 如何在三角形表面上插入这些颜色。此练习将加深你对数据如何流经 GPU 管道以及插值过程如何工作的理解。

【WebGPU Unleashed】1.3 硬编码顶点颜色

猜你喜欢