首先看下WebGPU的目标：

目标：

• 同时支持实时屏幕渲染和离屏渲染。

• 使通用计算能够在 GPU 上高效执行。

• 支持针对各种原生 GPU API 的实现：Microsoft 的 D3D12、Apple 的 Metal 和 Khronos 的 Vulkan。

• 提供一种人类可创作的语言来指定在 GPU 上运行的计算。

• 可在浏览器的多进程架构中实现，维护Web的安全性。

• 尽可能让应用程序在不同的用户系统和浏览器之间可移植地工作。

• 以有用但范围仔细的方式与 Web 平台的其余部分交互（基本上以一种或另一种方式共享图像）。

• 提供在 Web 上公开现代 GPU 功能的基础。 WebGPU 的结构类似于所有当前的原生 GPU API，即使它不提供它们的所有功能。 有计划稍后扩展它以具有更现代的功能。

非目标:

• 公开对根本不可编程或灵活性较差的硬件的支持，例如 DSP 或专门的机器学习硬件。

• 公开支持不能进行通用计算的硬件（如旧手机 GPU 甚至旧台式机 GPU）。

• 彻底公开本机 GPU API 上可用的所有功能（某些功能仅在单一供应商的 GPU 上可用，或者太小众而无法添加到 WebGPU）。

• 允许广泛混合和匹配 WebGL 和 WebGPU 代码。

• 与 CSS Houdini 等页面渲染流程紧密集成。

 计算机基础概念

字节说明

32位机：一个字长有4个字节；

缓冲区属性：

WebGPU-API理解

GPUBufferUsage（缓冲区使用）：


GPUBufferUsage.VERTEX 指的是你定义的缓冲区可以成为绘制操作中的顶点缓冲区。

GPUBufferUsage.COPY_DST指的是当你复制缓冲区的时候， 你定义的缓冲区可以用于目标缓冲区（destination buffer）， 也就是允许将数据复制到你定义的缓冲区

适配器和设备

• WebGPU“适配器”（GPUAdapter）是一个对象，用于标识系统上的特定 WebGPU 实现（例如，集成或离散 GPU 上的硬件加速实现，或软件实现）。 同一页面上的两个不同的“GPUAdapter”对象可以指代同一个底层实现，或指两个不同的底层实现（例如集成和离散 GPU）。页面可见的适配器集由用户代理决定。

•  （Adapter:<物理设备>允许您查询重要的设备特定详细信息，例如内存大小和功能支持。）

• WebGPU“设备”（GPUDevice）表示与WebGPU适配器的逻辑连接。 之所以称为“设备”，是因为它抽象了底层实现（例如视频卡）并封装了单个连接：拥有设备的代码可以充当适配器的唯一用户。作为这种封装的一部分，设备是从它创建的所有 WebGPU 对象（纹理等）的根所有者，只要设备丢失或损坏，就可以（内部）释放这些对象。 单个网页上的多个组件可以各自拥有自己的 WebGPU 设备。所有 WebGPU 的使用都是通过 WebGPU 设备或从它创建的对象完成的。 从这个意义上说，它服务于“WebGLRenderingContext”目的的一个子集； 然而，与 WebGLRenderingContext 不同的是，它不与画布对象相关联，并且大多数命令是通过“子”对象发出的。

•  (Device:<逻辑设备>使您可以访问 API的核心内部功能，例如创建纹理、缓冲区、队列、管道等图形数据结构。这种类型的数据结构在所有现代图形 API 中大部分都是相同的，具有非常他们之间几乎没有什么变化。

  Vulkan和DirectX 12通过设备创建内存数据结构来提供对内存的控制。)

GPU缓冲区创建

有两种缓冲区创建存储顶点位置、颜色、法线、uv数据信息；

第一种：分别创建两个或多个缓冲区，用来表示顶点位置、颜色，法线、uv数据信息并调用；

第二种：在数据层面，创建一个gpubuffer，要比创建多个零散的gpubuffer效率高很多，减少cpu与gpu的交换数据次数，也减少了GPU在内部命中内存的速度，这个的提升也很重要；但同样他也有缺点，他不能很好的处理程序重复使用，例如,对于一个三维立方体有多个不同颜色的表面，单一gpu缓冲区要求同一面上的不同顶点，多次重复相同的颜色信息，这就需要更大的储存空间，并且浪费GPU和CPU的资源。