WebGPU Uniforms：着色器中的全局变量

2023-10-22 04:21:42

WebGPU 中的 Uniforms：让您的着色器发光

什么是 Uniforms？

想象一下你在一个乐队里，每位乐手都演奏着不同的乐器，但演奏着同一首曲子。在 WebGPU 中，Uniforms 就像乐队总谱，它包含了所有乐手需要遵循的共享指令。Uniforms 是存储在着色器程序中的变量，用于在不同的着色器阶段之间传递数据，就像乐谱指导乐手演奏一样。

Uniform 的类型

Uniforms 可以包含各种数据类型，就像乐谱可以使用不同的音符一样。它们包括布尔值（真或假）、数字（整数和浮点数）、向量（数字列表）和矩阵（数字表）。这些数据可以表示相机位置、光源属性、材质颜色或任何其他在着色过程中需要共享的信息。

Uniform 的作用

Uniforms 的作用就像乐队指挥，它们协调着所有乐手的演奏。它们允许您将数据从应用程序传递到着色器，而无需修改着色器代码。就像指挥可以调整乐曲的速度或音量一样，Uniforms 允许您动态地更新着色器的行为。这提高了可重用性和效率，因为您可以为不同的对象或场景重新使用着色器，只需更改 Uniforms 的值即可。

设置 Uniforms

设置 Uniforms 就像将乐谱分发给乐手。您可以使用称为 GPUBuffer 的特殊内存区域来存储 Uniform 数据。然后，您可以将该缓冲区绑定到着色器，就像将乐谱分发给乐手一样。

// 创建 Uniform 数据缓冲区
const uniformBuffer = device.createBuffer({
  size: uniformDataSize, // Uniform 数据大小
  usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,
});

// 将数据复制到缓冲区
device.queue.writeBuffer(uniformBuffer, uniformData);

// 创建 Uniform 绑定组
const bindGroupLayout = device.createBindGroupLayout({
  entries: [{
    binding: 0,
    visibility: GPUShaderStage.VERTEX | GPUShaderStage.FRAGMENT,
    buffer: {
      type: 'uniform'
    }
  }]
});

const bindGroup = device.createBindGroup({
  layout: bindGroupLayout,
  entries: [{
    binding: 0,
    resource: {
      buffer: uniformBuffer
    }
  }]
});

// 将 Uniform 绑定组绑定到着色器
const renderPipeline = device.createRenderPipeline({
  // ...
  vertex: {
    // ...
    buffers: [{
      arrayStride: uniformDataSize,
      stepMode: 'vertex',
      attributes: [{
        shaderLocation: 0,
        offset: 0,
        format: 'float4'
      }]
    }]
  },
  fragment: {
    // ...
    buffers: [{
      arrayStride: uniformDataSize,
      stepMode: 'vertex',
      attributes: [{
        shaderLocation: 0,
        offset: 0,
        format: 'float4'
      }]
    }]
  },
  // ...
});