WebGPU 入门：绘制一个三角形

引言

WebGPU作为新一代的浏览器图形API，以其高性能、低开销和跨平台特性，正在逐步取代WebGL成为现代Web图形开发的首选方案。相较于WebGL，WebGPU提供了更接近底层硬件的编程接口，支持计算着色器等高级特性，同时通过显式API设计避免了WebGL的隐式状态机带来的性能瓶颈。本文将以绘制一个彩色三角形为例，系统讲解WebGPU的基础开发流程，帮助开发者快速掌握这一前沿技术。

一、环境准备与基础概念

1.1 浏览器兼容性检查

在开始开发前，需确认浏览器对WebGPU的支持情况。截至2023年，Chrome 113+、Edge 113+、Firefox 113+（需在about:config中启用gfx.webgpu.enabled）已支持WebGPU。可通过以下代码检测支持情况：

if (!navigator.gpu) {
  alert('当前浏览器不支持WebGPU');
} else {
  console.log('WebGPU可用，适配器信息:', navigator.gpu.getPreferredCanvasFormat());
}

1.2 核心概念解析

WebGPU开发涉及三个核心对象：

Adapter：代表物理GPU设备或软件模拟器
Device：逻辑GPU设备，用于创建资源和管理命令
SwapChain：管理帧缓冲区的交换，实现双缓冲机制

二、初始化WebGPU上下文

2.1 创建GPU设备

async function initWebGPU() {
  // 请求适配器（优先使用高性能GPU）
  const adapter = await navigator.gpu.requestAdapter({
    powerPreference: 'high-performance'
  });
  if (!adapter) throw new Error('未找到可用GPU适配器');
  // 创建设备（指定必要的功能集）
  const device = await adapter.requestDevice({
    requiredFeatures: [], // 基础功能无需特别指定
    requiredLimits: {}   // 默认限制足够绘制三角形
  });
  return { device, adapter };
}

2.2 配置Canvas上下文

<canvas id="gpuCanvas" width="800" height="600"></canvas>

const canvas = document.getElementById('gpuCanvas');
const context = canvas.getContext('webgpu');
if (!context) throw new Error('无法创建WebGPU上下文');
// 设置canvas格式（与交换链格式匹配）
const presentationFormat = navigator.gpu.getPreferredCanvasFormat();
context.configure({
  device: device, // 上一步创建设备
  format: presentationFormat,
  alphaMode: 'opaque' // 提高性能
});

三、着色器编程基础

3.1 WGSL着色器语言

WebGPU使用WebGPU Shading Language (WGSL)编写着色器，其语法类似Rust/C++。以下是顶点着色器示例：

// vertex.wgsl
struct VertexOutput {
  @builtin(position) position: vec4f,
  @location(0) color: vec4f,
};
@vertex
fn main(@builtin(vertex_index) VertexIndex: u32) -> VertexOutput {
  var pos = array<vec2f, 3>(
    vec2f(0.0, 0.5),  // 顶点1
    vec2f(-0.5, -0.5), // 顶点2
    vec2f(0.5, -0.5)   // 顶点3
  );
  var colors = array<vec4f, 3>(
    vec4f(1.0, 0.0, 0.0, 1.0), // 红色
    vec4f(0.0, 1.0, 0.0, 1.0), // 绿色
    vec4f(0.0, 0.0, 1.0, 1.0)  // 蓝色
  );
  var out: VertexOutput;
  out.position = vec4f(pos[VertexIndex], 0.0, 1.0);
  out.color = colors[VertexIndex];
  return out;
}

片元着色器示例：

// fragment.wgsl
@fragment
fn main(@location(0) color: vec4f) -> @location(0) vec4f {
  return color;
}

3.2 着色器模块编译

async function compileShaders(device) {
  const vertexSource = `...`; // 上述顶点着色器代码
  const fragmentSource = `...`; // 上述片元着色器代码
  const vertexModule = device.createShaderModule({
    code: vertexSource,
    label: '三角形顶点着色器'
  });
  const fragmentModule = device.createShaderModule({
    code: fragmentSource,
    label: '三角形片元着色器'
  });
  return { vertexModule, fragmentModule };
}

四、渲染管线配置

4.1 创建渲染管线

function createPipeline(device, vertexModule, fragmentModule) {
  const pipeline = device.createRenderPipeline({
    label: '基础三角形管线',
    layout: 'auto', // 自动推导管线布局
    vertex: {
      module: vertexModule,
      entryPoint: 'main',
      buffers: [] // 无顶点缓冲区，使用索引直接访问
    },
    fragment: {
      module: fragmentModule,
      entryPoint: 'main',
      targets: [{
        format: device.getPreferredCanvasFormat(),
        blend: { // 启用混合实现透明效果（可选）
          color: {
            srcFactor: 'src-alpha',
            dstFactor: 'one-minus-src-alpha',
            operation: 'add'
          },
          alpha: {
            srcFactor: 'one',
            dstFactor: 'zero',
            operation: 'add'
          }
        }
      }]
    },
    primitive: {
      topology: 'triangle-list', // 三角形列表
      cullMode: 'none' // 不剔除背面
    }
  });
  return pipeline;
}

4.2 渲染循环实现

async function renderLoop(device, context, pipeline) {
  const encoder = device.createCommandEncoder({
    label: '主渲染编码器'
  });
  const textureView = context.getCurrentTexture().createView();
  const renderPass = encoder.beginRenderPass({
    colorAttachments: [{
      view: textureView,
      loadOp: 'clear',
      clearValue: { r: 0.1, g: 0.1, b: 0.2, a: 1.0 },
      storeOp: 'store'
    }]
  });
  renderPass.setPipeline(pipeline);
  renderPass.draw(3, 1, 0, 0); // 绘制3个顶点，1个实例
  renderPass.end();
  device.queue.submit([encoder.finish()]);
  requestAnimationFrame(() => renderLoop(device, context, pipeline));
}

五、完整实现示例

// 主入口函数
async function main() {
  try {
    // 1. 初始化设备
    const { device } = await initWebGPU();
    // 2. 配置Canvas
    const canvas = document.getElementById('gpuCanvas');
    const context = canvas.getContext('webgpu');
    const presentationFormat = navigator.gpu.getPreferredCanvasFormat();
    context.configure({
      device,
      format: presentationFormat
    });
    // 3. 编译着色器
    const { vertexModule, fragmentModule } = await compileShaders(device);
    // 4. 创建管线
    const pipeline = createPipeline(device, vertexModule, fragmentModule);
    // 5. 启动渲染循环
    renderLoop(device, context, pipeline);
  } catch (error) {
    console.error('WebGPU初始化失败:', error);
    document.body.innerHTML = `
      <h1>错误</h1>
      <p>${error.message}</p>
      <p>请确保使用支持WebGPU的浏览器</p>
    `;
  }
}
main();

六、调试与优化技巧

6.1 常见问题排查

设备创建失败：检查浏览器是否支持，或尝试降低powerPreference
着色器编译错误：使用device.pushErrorScope('validation')捕获验证错误
空白画布：确认clearValue与背景色对比明显，检查storeOp是否为’store’

6.2 性能优化建议

复用着色器模块：避免在每帧重新创建
批量绘制调用：合并多个draw调用减少命令缓冲区提交
使用工作组：对于复杂场景考虑计算着色器预处理

七、扩展方向

完成基础三角形绘制后，可尝试以下进阶内容：

添加顶点缓冲区实现动态顶点数据
实现Uniform缓冲区传递变换矩阵
添加纹理映射和采样器
探索实例化绘制提高性能

结语

通过本文的完整流程，开发者已掌握WebGPU从环境初始化到基础图形绘制的完整链路。WebGPU的显式API设计虽然增加了初始学习曲线，但为后续开发复杂3D应用奠定了坚实基础。建议从简单示例开始，逐步探索计算着色器、光线追踪等高级特性。

WebGPU 实战：从零开始绘制三角形全流程解析