【WebGPU】简介和开始

简介

WebGPU 是一种 API，用于在 Web 应用中访问 GPU 的功能。在 WebGPU 出现之前，有一个 WebGL，它提供了 WebGPU 的部分功能。它开创了一种新的富媒体 Web 内容类别，并且开发者也利用它构建了许多精彩的内容。不过，它基于 2007 年发布的 OpenGL ES 2.0 API，而该 API 基于更旧的 OpenGL API。在那段时间里，GPU 取得了显著进步，用来与 GPU 进行交互的原生 API 也在与 Direct3D 12、Metal 和 Vulkan 一起发展。

WebGPU 将这些现代 API 的进展带到了 Web 平台。它专注于以跨平台的方式启用 GPU 功能，同时提供在 Web 上感觉自然并且比它所基于的一些原生 API 更简洁的 API。

GPU 通常与快速渲染详细图形相关，WebGPU 也不例外。它具有支持当今桌面和移动 GPU 上许多最流行的渲染技术所需的功能，并为未来随着硬件功能的不断发展添加新功能提供了途径。

除了渲染之外，WebGPU 还可以释放 GPU 用于执行通用、高度并行工作负载的潜力。这些计算着色器可以独立使用（无需任何渲染组件），也可以作为渲染流水线紧密集成的一部分使用。

代码基础

基础组成部分可以包括以下内容：

导入库（Import Libraries）：根据需要导入所需的库或模块，例如图形库、计算库或WebGPU相关的库。

创建设备（Create Device）：通过调用适当的函数或方法创建WebGPU设备对象。设备对象表示计算机上的物理或虚拟GPU。

创建上下文（Create Context）：使用设备对象创建WebGPU上下文对象。上下文对象用于执行WebGPU操作，并与设备关联。

创建缓冲区（Create Buffers）：使用上下文对象创建缓冲区对象。缓冲区对象用于存储数据，例如顶点数据、纹理数据或计算所需的数据。

创建纹理（Create Textures）：使用上下文对象创建纹理对象。纹理对象用于表示图像数据，例如颜色、深度或阴影信息。

创建着色器（Create Shaders）：使用上下文对象创建着色器对象。着色器对象是执行计算和图形渲染的程序，可以是顶点着色器、片段着色器或计算着色器。

创建管道（Create Pipeline）：使用上下文对象创建管道对象。管道对象定义了图形渲染或计算操作的配置，包括着色器、渲染状态和其他信息。

创建绑定组（Create Bind Groups）：使用上下文对象创建绑定组对象。绑定组对象用于将资源绑定到着色器，包括缓冲区、纹理和采样器等资源。

创建命令缓冲区（Create Command Buffers）：使用上下文对象创建命令缓冲区对象。命令缓冲区对象用于存储要在GPU上执行的命令。

提交和执行命令（Submit and Execute Commands）：使用队列对象将命令缓冲区提交到GPU上的执行队列中，以便按顺序执行命令。

开始

使用 WebGPU 进行计算，则可以使用 WebGPU 而不在屏幕上显示任何内容。但是，要进行可视化的时候，则需要画布。

创建一个新的 HTML 文档，其中包含一个元素，以及用于查询画布元素的

html 复制代码

<html>
  <head>
    <meta charset="utf-8">
    <title>WebGPU Life</title>
  </head>
  <body>
    <canvas width="512" height="512"></canvas>
    <script type="module">
      const canvas = document.querySelector("canvas");

      // Your WebGPU code will begin here!
    </script>
  </body>
</html>

WebGPU 的 API 可能需要一段时间才能传播到整个 Web 系统。因此，首先检查浏览器是否可以使用 WebGPU。

检查是否存在用作 WebGPU 入口点的 navigator.gpu 对象，以下代码：

xml 复制代码

index.html

if (!navigator.gpu) {
  throw new Error("WebGPU not supported on this browser.");
}

理想情况下，如果 WebGPU 不可用，则您需要通过让页面回退到不使用 WebGPU 的模式来通知用户。（也许可以改用 WebGL？）不过，在此 Codelab 中，您只需抛出一个错误即可阻止代码进一步执行。

确定浏览器支持 WebGPU 后，为应用初始化 WebGPU 的第一步就是请求 GPUAdapter。您可以将适配器视为 WebGPU 代表设备中特定的 GPU 硬件的表示形式。