2023年4月6日,歷經(jīng)6年的標準制定與開發(fā),chrome瀏覽器在其113版本正式發(fā)布了WebGPU,標志著Web端正式進入GPU的新時代,旨在提供“現(xiàn)代3D圖形和計算能力”,讓高性能通用并行計算在Web側(cè)成為可能。
Part 01●??WebGPU研發(fā)背景?●
早期,在使用GPU模塊開發(fā)Web應(yīng)用方面,開發(fā)者更多的是使用2011年發(fā)布的WebGL API進行圖形繪制。這套API基于OpenGL ES,在一段時間內(nèi)是Web端進行底層GPU圖形繪制的唯一選擇,可編程GPU語言的加入,讓它在從事某些繪制工作的性能方面對Canvas2D保持一定的優(yōu)勢。該API通過canvas元素獲取WebGL上下文后才能使用,其以內(nèi)部全局狀態(tài)為中心而設(shè)計的狀態(tài)機式的API調(diào)用深受開發(fā)人員的詬病,開發(fā)人員必須小心構(gòu)建API的調(diào)用順序(過程式調(diào)用),管理狀態(tài)的開啟以及恢復(fù),以使繪制結(jié)果正確,同時這在一定程度上導(dǎo)致了性能的開銷。
隨著科技的發(fā)展,GPU早已不是圖形繪制應(yīng)用的專屬,在元宇宙、機器學習、大數(shù)據(jù)、神經(jīng)網(wǎng)絡(luò)等不同領(lǐng)域大放異彩,隨著算力需求的日益提升,GPU的作用愈發(fā)重要,與此同時,在桌面端出現(xiàn)了新一代的圖形API(Vulkan、Metal、DirectX12),它們采用面向?qū)ο蟮脑O(shè)計方案,為開發(fā)人員提供更加底層的接口訪問,更多的GPU使用權(quán),靈活的API調(diào)用方式以及通用并行計算能力,讓開發(fā)人員最大限度從GPU中榨取性能。
Web端同樣需要這些能力,基于現(xiàn)代圖形API的設(shè)計理念,WebGPU應(yīng)運而生,它不是WebGL的一次升級,WebGPU擁有自身獨特的抽象設(shè)計,并不直接封裝某一特定的圖形API,以下是WebGPU的架構(gòu)示意圖。
Part 02●??WebGPU中的重要概念?●
2.1適配器和設(shè)備
在開始了解WebGPU的相關(guān)規(guī)范時,最先接觸的便是適配器(adapter)和設(shè)備(device)的概念,下圖展示了從物理設(shè)備(GPU)到邏輯設(shè)備抽象架構(gòu)。
適配器,即GPUAdapter。一個物理GPU設(shè)備對應(yīng)一個GPUAdapter,計算機可能具有多個GPU設(shè)備(集成顯卡和獨立顯卡),適配器作為翻譯者角色,鏈接WebGPU與本機的圖形API。通過下述方式可以獲取相應(yīng)的GPUAdapter。
這里的設(shè)備,即GPUDevice,是邏輯設(shè)備的概念,并不對應(yīng)真正的GPU。GPU是共享資源,瀏覽器可以運行多個Web應(yīng)用,每個Web應(yīng)用都可以獨立使用GPU,需要一個類似代理人角色,幫助多個獨立的Web應(yīng)用使用GPU相關(guān)的功能,這便是WebGPU設(shè)備的作用,GPUDevice對象是后續(xù)使用相關(guān)API的重要對象,從某種意義上它很像WebGL的上下文概念,但它并不與canvas強相關(guān)。通過下述方式獲取GPUDevice。
2.2 著色器
著色器(shader)是運行在GPU的一段程序?,F(xiàn)代GPU渲染是通過流水管線(可編程邏輯管線)的方式實現(xiàn)的,在管線執(zhí)行的某個階段(可編程部分)會執(zhí)行著色器代碼。如果你了解過WebGL,可能知道頂點著色器(vertex shader)和片段著色器(fragment shader),應(yīng)用程序組織數(shù)據(jù)資源以變量(unifrom/attribute)的形式傳遞給著色器,著色器運行將執(zhí)行的結(jié)果傳遞給下一個階段進行處理。
著色器是開發(fā)人員操控GPU的重要工具,復(fù)雜計算、場景特效、圖像處理等均可交給著色器程序處理。WebGPU不僅含有頂點著色器和片段著色器、同時具備執(zhí)行通用并行計算的能力,即計算著色器(compute shader),它由WebGPU計算管線(下文管線概念介紹)承載,擁有比WebGL更強大的計算能力。WebGL采用GLSL語言(OpenGL采用的語言)實現(xiàn)著色器代碼,而WebGPU擁有重新設(shè)計的著色器語言WGSL,下面是著色器代碼與對應(yīng)模塊(GPUShaderModule)的創(chuàng)建示例。
2.3 資源(緩沖、紋理、采樣器)
上述著色器的示例中,定義了一些變量,例如unfiorms、uTexture、uSampler、aPosition、aUv等,這些變量參數(shù)的值即對應(yīng)外部應(yīng)用程序的數(shù)據(jù)資源,這些數(shù)據(jù)會存儲在顯存中,最終會被傳入到著色器程序中運行以得到相應(yīng)的結(jié)果。數(shù)據(jù)資源大體可分為四類:頂點屬性數(shù)據(jù)(vertex attribute)、著色器變量(uniform buffer)數(shù)據(jù)、紋理數(shù)據(jù)(texture)、采樣器(sampler)。
頂點屬性數(shù)據(jù)主要存儲頂點的位置坐標、法向量、紋理坐標(用于采樣紋理)等,是基本繪制所必須的。著色器變量數(shù)據(jù),則是著色器程序運行所需的通用數(shù)據(jù),例如仿射變換矩陣、場景光照參數(shù)、材質(zhì)參數(shù)等。紋理數(shù)據(jù)更多的用于存儲圖像資源,在繪制時常用于貼圖效果的實現(xiàn)。采樣器則是一種特殊資源,它指定紋理編碼和濾波需要的方式,例如紋理的放大與縮小,各向異性濾波,minmap生成等。對于頂點屬性數(shù)據(jù)和著色器變量數(shù)據(jù),其主要映射到GPUBuffer中,即頂點緩沖對象(VBO)和uniform緩沖對象(UBO),紋理數(shù)據(jù)則對應(yīng)GPUTexture,采樣器則是GPUSampler對象。這三種類型的資源均由GPUDevice創(chuàng)建。以下是各類型資源創(chuàng)建的示例。
GPUBuffer的創(chuàng)建采用了緩沖映射(Buffer Mapping)機制,當某個顯存被映射了,CPU才能訪問它。上述例子中,在創(chuàng)建GPUBuffer時將mappedAtCreation設(shè)置為true,開啟映射機制,在設(shè)置完數(shù)據(jù)后結(jié)束映射。
2.4 綁定組
上述示例中分別創(chuàng)建了用于存儲頂點屬性的GPUBuffer對象,存儲uniform變量的GPUBuffer對象,存儲圖像資源的GPUTexutre對象以及采樣器對象。對于頂點屬性的GPUBuffer對象,將在后續(xù)的管線與命令編碼模塊中闡述其是如何傳入到GPU中。對于后述的3種資源(著色器變量、紋理、采樣器),則需要用一種有效的方式將它們提交給GPU,為此,WebGPU提出了綁定組概念,即GPUBindGroup,它是一種數(shù)據(jù)容器,用于將部分數(shù)據(jù)資源進行打組并傳遞給著色器程序,能高效地進行數(shù)據(jù)組織與分配。通過打組的數(shù)據(jù)組織形式,能夠減少CPU與GPU通訊次數(shù),從而提高性能,同時也方便不同行為的著色器共享相同的打組資源,實現(xiàn)資源的復(fù)用。下圖給出了WebGL與WebGPU不同的數(shù)據(jù)組織傳遞形式。
從上圖可以看出,WebGL的API設(shè)計是圍繞內(nèi)部的全局狀態(tài)設(shè)定的實現(xiàn)的,通過API函數(shù)逐個將資源綁定到綁定點上,本質(zhì)上更改了內(nèi)部全局狀態(tài),而WebGPU則是將資源數(shù)據(jù)放入數(shù)據(jù)容器中,通過命令提交(編碼器與隊列介紹)的方式送入到GPU中。創(chuàng)建GPUBindGroup需要對應(yīng)的描述符,其結(jié)構(gòu)如下。
綁定組有對應(yīng)的布局(GPUBindGroupLayout),布局向著色器程序描述某個資源的類型(type),所屬組(group),對應(yīng)的綁定點位(bingding)以及用于具體階段的著色器程序(visibility),仔細觀察上述著色器部分里給出的示例,你會發(fā)現(xiàn)@group(0) @binding(0)這樣的聲明,即表示該資源綁定在組0的0號綁定點上,綁定的布局需根據(jù)著色器程序中的設(shè)置進行對應(yīng)填寫。GPUBindGroupEntry對象表明一個綁定位,在這個綁定位(resouce字段上指定)上會附上WebGPU創(chuàng)建的資源數(shù)據(jù)。以下是一個GPUBindGroup創(chuàng)建的簡單示例,我們將之前創(chuàng)建的GPUBuffer對象、采樣器與紋理對象打包到一個綁定組對象。
2.5 管線
完成著色器模塊創(chuàng)建和數(shù)據(jù)資源準備之后,還需要進行一項重要的工作,即管線(Pipeline)的搭建。大多數(shù)開發(fā)者在開始學習圖形渲染時,首先接觸的便是渲染管線的概念,這是現(xiàn)代圖像渲染的重要機制,但在WebGL API設(shè)計中卻沒有體現(xiàn)出這一重要理念,零碎的API組織形式讓初學者很難將每一步與GPU管線聯(lián)系起來,WebGL要求開發(fā)人員自行組織應(yīng)用程序的執(zhí)行流程,所以你會看到gl.bindVertexArray、gl.bindBuffer、gl.bindTexture、gl.useProgram這樣的API設(shè)計,按照不同需求綁定不同的資源或狀態(tài),從而實現(xiàn)不同物體或效果的繪制。WebGPU中的管線分為渲染管線和計算管線。
渲染管線(GPURenderPipeline)顧名思義是用于繪制的管線,通過該管線的作用,最終會生成一副2D圖像,該圖像可以在屏幕上展示,也可以渲染到幀緩沖區(qū)中(frame buffer)。創(chuàng)建GPURenderPipeline需要對應(yīng)的描述符,其結(jié)構(gòu)如下。
GPUVertexState與GPUFragmentState字段分別代表了頂點著色器和片段著色器可編程階段。GPUPrimitiveState用于指定圖元裝配形式,在進行光柵化時以何種圖元類型進行繪制。GPUDepthStencilState用于描述深度模版測試信息。GPUMultisampleState指定多重采樣,用于處理鋸齒效果。GPURenderPipeline創(chuàng)建示例如下。
上述示例可以看出,在渲染管線中配置上了之前生成的兩個著色器模塊,同時也描述了頂點屬性(資源部分提到)在著色器中的布局。在頂點著色器中,有@location(0) aPosition與@location(1) aUv這兩個定義,分別代表傳入的頂點的位置屬性和uv坐標屬性,location(0)和location(1)是與管線配置你中的shaderLocation相對應(yīng)的。
WebGL在大多數(shù)情況下僅是一套圖形繪制API,它很少會被用來進行其他事物處理,比如計算。計算管線(Compute Pipeline)的出現(xiàn)則賦予了WebGPU“計算能力”,它不是傳統(tǒng)渲染管線的一部分,用于GPU并行計算,生成的最終結(jié)果存儲于緩沖區(qū)中,該緩沖區(qū)可以存儲任何類型的數(shù)據(jù),計算管線只有一個compute階段,創(chuàng)建GPUComputePipeline需要對應(yīng)的描述符,其結(jié)構(gòu)如下。
GPUProgrammableStage表明這是一個可編程的階段,類似與GPUVertexState和GPUFragmentState。每個頂點的處理需要調(diào)用一次頂點著色器,片段著色器會執(zhí)行每個像素的處理,而計算著色器則根據(jù)開發(fā)人員定義的工作項(work item)進行調(diào)用,每個工作項對應(yīng)一個線程(thread)。工作項的集合被分為工作組(work group),即是一組線程(thread block),這組線程內(nèi)可以共享內(nèi)存、相互通信及協(xié)調(diào)運算。在WebGPU中,工作組被模擬為三維網(wǎng)格,如下圖所示。
每個最小立方塊(黑邊)可以看作是一個工作項,多個工作項集合成工作組(紅虛邊)。在計算著色器代碼中可以看到@workgroup_size(x, y, z)這樣的申明,即是告訴GPU這個計算著色器的工作組是多大,工作組尺寸(workdgroup_size)的設(shè)置大多數(shù)情況下取決于工作項坐標語義。下圖為簡單的GPUComputePipeline創(chuàng)建示例。
這是一個簡單的圖像灰度直方圖統(tǒng)計示例。通過GPU并行架構(gòu)處理,我們能夠忽略掉圖像像素的遍歷統(tǒng)計,極大加快計算的速度。
2.6 命令編碼和隊列
上述的工作可以看作是準備階段,主要進行數(shù)據(jù)準備和管線搭建兩項工作,在進行最后的繪制或計算時,則需要通過命令和隊列的形式實現(xiàn)。命令編碼器(GPUCommandEncoder)主要常用功能有兩個:創(chuàng)建通道編碼器(pass encoder)和緩沖資源(GPUBuffer/GPUTexture)復(fù)制。GPUCommandEncoder由設(shè)備對象形創(chuàng)建,如下:
WebGPU的通道分為渲染通道(render pass)和計算通道(compute pass),對應(yīng)渲染管線和計算管線,兩類通道對象分別通過GPUCommandEncoder對象上的相應(yīng)方法(beginRenderPass/beginComputePass)結(jié)合自身描述符實現(xiàn)創(chuàng)建與啟動,最終會得到通道編碼器對象GPURenderPassEncoder/GPUComputePassEncoder,這類編碼器是WebGPU API設(shè)計中的抽象概念,也是WebGL全局狀態(tài)設(shè)置的替代品。通過編碼器對象可以設(shè)置需要的管線、綁定組、頂點屬性緩沖并調(diào)用draw/dispatch函數(shù)進行繪制或計算。下面是編碼器對象的使用示例。
GPUCommandEncoder對象在調(diào)用finish函數(shù)后會得到一個命令緩沖區(qū)對象(GPUCommandBuffer),該緩沖區(qū)用于存儲GPU命令,這些命令的提交則是通過命令隊列(GPUQueue)的實施的,如下:
Part 03●??結(jié)束語?●
WebGPU作為全新的API,為Web應(yīng)用開發(fā)注入了新的活力,它實現(xiàn)了圖形繪制到通用并行計算的進步,讓GPU成為Web端應(yīng)用的重要角色,是未來構(gòu)建高性能應(yīng)用的關(guān)鍵。
作者:周明洋
單位:中國移動智慧家庭運營中心 成都業(yè)務(wù)支持中心