Part 01

WebGPU研發(fā)背景  

早期，在使用GPU模塊開(kāi)發(fā)Web應(yīng)用方面，開(kāi)發(fā)者更多的是使用2011年發(fā)布的WebGL API進(jìn)行圖形繪制。這套API基于OpenGL ES，在一段時(shí)間內(nèi)是Web端進(jìn)行底層GPU圖形繪制的唯一選擇，可編程GPU語(yǔ)言的加入，讓它在從事某些繪制工作的性能方面對(duì)Canvas2D保持一定的優(yōu)勢(shì)。該API通過(guò)canvas元素獲取WebGL上下文后才能使用，其以內(nèi)部全局狀態(tài)為中心而設(shè)計(jì)的狀態(tài)機(jī)式的API調(diào)用深受開(kāi)發(fā)人員的詬病，開(kāi)發(fā)人員必須小心構(gòu)建API的調(diào)用順序（過(guò)程式調(diào)用），管理狀態(tài)的開(kāi)啟以及恢復(fù)，以使繪制結(jié)果正確，同時(shí)這在一定程度上導(dǎo)致了性能的開(kāi)銷。

隨著科技的發(fā)展，GPU早已不是圖形繪制應(yīng)用的專屬，在元宇宙、機(jī)器學(xué)習(xí)、大數(shù)據(jù)、神經(jīng)網(wǎng)絡(luò)等不同領(lǐng)域大放異彩，隨著算力需求的日益提升，GPU的作用愈發(fā)重要，與此同時(shí)，在桌面端出現(xiàn)了新一代的圖形API（Vulkan、Metal、DirectX12），它們采用面向?qū)ο蟮脑O(shè)計(jì)方案，為開(kāi)發(fā)人員提供更加底層的接口訪問(wèn)，更多的GPU使用權(quán)，靈活的API調(diào)用方式以及通用并行計(jì)算能力，讓開(kāi)發(fā)人員最大限度從GPU中榨取性能。

Web端同樣需要這些能力，基于現(xiàn)代圖形API的設(shè)計(jì)理念，WebGPU應(yīng)運(yùn)而生，它不是WebGL的一次升級(jí)，WebGPU擁有自身獨(dú)特的抽象設(shè)計(jì)，并不直接封裝某一特定的圖形API，以下是WebGPU的架構(gòu)示意圖。

Part 02

WebGPU中的重要概念 

2.1適配器和設(shè)備

在開(kāi)始了解WebGPU的相關(guān)規(guī)范時(shí)，最先接觸的便是適配器（adapter）和設(shè)備（device）的概念，下圖展示了從物理設(shè)備（GPU）到邏輯設(shè)備抽象架構(gòu)。

適配器，即GPUAdapter。一個(gè)物理GPU設(shè)備對(duì)應(yīng)一個(gè)GPUAdapter，計(jì)算機(jī)可能具有多個(gè)GPU設(shè)備（集成顯卡和獨(dú)立顯卡），適配器作為翻譯者角色，鏈接WebGPU與本機(jī)的圖形API。通過(guò)下述方式可以獲取相應(yīng)的GPUAdapter。

這里的設(shè)備，即GPUDevice，是邏輯設(shè)備的概念，并不對(duì)應(yīng)真正的GPU。GPU是共享資源，瀏覽器可以運(yùn)行多個(gè)Web應(yīng)用，每個(gè)Web應(yīng)用都可以獨(dú)立使用GPU，需要一個(gè)類似代理人角色，幫助多個(gè)獨(dú)立的Web應(yīng)用使用GPU相關(guān)的功能，這便是WebGPU設(shè)備的作用，GPUDevice對(duì)象是后續(xù)使用相關(guān)API的重要對(duì)象，從某種意義上它很像WebGL的上下文概念，但它并不與canvas強(qiáng)相關(guān)。通過(guò)下述方式獲取GPUDevice。

2.2 著色器

著色器（shader）是運(yùn)行在GPU的一段程序。現(xiàn)代GPU渲染是通過(guò)流水管線（可編程邏輯管線）的方式實(shí)現(xiàn)的，在管線執(zhí)行的某個(gè)階段（可編程部分）會(huì)執(zhí)行著色器代碼。如果你了解過(guò)WebGL，可能知道頂點(diǎn)著色器（vertex shader）和片段著色器（fragment shader），應(yīng)用程序組織數(shù)據(jù)資源以變量（unifrom/attribute）的形式傳遞給著色器，著色器運(yùn)行將執(zhí)行的結(jié)果傳遞給下一個(gè)階段進(jìn)行處理。

著色器是開(kāi)發(fā)人員操控GPU的重要工具，復(fù)雜計(jì)算、場(chǎng)景特效、圖像處理等均可交給著色器程序處理。WebGPU不僅含有頂點(diǎn)著色器和片段著色器、同時(shí)具備執(zhí)行通用并行計(jì)算的能力，即計(jì)算著色器（compute shader），它由WebGPU計(jì)算管線（下文管線概念介紹）承載，擁有比WebGL更強(qiáng)大的計(jì)算能力。WebGL采用GLSL語(yǔ)言（OpenGL采用的語(yǔ)言）實(shí)現(xiàn)著色器代碼，而WebGPU擁有重新設(shè)計(jì)的著色器語(yǔ)言WGSL，下面是著色器代碼與對(duì)應(yīng)模塊（GPUShaderModule）的創(chuàng)建示例。

2.3 資源（緩沖、紋理、采樣器）

上述著色器的示例中，定義了一些變量，例如unfiorms、uTexture、uSampler、aPosition、aUv等，這些變量參數(shù)的值即對(duì)應(yīng)外部應(yīng)用程序的數(shù)據(jù)資源，這些數(shù)據(jù)會(huì)存儲(chǔ)在顯存中，最終會(huì)被傳入到著色器程序中運(yùn)行以得到相應(yīng)的結(jié)果。數(shù)據(jù)資源大體可分為四類：頂點(diǎn)屬性數(shù)據(jù)（vertex attribute）、著色器變量（uniform buffer）數(shù)據(jù)、紋理數(shù)據(jù)（texture）、采樣器（sampler）。

頂點(diǎn)屬性數(shù)據(jù)主要存儲(chǔ)頂點(diǎn)的位置坐標(biāo)、法向量、紋理坐標(biāo)（用于采樣紋理）等，是基本繪制所必須的。著色器變量數(shù)據(jù)，則是著色器程序運(yùn)行所需的通用數(shù)據(jù)，例如仿射變換矩陣、場(chǎng)景光照參數(shù)、材質(zhì)參數(shù)等。紋理數(shù)據(jù)更多的用于存儲(chǔ)圖像資源，在繪制時(shí)常用于貼圖效果的實(shí)現(xiàn)。采樣器則是一種特殊資源，它指定紋理編碼和濾波需要的方式，例如紋理的放大與縮小，各向異性濾波，minmap生成等。對(duì)于頂點(diǎn)屬性數(shù)據(jù)和著色器變量數(shù)據(jù)，其主要映射到GPUBuffer中，即頂點(diǎn)緩沖對(duì)象（VBO）和uniform緩沖對(duì)象（UBO），紋理數(shù)據(jù)則對(duì)應(yīng)GPUTexture，采樣器則是GPUSampler對(duì)象。這三種類型的資源均由GPUDevice創(chuàng)建。以下是各類型資源創(chuàng)建的示例。

GPUBuffer的創(chuàng)建采用了緩沖映射（Buffer Mapping）機(jī)制，當(dāng)某個(gè)顯存被映射了，CPU才能訪問(wèn)它。上述例子中，在創(chuàng)建GPUBuffer時(shí)將mappedAtCreation設(shè)置為true，開(kāi)啟映射機(jī)制，在設(shè)置完數(shù)據(jù)后結(jié)束映射。

2.4 綁定組

上述示例中分別創(chuàng)建了用于存儲(chǔ)頂點(diǎn)屬性的GPUBuffer對(duì)象，存儲(chǔ)uniform變量的GPUBuffer對(duì)象，存儲(chǔ)圖像資源的GPUTexutre對(duì)象以及采樣器對(duì)象。對(duì)于頂點(diǎn)屬性的GPUBuffer對(duì)象，將在后續(xù)的管線與命令編碼模塊中闡述其是如何傳入到GPU中。對(duì)于后述的3種資源（著色器變量、紋理、采樣器），則需要用一種有效的方式將它們提交給GPU，為此，WebGPU提出了綁定組概念，即GPUBindGroup，它是一種數(shù)據(jù)容器，用于將部分?jǐn)?shù)據(jù)資源進(jìn)行打組并傳遞給著色器程序，能高效地進(jìn)行數(shù)據(jù)組織與分配。通過(guò)打組的數(shù)據(jù)組織形式，能夠減少CPU與GPU通訊次數(shù)，從而提高性能，同時(shí)也方便不同行為的著色器共享相同的打組資源，實(shí)現(xiàn)資源的復(fù)用。下圖給出了WebGL與WebGPU不同的數(shù)據(jù)組織傳遞形式。

從上圖可以看出，WebGL的API設(shè)計(jì)是圍繞內(nèi)部的全局狀態(tài)設(shè)定的實(shí)現(xiàn)的，通過(guò)API函數(shù)逐個(gè)將資源綁定到綁定點(diǎn)上，本質(zhì)上更改了內(nèi)部全局狀態(tài)，而WebGPU則是將資源數(shù)據(jù)放入數(shù)據(jù)容器中，通過(guò)命令提交（編碼器與隊(duì)列介紹）的方式送入到GPU中。創(chuàng)建GPUBindGroup需要對(duì)應(yīng)的描述符，其結(jié)構(gòu)如下。

綁定組有對(duì)應(yīng)的布局（GPUBindGroupLayout），布局向著色器程序描述某個(gè)資源的類型（type），所屬組（group），對(duì)應(yīng)的綁定點(diǎn)位（bingding）以及用于具體階段的著色器程序（visibility），仔細(xì)觀察上述著色器部分里給出的示例，你會(huì)發(fā)現(xiàn)@group(0) @binding(0)這樣的聲明，即表示該資源綁定在組0的0號(hào)綁定點(diǎn)上，綁定的布局需根據(jù)著色器程序中的設(shè)置進(jìn)行對(duì)應(yīng)填寫(xiě)。GPUBindGroupEntry對(duì)象表明一個(gè)綁定位，在這個(gè)綁定位（resouce字段上指定）上會(huì)附上WebGPU創(chuàng)建的資源數(shù)據(jù)。以下是一個(gè)GPUBindGroup創(chuàng)建的簡(jiǎn)單示例，我們將之前創(chuàng)建的GPUBuffer對(duì)象、采樣器與紋理對(duì)象打包到一個(gè)綁定組對(duì)象。

2.5 管線

完成著色器模塊創(chuàng)建和數(shù)據(jù)資源準(zhǔn)備之后，還需要進(jìn)行一項(xiàng)重要的工作，即管線（Pipeline）的搭建。大多數(shù)開(kāi)發(fā)者在開(kāi)始學(xué)習(xí)圖形渲染時(shí)，首先接觸的便是渲染管線的概念，這是現(xiàn)代圖像渲染的重要機(jī)制，但在WebGL API設(shè)計(jì)中卻沒(méi)有體現(xiàn)出這一重要理念，零碎的API組織形式讓初學(xué)者很難將每一步與GPU管線聯(lián)系起來(lái)，WebGL要求開(kāi)發(fā)人員自行組織應(yīng)用程序的執(zhí)行流程，所以你會(huì)看到gl.bindVertexArray、gl.bindBuffer、gl.bindTexture、gl.useProgram這樣的API設(shè)計(jì)，按照不同需求綁定不同的資源或狀態(tài)，從而實(shí)現(xiàn)不同物體或效果的繪制。WebGPU中的管線分為渲染管線和計(jì)算管線。

渲染管線（GPURenderPipeline）顧名思義是用于繪制的管線，通過(guò)該管線的作用，最終會(huì)生成一副2D圖像，該圖像可以在屏幕上展示，也可以渲染到幀緩沖區(qū)中（frame buffer）。創(chuàng)建GPURenderPipeline需要對(duì)應(yīng)的描述符，其結(jié)構(gòu)如下。

GPUVertexState與GPUFragmentState字段分別代表了頂點(diǎn)著色器和片段著色器可編程階段。GPUPrimitiveState用于指定圖元裝配形式，在進(jìn)行光柵化時(shí)以何種圖元類型進(jìn)行繪制。GPUDepthStencilState用于描述深度模版測(cè)試信息。GPUMultisampleState指定多重采樣，用于處理鋸齒效果。GPURenderPipeline創(chuàng)建示例如下。

上述示例可以看出，在渲染管線中配置上了之前生成的兩個(gè)著色器模塊，同時(shí)也描述了頂點(diǎn)屬性（資源部分提到）在著色器中的布局。在頂點(diǎn)著色器中，有@location(0) aPosition與@location(1) aUv這兩個(gè)定義，分別代表傳入的頂點(diǎn)的位置屬性和uv坐標(biāo)屬性，location(0)和location(1)是與管線配置你中的shaderLocation相對(duì)應(yīng)的。

WebGL在大多數(shù)情況下僅是一套圖形繪制API，它很少會(huì)被用來(lái)進(jìn)行其他事物處理，比如計(jì)算。計(jì)算管線（Compute Pipeline）的出現(xiàn)則賦予了WebGPU“計(jì)算能力”，它不是傳統(tǒng)渲染管線的一部分，用于GPU并行計(jì)算，生成的最終結(jié)果存儲(chǔ)于緩沖區(qū)中，該緩沖區(qū)可以存儲(chǔ)任何類型的數(shù)據(jù)，計(jì)算管線只有一個(gè)compute階段，創(chuàng)建GPUComputePipeline需要對(duì)應(yīng)的描述符，其結(jié)構(gòu)如下。

GPUProgrammableStage表明這是一個(gè)可編程的階段，類似與GPUVertexState和GPUFragmentState。每個(gè)頂點(diǎn)的處理需要調(diào)用一次頂點(diǎn)著色器，片段著色器會(huì)執(zhí)行每個(gè)像素的處理，而計(jì)算著色器則根據(jù)開(kāi)發(fā)人員定義的工作項(xiàng)（work item）進(jìn)行調(diào)用，每個(gè)工作項(xiàng)對(duì)應(yīng)一個(gè)線程（thread）。工作項(xiàng)的集合被分為工作組（work group），即是一組線程（thread block），這組線程內(nèi)可以共享內(nèi)存、相互通信及協(xié)調(diào)運(yùn)算。在WebGPU中，工作組被模擬為三維網(wǎng)格，如下圖所示。

每個(gè)最小立方塊（黑邊）可以看作是一個(gè)工作項(xiàng)，多個(gè)工作項(xiàng)集合成工作組（紅虛邊）。在計(jì)算著色器代碼中可以看到@workgroup_size(x, y, z)這樣的申明，即是告訴GPU這個(gè)計(jì)算著色器的工作組是多大，工作組尺寸（workdgroup_size）的設(shè)置大多數(shù)情況下取決于工作項(xiàng)坐標(biāo)語(yǔ)義。下圖為簡(jiǎn)單的GPUComputePipeline創(chuàng)建示例。

這是一個(gè)簡(jiǎn)單的圖像灰度直方圖統(tǒng)計(jì)示例。通過(guò)GPU并行架構(gòu)處理，我們能夠忽略掉圖像像素的遍歷統(tǒng)計(jì)，極大加快計(jì)算的速度。

2.6 命令編碼和隊(duì)列

上述的工作可以看作是準(zhǔn)備階段，主要進(jìn)行數(shù)據(jù)準(zhǔn)備和管線搭建兩項(xiàng)工作，在進(jìn)行最后的繪制或計(jì)算時(shí)，則需要通過(guò)命令和隊(duì)列的形式實(shí)現(xiàn)。命令編碼器（GPUCommandEncoder）主要常用功能有兩個(gè)：創(chuàng)建通道編碼器（pass encoder）和緩沖資源（GPUBuffer/GPUTexture）復(fù)制。GPUCommandEncoder由設(shè)備對(duì)象形創(chuàng)建，如下：

WebGPU的通道分為渲染通道（render pass）和計(jì)算通道（compute pass），對(duì)應(yīng)渲染管線和計(jì)算管線，兩類通道對(duì)象分別通過(guò)GPUCommandEncoder對(duì)象上的相應(yīng)方法（beginRenderPass/beginComputePass）結(jié)合自身描述符實(shí)現(xiàn)創(chuàng)建與啟動(dòng)，最終會(huì)得到通道編碼器對(duì)象GPURenderPassEncoder/GPUComputePassEncoder，這類編碼器是WebGPU API設(shè)計(jì)中的抽象概念，也是WebGL全局狀態(tài)設(shè)置的替代品。通過(guò)編碼器對(duì)象可以設(shè)置需要的管線、綁定組、頂點(diǎn)屬性緩沖并調(diào)用draw/dispatch函數(shù)進(jìn)行繪制或計(jì)算。下面是編碼器對(duì)象的使用示例。

GPUCommandEncoder對(duì)象在調(diào)用finish函數(shù)后會(huì)得到一個(gè)命令緩沖區(qū)對(duì)象（GPUCommandBuffer），該緩沖區(qū)用于存儲(chǔ)GPU命令，這些命令的提交則是通過(guò)命令隊(duì)列（GPUQueue）的實(shí)施的，如下：

Part 03

結(jié)束語(yǔ) 

WebGPU作為全新的API，為Web應(yīng)用開(kāi)發(fā)注入了新的活力，它實(shí)現(xiàn)了圖形繪制到通用并行計(jì)算的進(jìn)步，讓GPU成為Web端應(yīng)用的重要角色，是未來(lái)構(gòu)建高性能應(yīng)用的關(guān)鍵。