JS `WebGPU` `Render Pipeline` 深度：顶点着色器、片段着色器与渲染状态

各位观众，大家好！今天咱们来聊聊 WebGPU 渲染管线里那些磨人的小妖精：顶点着色器、片段着色器，还有那些管东管西的渲染状态。准备好了吗？咱们这就开始！

一、渲染管线：流水线上的艺术

WebGPU 的渲染管线，你可以把它想象成一条生产线，专门用来制造精美的画面。这条生产线上的每一个环节都至关重要，缺了谁都不行。

graph LR
    A[顶点数据] --> B(顶点着色器);
    B --> C{图元组装};
    C --> D(光栅化);
    D --> E(片段着色器);
    E --> F(混合/测试);
    F --> G[帧缓冲区];

简单解释一下：

顶点数据 (Vertex Data): 这是原材料，包含了构成物体的各个顶点的坐标、颜色、法线等等信息。
顶点着色器 (Vertex Shader): 这个环节负责处理顶点数据。比如，将顶点坐标从模型空间转换到裁剪空间，或者根据光照计算顶点的颜色。简单来说，它就是个“塑形师”，把原始的顶点数据按照我们的意愿进行改造。
图元组装 (Primitive Assembly): 把顶点连接成三角形、线段或点，构成基本的几何形状。
光栅化 (Rasterization): 将几何形状转换成屏幕上的像素片段 (fragments)。可以理解为“像素化”的过程，把数学上的几何图形变成屏幕上看得见的像素点。
片段着色器 (Fragment Shader): 这个环节决定了每个像素最终的颜色。它会根据光照、纹理等信息，计算出每个像素的颜色值。你可以把它想象成一个“调色师”，负责给每个像素上色。
混合/测试 (Blending/Testing): 将片段着色器输出的颜色与帧缓冲区中已有的颜色进行混合，并进行深度测试、模板测试等操作，决定最终哪个像素可以显示在屏幕上。
帧缓冲区 (Framebuffer): 最终的画面就存储在这里，然后显示到屏幕上。

今天我们要重点讨论的就是顶点着色器、片段着色器，以及影响整个管线运作的渲染状态。

二、顶点着色器：顶点的变形金刚

顶点着色器是整个渲染管线的第一道工序，它的主要任务是对输入的顶点数据进行处理。一般来说，顶点着色器会进行以下操作：

模型-视图-投影变换 (Model-View-Projection Transformation): 这是最常见的操作，将顶点坐标从模型空间转换到裁剪空间。这个变换包括模型变换 (Model Matrix)、视图变换 (View Matrix) 和投影变换 (Projection Matrix)。
法线变换 (Normal Transformation): 如果需要进行光照计算，还需要对法线进行变换，确保法线方向的正确性。
纹理坐标变换 (Texture Coordinate Transformation): 如果需要使用纹理，还需要对纹理坐标进行变换，确保纹理的正确映射。
其他自定义操作: 可以根据需要进行一些自定义的操作，比如计算顶点的颜色、修改顶点的位置等等。

让我们来看一个简单的顶点着色器例子（WGSL 代码）：

struct VertexInput {
  @location(0) position: vec3f,
  @location(1) normal: vec3f,
  @location(2) uv: vec2f,
}

struct VertexOutput {
  @builtin(position) clip_position: vec4f,
  @location(0) world_normal: vec3f,
  @location(1) uv: vec2f,
}

@group(0) @binding(0) var<uniform> modelViewProjectionMatrix : mat4x4f;
@group(0) @binding(1) var<uniform> modelMatrix : mat4x4f;

@vertex
fn main(input : VertexInput) -> VertexOutput {
  var output : VertexOutput;
  output.clip_position = modelViewProjectionMatrix * vec4f(input.position, 1.0);

  // Calculate world normal
  let world_position = modelMatrix * vec4f(input.position, 1.0);
  let world_normal = normalize((modelMatrix * vec4f(input.normal, 0.0)).xyz); // Notice the 0.0 for w component for normals
  output.world_normal = world_normal;

  output.uv = input.uv;
  return output;
}

这段代码做了以下事情：

定义了输入结构体 VertexInput: 这个结构体描述了顶点数据的格式，包括位置 position、法线 normal 和纹理坐标 uv。 @location 属性指定了这些数据在顶点缓冲区中的位置。
定义了输出结构体 VertexOutput: 这个结构体描述了顶点着色器的输出数据，包括裁剪空间坐标 clip_position、世界空间法线 world_normal 和纹理坐标 uv。 @builtin(position) 属性表示 clip_position 是内置的顶点位置输出。
定义了 uniform 变量 modelViewProjectionMatrix 和 modelMatrix: 这些变量存储了模型-视图-投影矩阵和模型矩阵，用于进行坐标变换。 @group 和 @binding 属性指定了这些变量在 uniform 缓冲区中的位置。
编写了主函数 main: 这个函数是顶点着色器的入口点。它接收一个 VertexInput 类型的参数，并返回一个 VertexOutput 类型的值。在函数内部，它首先将顶点坐标从模型空间转换到裁剪空间，然后计算世界空间法线，并将纹理坐标传递给片段着色器。

三、片段着色器：像素的魔法师

片段着色器是渲染管线的最后一个阶段，它的主要任务是计算每个像素的颜色。片段着色器会接收来自顶点着色器的插值数据，并根据光照、纹理等信息，计算出每个像素的颜色值。

一般来说，片段着色器会进行以下操作：

光照计算 (Lighting Calculation): 根据光照模型（比如 Phong 光照模型、Blinn-Phong 光照模型），计算像素的颜色。
纹理采样 (Texture Sampling): 从纹理中读取颜色值，并将其与光照计算的结果进行混合。
其他自定义操作: 可以根据需要进行一些自定义的操作，比如进行雾效处理、透明度处理等等。

让我们来看一个简单的片段着色器例子（WGSL 代码）：

struct VertexOutput {
  @builtin(position) clip_position: vec4f,
  @location(0) world_normal: vec3f,
  @location(1) uv: vec2f,
}

@group(0) @binding(2) var baseTexture : texture_2d<f32>;
@group(0) @binding(3) var baseSampler : sampler;
@group(0) @binding(4) var<uniform> ambientColor: vec3f;
@group(0) @binding(5) var<uniform> lightDirection: vec3f;
@group(0) @binding(6) var<uniform> diffuseColor: vec3f;

@fragment
fn main(input : VertexOutput) -> @location(0) vec4f {
    let texColor = textureSample(baseTexture, baseSampler, input.uv);
    let normal = normalize(input.world_normal);
    let diffuseIntensity = max(dot(normal, lightDirection), 0.0);

    let finalColor = ambientColor + diffuseColor * diffuseIntensity;

    return vec4f(texColor.rgb * finalColor, texColor.a);
}

这段代码做了以下事情：

接收来自顶点着色器的插值数据 VertexOutput: 包括世界空间法线 world_normal 和纹理坐标 uv。
定义了纹理和采样器 baseTexture 和 baseSampler: 用于从纹理中读取颜色值。 @group 和 @binding 属性指定了这些变量在绑定组中的位置。
定义了 uniform 变量 ambientColor, lightDirection, diffuseColor: 存储了环境光颜色，光照方向，和漫反射光颜色。
编写了主函数 main: 这个函数是片段着色器的入口点。它接收一个 VertexOutput 类型的参数，并返回一个 vec4f 类型的值，表示像素的颜色。在函数内部，它首先从纹理中读取颜色值，然后计算光照强度，并将两者进行混合，得到最终的像素颜色。

四、渲染状态：管线的指挥家

渲染状态 (Render State) 是一组参数，用于配置渲染管线的行为。它可以控制光栅化、深度测试、混合、模板测试等操作。

渲染状态非常重要，它可以影响最终画面的效果。比如，可以通过修改深度测试的状态来控制物体的遮挡关系，可以通过修改混合状态来实现透明效果。

以下是一些常见的渲染状态：

状态	描述
`primitive`	定义了图元的类型 (比如三角形、线段、点) 和顶点顺序 (比如顺时针、逆时针)。
`depthStencil`	配置深度测试和模板测试。
`multisample`	配置多重采样抗锯齿 (MSAA)。
`blend`	配置颜色混合。
`colorTarget`	配置颜色目标的格式和写入掩码。

让我们来看一个配置渲染状态的例子（JS 代码）：

const renderPipelineDescriptor = {
  layout: pipelineLayout,
  vertex: {
    module: shaderModule,
    entryPoint: 'main',
    buffers: [vertexBufferLayout],
  },
  fragment: {
    module: shaderModule,
    entryPoint: 'fragmentMain',
    targets: [
      {
        format: presentationFormat,
        blend: {
          color: {
            srcFactor: 'src-alpha',
            dstFactor: 'one-minus-src-alpha',
            operation: 'add',
          },
          alpha: {
            srcFactor: 'one',
            dstFactor: 'one-minus-src-alpha',
            operation: 'add',
          },
        },
        writeMask: GPUColorWrite.ALL,
      },
    ],
  },
  primitive: {
    topology: 'triangle-list',
    cullMode: 'back',
  },
  depthStencil: {
    depthWriteEnabled: true,
    depthCompare: 'less',
    format: 'depth24plus-stencil8',
  },
};

const renderPipeline = device.createRenderPipeline(renderPipelineDescriptor);

这段代码配置了以下渲染状态：

primitive.topology: 指定图元类型为三角形列表 (triangle-list)。
primitive.cullMode: 指定剔除背面 (back)。
depthStencil.depthWriteEnabled: 启用深度写入。
depthStencil.depthCompare: 指定深度比较函数为小于 (less)。
fragment.targets[0].blend: 配置颜色混合，使用 Alpha 混合。
fragment.targets[0].writeMask: 指定颜色写入掩码为所有通道 (ALL)。

五、顶点着色器和片段着色器之间的通信

顶点着色器和片段着色器之间需要进行数据传递。顶点着色器会将一些数据传递给片段着色器，比如顶点颜色、纹理坐标、法线等等。

这些数据在传递过程中会进行插值，这意味着片段着色器接收到的数据是顶点数据的平滑过渡。

在 WGSL 中，顶点着色器和片段着色器之间的数据传递是通过结构体来实现的，就像我们在前面的例子中看到的 VertexOutput 结构体。

六、实践案例：旋转的立方体

为了更好地理解顶点着色器、片段着色器和渲染状态，让我们来看一个简单的例子：旋转的立方体。

首先，我们需要定义立方体的顶点数据：

const vertices = new Float32Array([
  // Front face
  -1.0, -1.0,  1.0,   0.0, 0.0,
   1.0, -1.0,  1.0,   1.0, 0.0,
   1.0,  1.0,  1.0,   1.0, 1.0,
  -1.0,  1.0,  1.0,   0.0, 1.0,

  // Back face
  -1.0, -1.0, -1.0,   0.0, 0.0,
   1.0, -1.0, -1.0,   1.0, 0.0,
   1.0,  1.0, -1.0,   1.0, 1.0,
  -1.0,  1.0, -1.0,   0.0, 1.0,

  // Top face
  -1.0,  1.0, -1.0,   0.0, 0.0,
   1.0,  1.0, -1.0,   1.0, 0.0,
   1.0,  1.0,  1.0,   1.0, 1.0,
  -1.0,  1.0,  1.0,   0.0, 1.0,

  // Bottom face
  -1.0, -1.0, -1.0,   0.0, 0.0,
   1.0, -1.0, -1.0,   1.0, 0.0,
   1.0, -1.0,  1.0,   1.0, 1.0,
  -1.0, -1.0,  1.0,   0.0, 1.0,

  // Right face
   1.0, -1.0, -1.0,   0.0, 0.0,
   1.0, -1.0,  1.0,   1.0, 0.0,
   1.0,  1.0,  1.0,   1.0, 1.0,
   1.0,  1.0, -1.0,   0.0, 1.0,

  // Left face
  -1.0, -1.0, -1.0,   0.0, 0.0,
  -1.0, -1.0,  1.0,   1.0, 0.0,
  -1.0,  1.0,  1.0,   1.0, 1.0,
  -1.0,  1.0, -1.0,   0.0, 1.0,
]);

const indices = new Uint16Array([
   0,  1,  2,   0,  2,  3,    // front
   4,  5,  6,   4,  6,  7,    // back
   8,  9, 10,   8, 10, 11,    // top
  12, 13, 14,  12, 14, 15,    // bottom
  16, 17, 18,  16, 18, 19,    // right
  20, 21, 22,  20, 22, 23     // left
]);

然后，我们需要编写顶点着色器和片段着色器：

顶点着色器 (vertex.wgsl):

struct VertexInput {
  @location(0) position: vec3f,
  @location(1) uv: vec2f,
}

struct VertexOutput {
  @builtin(position) clip_position: vec4f,
  @location(0) uv: vec2f,
}

@group(0) @binding(0) var<uniform> modelViewProjectionMatrix : mat4x4f;

@vertex
fn main(input : VertexInput) -> VertexOutput {
  var output : VertexOutput;
  output.clip_position = modelViewProjectionMatrix * vec4f(input.position, 1.0);
  output.uv = input.uv;
  return output;
}

片段着色器 (fragment.wgsl):

struct VertexOutput {
  @builtin(position) clip_position: vec4f,
  @location(0) uv: vec2f,
}

@group(0) @binding(1) var baseTexture : texture_2d<f32>;
@group(0) @binding(2) var baseSampler : sampler;

@fragment
fn main(input : VertexOutput) -> @location(0) vec4f {
    let texColor = textureSample(baseTexture, baseSampler, input.uv);
    return texColor;
}

最后，我们需要配置渲染状态，并绘制立方体：

//  ... (创建设备、上下文、缓冲区等) ...

// 创建渲染管线
const renderPipeline = device.createRenderPipeline({
  layout: 'auto', // 自动推断 layout
  vertex: {
    module: shaderModule, // compiled shader module
    entryPoint: 'main',
    buffers: [
      {
        arrayStride: 5 * 4, // 3 position + 2 uv, each float is 4 bytes
        attributes: [
          {
            shaderLocation: 0, // @location(0)
            offset: 0,
            format: 'float32x3'
          },
          {
            shaderLocation: 1, // @location(1)
            offset: 3 * 4,
            format: 'float32x2'
          }
        ]
      }
    ]
  },
  fragment: {
    module: shaderModule,
    entryPoint: 'fragmentMain',
    targets: [
      {
        format: presentationFormat,
      },
    ],
  },
  primitive: {
    topology: 'triangle-list',
    cullMode: 'back',
  },
  depthStencil: {
    depthWriteEnabled: true,
    depthCompare: 'less',
    format: 'depth24plus-stencil8',
  },
});

// ... (创建纹理和采样器) ...

function render() {
  const commandEncoder = device.createCommandEncoder();
  const textureView = context.getCurrentTexture().createView();

  const renderPassDescriptor = {
    colorAttachments: [
      {
        view: textureView,
        clearValue: { r: 0.0, g: 0.0, b: 0.0, a: 1.0 },
        loadOp: 'clear',
        storeOp: 'store',
      },
    ],
    depthStencilAttachment: {
      view: depthTextureView,
      depthClearValue: 1.0,
      depthLoadOp: 'clear',
      depthStoreOp: 'store',
      stencilClearValue: 0,
      stencilLoadOp: 'clear',
      stencilStoreOp: 'store',
    },
  };

  const passEncoder = commandEncoder.beginRenderPass(renderPassDescriptor);
  passEncoder.setPipeline(renderPipeline);

  // 计算 MVP 矩阵
  const modelMatrix = mat4.create();
  mat4.rotateY(modelMatrix, modelMatrix, performance.now() / 1000); // 旋转
  const viewMatrix = mat4.create();
  mat4.translate(viewMatrix, viewMatrix, [0, 0, -5]); // 移动相机
  const projectionMatrix = mat4.perspective(mat4.create(), Math.PI / 4, canvas.width / canvas.height, 0.1, 100);

  const modelViewProjectionMatrix = mat4.create();
  mat4.multiply(modelViewProjectionMatrix, projectionMatrix, viewMatrix);
  mat4.multiply(modelViewProjectionMatrix, modelViewProjectionMatrix, modelMatrix);

  device.queue.writeBuffer(uniformBuffer, 0, modelViewProjectionMatrix as Float32Array);

  passEncoder.setVertexBuffer(0, vertexBuffer);
  passEncoder.setIndexBuffer(indexBuffer, 'uint16');
  passEncoder.setBindGroup(0, bindGroup);
  passEncoder.drawIndexed(indices.length);
  passEncoder.end();

  device.queue.submit([commandEncoder.finish()]);
  requestAnimationFrame(render);
}

render();

这段代码首先创建了渲染管线，并配置了渲染状态。然后，在 render 函数中，它计算了 MVP 矩阵，并将 MVP 矩阵传递给顶点着色器。最后，它设置了顶点缓冲区、索引缓冲区和绑定组，并绘制了立方体。

通过这个例子，你应该对顶点着色器、片段着色器和渲染状态有了更深入的理解。

七、总结

顶点着色器和片段着色器是 WebGPU 渲染管线的核心组件。顶点着色器负责处理顶点数据，片段着色器负责计算像素颜色。渲染状态用于配置渲染管线的行为。

理解这三个概念对于编写高性能的 WebGPU 应用至关重要。希望今天的讲座能帮助你更好地理解 WebGPU 渲染管线。

好了，今天的讲座就到这里。感谢大家的观看！下次再见！

发表回复 取消回复

发表回复取消回复