首先看下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的資源。
