?作者 | 王瑞平

審校 | 云昭

51CTO讀者成長計(jì)劃社群招募，咨詢小助手（微信號(hào)：TTalkxiaozhuli）

好消息，頁游要重新崛起了！Web上有望產(chǎn)生3A游戲大作了！

經(jīng)過6年持續(xù)不斷的開發(fā)，Chrome團(tuán)隊(duì)于當(dāng)?shù)貢r(shí)間4月6日發(fā)布Web GPU。它是一種新型的API，可以讓W(xué)eb應(yīng)用程序更多地訪問你的顯卡功能，能夠被用來在網(wǎng)絡(luò)上進(jìn)行高性能3D圖形和數(shù)據(jù)并行計(jì)算。

當(dāng)日，Chrome團(tuán)隊(duì)還激動(dòng)地宣布：“Web GPU可以在Chrome 113中默認(rèn)可用，目前仍處于Beta測試階段?！?/p>

具體來講，Web GPU能夠顯著降低相同圖形規(guī)模下JavaScript的工作負(fù)載量。不僅如此，它還將機(jī)器學(xué)習(xí)模型的效率提升了3倍以上。相較于前幾年發(fā)布的WebGL版本，新的WebGPU具有靈活GPU編程和高級(jí)功能訪問能力。

順便說一句，WebGPU的初始版本能夠在ChromeOS、macOS和Windows上使用，對(duì)其它平臺(tái)的支持功能將在今年晚些時(shí)候推出。

1、邁入大瀏覽器時(shí)代

眾所周知，所有顯卡在使用之前都要安裝對(duì)應(yīng)的驅(qū)動(dòng)程序，只有顯卡驅(qū)動(dòng)程序與應(yīng)用程序以圖形API的形式互聯(lián)，才能讓顯卡完成圖形渲染與并行計(jì)算等工作。

WebGPU的初始版本可在Chrome 113、支持Vulkan的ChromeOS設(shè)備、支持Direct3D 12的Windows設(shè)備和macOS上使用。而且，Linux、Android以及對(duì)現(xiàn)有平臺(tái)的擴(kuò)展支持將很快推出。除了Chrome的初始實(shí)現(xiàn)外，Web GPU目前還可以在Firefox和Safari中運(yùn)行。這標(biāo)志著正式邁入大瀏覽器時(shí)代。

從專業(yè)的角度來講，Chromium能夠通過Dawn模塊實(shí)現(xiàn)Web GPU的API。Dawn中的DawnNative模塊與3大圖形API溝通，向上為DawnWire模塊傳遞信息。DawnWire模塊與JavaScript API溝通，通過C++語言實(shí)現(xiàn)最終的API。

FireFox則用Rust語言以及與Dawn類似模塊實(shí)現(xiàn)Web GPU的API。Safari是通過更新WebKit實(shí)現(xiàn)的API。

2、功能高級(jí)在哪里？

WebGPU是一種新的Web API，它公開了現(xiàn)代硬件功能并允許在GPU上進(jìn)行渲染和計(jì)算操作，類似于Direct3D 12、Metal和Vulkan。與API的WebGL系列不同，WebGPU提供對(duì)更高級(jí)GPU功能的訪問，并為GPU上的一般計(jì)算提供一流的支持。

與Direct3D12、Metal和Vulkan相似的是，Web GPU允許在GPU上進(jìn)行渲染和計(jì)算操作。具體來講，Web GPU作為前些年Web GL的升級(jí)版，不僅使用戶能夠訪問更高級(jí)GPU，還為GPU上的一般計(jì)算提供高級(jí)支持。

不僅如此，該API在設(shè)計(jì)時(shí)充分考慮Web平臺(tái)的特點(diǎn)，開發(fā)出符合用戶習(xí)慣的JavaScript API與Promises 集成、支持導(dǎo)入視頻和完備錯(cuò)誤提示信息的完善開發(fā)者體驗(yàn)。

未來，Web GPU的初始版本將被用作更新和增強(qiáng)功能的構(gòu)建模塊。同時(shí)，該API也將提供更高級(jí)的圖形功能，并鼓勵(lì)開發(fā)人員申請其它功能。

此外，Chrome團(tuán)隊(duì)還計(jì)劃在“Web GPU著色語言”中進(jìn)行更多的機(jī)器學(xué)習(xí)優(yōu)化和額外的人體工程學(xué)調(diào)整，從而能夠?qū)χ骱诵倪M(jìn)行深入訪問。

3、性能秒殺WebGL

那么，舊版本的WebGL與WebGPU在性能與參數(shù)方面究竟有何差異？在渲染性能上，WebGL比WebGPU快3倍以上。在計(jì)算性能上，WebGPU比WebGL快50倍以上。

在參數(shù)方面，WebGL的請求參數(shù)簡單，主要包括性能參數(shù)和功能參數(shù)。而WebGPU分成兩個(gè)階段，請求適配器時(shí)可以對(duì)性能作要求，請求設(shè)備對(duì)象時(shí)可以對(duì)GPU各個(gè)方面的參數(shù)作校驗(yàn)，確定是否滿足程序要求。

此外，WebGL的CPU開銷比WebGPU更高，因此使用WebGPU實(shí)現(xiàn)相同的渲染工作負(fù)載可能會(huì)更節(jié)能，即使GPU本質(zhì)上是在做同樣的工作。

總之，WebGPU是一個(gè)精確的圖形API，完全釋放出顯卡的能力，減輕了瀏覽器開發(fā)者的負(fù)擔(dān)，有別于WebGL這樣的上層API。

4、Web GPU的多線程與通用計(jì)算能力

Web GPU可以更好地在線程中執(zhí)行多種與現(xiàn)代圖形API相關(guān)的渲染任務(wù)，包括：在線程中更新資源（如更新buffer）、并行地編譯shader、并行地創(chuàng)建pipeline state、在線程中創(chuàng)建command buffer等。

目前，有兩種方法實(shí)現(xiàn)多線程：第一種方法是通過OffscreenCanvas API，實(shí)現(xiàn)主線程與渲染線程分離；第二種方法是創(chuàng)建worker，在worker中執(zhí)行WebGPU相關(guān)的渲染任務(wù)。

具體來講，WebGPU用Pipeline Object設(shè)置渲染管線中的相關(guān)信息分為兩個(gè)階段：“記錄命令”和“提交命令”?！坝涗浢睢笔且粋€(gè)純CPU進(jìn)程，可以分別記錄在多個(gè)Worker（多線程）中，然后提交到同一個(gè)隊(duì)列中?！疤峤幻睢本褪亲孏PU根據(jù)隊(duì)列中的命令順序執(zhí)行任務(wù)。

通過多線程，Web GPU上下文可以由多個(gè)工作人員共享。這些worker只要在時(shí)間線上沒有互斥操作都可以正常運(yùn)行。這無疑帶來了良好的開發(fā)體驗(yàn)。

此外，Web GPU還體現(xiàn)出強(qiáng)大的通用計(jì)算能力，通過計(jì)算著色器，使用GPU中 CU（Compute Unit，計(jì)算單元）旁邊的共享內(nèi)存，速度比普通的顯存速度快得多。

總的來講，Web GPU可以減少CPU開銷，提供對(duì)多線程的良好支持，使用計(jì)算著色器將通用計(jì)算的強(qiáng)大功能引入Web，未來，還將支持“實(shí)時(shí)光線追蹤”技術(shù)。

5、新體驗(yàn)：Web3D終于迎來曙光

那么，從用戶層面來講，Chrome支持Web GPU會(huì)帶來哪些全新的體驗(yàn)變化呢？

由于WebGPU的顯卡被開放，便于瀏覽器直接運(yùn)用GPU完成各種操作命令，成功實(shí)現(xiàn)3D圖形渲染能力質(zhì)的飛躍。此外，它還便于開發(fā)者為瀏覽器編寫“更酷炫”的游戲，大幅度提升頁游畫面表現(xiàn)。

WebGPU落地的最大意義還是在于人工智能方面。根據(jù)谷歌的說法，WebGPU改變了“機(jī)器學(xué)習(xí)模型”。例如，有了WebGPU，瀏覽器直接就能借助NVIDIA顯卡調(diào)用AI繪畫所需要的算力和功能。Stable Diffusion的本地化部署可能就真的只用動(dòng)動(dòng)鼠標(biāo)就行。

未來，WebGPU一定能在Web端釋放現(xiàn)代圖形處理器（GPU）的強(qiáng)大能力，無論是頁游，亦或是通用并行計(jì)算帶來的機(jī)器學(xué)習(xí)與AI能力。

6、WebGL與WebGPU實(shí)現(xiàn)兼容

值得一提的是，Web GPU是W3C“Web GPU”社區(qū)小組共同努力的結(jié)果。不乏來自Mozilla、蘋果、英特爾和微軟等大公司的貢獻(xiàn)。從2017年開始設(shè)計(jì)以來，經(jīng)過6年的開發(fā)(90位貢獻(xiàn)者、2000次提交、3000個(gè)問題)，團(tuán)隊(duì)終于實(shí)現(xiàn)Web GPU在Chrome中可用，也可支持Firefox和Safari。

無論是Chrome的Dawn庫，還是Firefox的WGPU庫均可作為獨(dú)立包使用。它們還具有可移植性和人體工程學(xué)層，抽象出GPU API操作系統(tǒng)。在本機(jī)應(yīng)用程序中使用這些庫時(shí)，開發(fā)者還可以更容易地通過Emscripten和Rust web-sys移植到WASM。

幸運(yùn)的是，許多廣泛使用的WebGL庫已經(jīng)與WebGPU實(shí)現(xiàn)兼容。如果要切換WebGPU可能只需要進(jìn)行一行配置。具體來講，Babylon.Js已經(jīng)完全支持WebGPU、PlayCanvas可初步支持WebGPU、TensorFlow.Js支持大多數(shù)操作符的WebGPU優(yōu)化版本、Js WebGPU支持正在實(shí)現(xiàn)。

7、內(nèi)部人士爆料：未來可期

一位自稱參與WebGPU開發(fā)的谷歌內(nèi)部人士稱：這是一個(gè)巨大的里程碑。早在他開發(fā)高級(jí)2D渲染器vello時(shí)，就意識(shí)到WebGPU會(huì)成為游戲規(guī)則的改變者。有了它之后，我們可以在任何地方都運(yùn)行起相當(dāng)現(xiàn)代的基礎(chǔ)架構(gòu)：Web、Windows、Mac、Linux、ChromeOS、iOS和Andriod。

此外，他還指出，通過WebGPU，運(yùn)行機(jī)器學(xué)習(xí)負(fù)載的性能在1.0版本中有所不足，但想要趕上本地運(yùn)行只是一個(gè)工程問題，完全可以實(shí)現(xiàn)的。

同時(shí)，他還爆料WebGPU團(tuán)隊(duì)正在開發(fā)本地?cái)U(kuò)展，以期實(shí)現(xiàn)人人想要的Bindless，有助于推動(dòng)Web標(biāo)準(zhǔn)化。

8、網(wǎng)友吐槽：遲到的里程碑

Reddit上不少網(wǎng)友對(duì)于現(xiàn)在才推出WebGPU感到有些遺憾?！耙苿?dòng)網(wǎng)絡(luò)上GPU加速更常見的用例是2D游戲。即使在低端設(shè)備上，使用Pixi類似的東西，就已經(jīng)足夠快了?！?/p>

也有人認(rèn)為有了WebGPU之后，PC或者桌面可能回到90年代的流行度。

還有一位前端網(wǎng)友認(rèn)為，WebGPU沒有囊括“現(xiàn)代圖形API設(shè)計(jì)”的重要發(fā)展方向：無綁定（Bindless）、網(wǎng)格著色器、光線追蹤、靈活的管道狀態(tài)等等，這些WebGPU目前都沒有出現(xiàn)。因此他感嘆：WebGPU是不是來得有點(diǎn)晚了！

9、寫在最后

正如上文所說，WebGPU的發(fā)布，將會(huì)給PC帶來翻盤的可能。但目前WebGPU表示基準(zhǔn)是桌面+移動(dòng)設(shè)備都支持，但未來的擴(kuò)展應(yīng)該支持僅限桌面的用例。

也許，PC作為AI技術(shù)最為前沿和先進(jìn)的載體，WebGPU的出現(xiàn)，再加上WASM和Rust的后端支持，超越“小程序時(shí)代”的“大瀏覽器時(shí)代”即將來臨！

參考資料：

https://www.theverge.com/2023/4/6/23673462/google-webgpu-chrome-113-api-machine-learning

https://blog.csdn.net/qq_43479892/article/details/122505601

https://developer.chrome.com/blog/webgpu-release/