WebGPU绘制第一个三角形，揭开神秘的面纱

前端

2023-10-08 18:44:22

WebGPU：下一代Web图形编程的革命

引言

在当今数字世界中，图像扮演着至关重要的角色。从网站上的简单图标到交互式应用程序中的精细动画，图像为用户提供了一种更加直观和身临其境的体验。随着Web技术的发展，对图形性能和质量的要求也在不断提高。

WebGPU的出现

为了满足不断增长的图形需求，WebGPU应运而生。作为下一代Web平台的图形API，WebGPU为Web开发人员提供了前所未有的图形编程功能。它建立在现代图形硬件的基础上，提供更低级别的访问权限和更强大的图形渲染能力。

WebGPU与WebGL的区别

与传统的WebGL相比，WebGPU具有以下优势：

更低级别的访问权限： WebGPU允许开发人员直接访问图形硬件，从而获得对图形渲染过程的更精细控制。
更强大的图形渲染能力： WebGPU支持更多高级图形特性，如计算着色器、纹理数组和深度缓冲区。
更高的性能： WebGPU充分利用现代图形硬件的性能，提供更快的渲染速度和更流畅的动画效果。

体验WebGPU

虽然WebGPU目前仍处于开发阶段，但您可以在最新的Chrome canary版本中体验它。以下是绘制您第一个WebGPU三角形的步骤：

1. 创建一个HTML文件

<!DOCTYPE html>
<html>
<head>
  <canvas id="canvas"></canvas>
</head>
<body>
  <script src="script.js"></script>
</body>
</html>

2. 创建一个JavaScript文件

// 获取canvas元素
const canvas = document.getElementById('canvas');

// 获取WebGL2上下文
const gpu = canvas.getContext('webgpu');

// 创建设备
const device = gpu.device;

// 创建着色器模块
const vertexShaderModule = device.createShaderModule({
  code: `
    [[stage(vertex)]]
    fn main([[location(0)]] position: vec3<f32>) -> [[builtin(position)]] vec4<f32> {
      return vec4<f32>(position, 1.0);
    }
  `,
});

const fragmentShaderModule = device.createShaderModule({
  code: `
    [[stage(fragment)]]
    fn main() -> [[location(0)]] vec4<f32> {
      return vec4<f32>(1.0, 0.0, 0.0, 1.0);
    }
  `,
});

// 创建渲染管线
const pipeline = device.createRenderPipeline({
  vertex: {
    module: vertexShaderModule,
    entryPoint: 'main',
  },
  fragment: {
    module: fragmentShaderModule,
    entryPoint: 'main',
  },
  primitive: {
    topology: 'triangle-list',
  },
});

// 创建顶点缓冲区
const vertexBuffer = device.createBuffer({
  size: 3 * 4,
  usage: GPUBufferUsage.VERTEX,
  mappedAtCreation: true,
});

// 将顶点数据写入缓冲区
const vertices = new Float32Array([
  -0.5, -0.5, 0.0,
  0.5, -0.5, 0.0,
  0.0, 0.5, 0.0,
]);

vertexBuffer.setSubData(0, vertices);

// 创建命令编码器
const commandEncoder = device.createCommandEncoder();

// 创建渲染目标
const renderTarget = device.createTexture({
  format: 'bgra8unorm',
  size: [canvas.width, canvas.height],
  usage: GPUTextureUsage.RENDER_ATTACHMENT,
});

const renderPassDescriptor = {
  colorAttachments: [
    {
      view: renderTarget.createView(),
      loadOp: 'clear',
      storeOp: 'store',
    },
  ],
};

// 创建命令缓冲区
const commandBuffer = commandEncoder.finish();

// 提交命令缓冲区
gpu.queue.submit([commandBuffer]);

// 将渲染目标的内容复制到canvas元素
gpu.readTextureToCanvas(renderTarget, canvas);