手把手教你利用webgpu绘制圆形，打造绚丽的视觉效果

前端

2023-05-03 05:42:48

WebGPU：开启下一代图形的可能性

WebGPU 简介

WebGPU 是一种创新的图形 API，专为现代 Web 开发而打造。它基于 Vulkan 和 OpenGL 等强大的底层图形库，提供低级编程接口，同时兼顾高性能和低开销。与传统的 WebGL 相比，WebGPU 拥有诸多优势：

提升性能： WebGPU 可以直接访问图形硬件，显著提高图形渲染速度。
降低开销： WebGPU 采用精简的 API 设计，最大程度地减少不必要的开销，降低对系统资源的消耗。
功能丰富： WebGPU 提供全面的图形功能，包括纹理映射、光照、粒子系统等，帮助开发者实现复杂的图形效果。

构建 WebGPU 应用程序

1. 创建 WebGPU 设备

要使用 WebGPU，首先需要创建一个设备对象，代表图形硬件并提供访问接口：

const device = navigator.gpu.requestAdapter().then(adapter => adapter.requestDevice());

2. 加载着色器

着色器是图形硬件运行的程序，负责处理顶点和片元数据。WebGPU 使用两种着色器：

顶点着色器： 处理顶点数据（如位置、颜色）
片元着色器： 处理片元数据（如颜色、透明度）

示例加载代码：

const vertexShader = await device.createShaderModule({
  code: `
    #version 450
    in vec3 position;
    void main() {
      gl_Position = vec4(position, 1.0);
    }
  `,
});

const fragmentShader = await device.createShaderModule({
  code: `
    #version 450
    out vec4 fragColor;
    void main() {
      fragColor = vec4(1.0, 0.0, 0.0, 1.0);
    }
  `,
});

3. 配置顶点数据

顶点数据是构成图形的基本元素，包含位置、颜色等属性。这些数据通常存储在缓冲区中：

const vertices = new Float32Array([
  -0.5, -0.5, 0.0, // 左下角顶点
  0.5, -0.5, 0.0, // 右下角顶点
  0.0, 0.5, 0.0, // 顶点
]);

const vertexBuffer = await device.createBuffer({
  size: vertices.byteLength,
  usage: GPUBufferUsage.VERTEX,
  mappedAtCreation: true,
});

new Float32Array(vertexBuffer.getMappedRange()).set(vertices);
vertexBuffer.unmap();

4. 绘制图形

最后，我们使用 WebGPU 绘制图形：

const commandEncoder = device.createCommandEncoder();

const renderPassDescriptor = {
  colorAttachments: [
    {
      view: renderTargetView,
      loadOp: 'clear',
      storeOp: 'store',
      clearValue: { r: 0.0, g: 0.0, b: 0.0, a: 1.0 },
    },
  ],
};

const renderPass = commandEncoder.beginRenderPass(renderPassDescriptor);

renderPass.setPipeline(pipeline);
renderPass.setVertexBuffer(0, vertexBuffer);
renderPass.draw(3, 1, 0, 0);

renderPass.end();

device.queue.submit([commandEncoder.finish()]);

示例：绘制圆形

通过上述步骤，我们可以使用 WebGPU 绘制一个圆形：

// 创建圆形顶点数据
const vertices = new Float32Array(100 * 3);
for (let i = 0; i < 100; i++) {
  const angle = i * Math.PI * 2 / 100;
  vertices[i * 3] = Math.cos(angle) * 0.5;
  vertices[i * 3 + 1] = Math.sin(angle) * 0.5;
  vertices[i * 3 + 2] = 0.0;
}

// 创建圆形顶点缓冲区
const vertexBuffer = await device.createBuffer({
  size: vertices.byteLength,
  usage: GPUBufferUsage.VERTEX,
  mappedAtCreation: true,
});

// 将顶点数据复制到缓冲区
new Float32Array(vertexBuffer.getMappedRange()).set(vertices);
vertexBuffer.unmap();

// 创建渲染管道
const pipeline = await device.createRenderPipeline({
  vertex: {
    module: vertexShader,
    entryPoint: 'main',
  },
  fragment: {
    module: fragmentShader,
    entryPoint: 'main',
  },
  primitive: {
    topology: 'triangle-fan',
  },
});

// 绘制圆形
const commandEncoder = device.createCommandEncoder();

const renderPassDescriptor = {
  colorAttachments: [
    {
      view: renderTargetView,
      loadOp: 'clear',
      storeOp: 'store',
      clearValue: { r: 0.0, g: 0.0, b: 0.0, a: 1.0 },
    },
  ],
};

const renderPass = commandEncoder.beginRenderPass(renderPassDescriptor);

renderPass.setPipeline(pipeline);
renderPass.setVertexBuffer(0, vertexBuffer);
renderPass.draw(100, 1, 0, 0);

renderPass.end();

device.queue.submit([commandEncoder.finish()]);