大家好，我是Echa。
好消息，谷歌 Chrome 研發團隊經過多少個日日夜夜，終於正式發布WebGPU。WebGPU六年磨一劍，瀏覽器圖形性能將一飛沖天。
WebGPU 的開發始於 2017 年，這項技術的目標是藉助現代 GPU 的計算能力來加速圖形和計算並且允許在 Web 上進行高性能 3D 圖形和數據並行計算。與 DirectX 和 Vulkan 等其他圖形 API 類似，WebGPU 也提供了直接在 GPU 上渲染和訪問高級功能的功能，從而提高圖形渲染的速度和效率。
WebGPU 現在默認在 Chrome 113 中可用，其目前處於 Beta 通道，並預計將於 2023年4 月 26 日發布正式版。看到Chrome 官方發布這則消息，頓時讓小編興奮了很久。因為該技術對3D動畫、3D遊戲行業、AR/VR、元宇宙（Metaverse）等技術是非常有幫助的。瀏覽器封裝了現代圖形API（Dx12、Vulkan、Metal），提供給Web 3D程式設計師，為 Web釋放了更多的GPU 硬體的功能。
當 WebGPU 出現在我的視野中時，我想深入了解它，但很多人警告我，WebGPU 的樣板比 WebGL 還要多。雖然沒有被嚇倒，但我預見到最壞的情況，教程和規範並不多，因為還處於 WebGPU 的早期階段。深入以後，我發現我沒有發現 WebGPU 實際上是一個我更熟悉的 API。
所以在這裡。我想分享在研究 GPU 和 WebGPU 時學到的東西。這篇博文的目標是讓 Web 開發人員可以訪問 WebGPU。但這裡有一個提醒：我不會使用 WebGPU 來生成圖形。相反，我將使用 WebGPU 來訪問 GPU 提供的原始計算能力。
全文大綱
- WebGL 介紹及示例
- WebGPU 介紹
- WebGL對比WebGPU
- Web 網絡圖形的新曙光
- WebGPU 瀏覽器支持
- WebGPU 庫支持
- WebGPU 示例
- WebGPU 最佳實踐
- 關於WebGPU的未來
WebGL 介紹
官網：https://www.khronos.org/webgl/
WebGL於 2011 年問世，到目前為止，它是唯一可以從 Web 訪問 GPU 的低級 API。WebGL 的 API 實際上只是 OpenGL ES 2.0，帶有一些瘦包裝器和輔助工具以使其與 Web 兼容。WebGL 和 OpenGL 都由Khronos Group標準化，這基本上是 3D 圖形的 W3C。
OpenGL 的 API 本身可以追溯到更遠，按照今天的標準，它並不是一個很好的 API。該設計以內部的全局狀態對象為中心。從這樣的角度來看，這種設計是有意義的，因為它可以最大限度地減少任何給定調用需要傳入和傳出 GPU 的數據量。但是，它也引入了很多精神負擔。
示例如下圖：
WebGPU 介紹
官網：http://webgpu.io/
webGPU資訊: https://gpuweb.Github.io/gpuweb/
Github：https://github.com/gpuweb/gpuweb
WebGPU 的名稱由來
下一代的 Web 圖形接口不叫 WebGL 3.0 的原因，你清楚了嗎？已經不是 GL 一脈的了，為了使現代巨頭在名稱上不打架，所以採用了更貼近硬體名稱的 WebGPU，WebGPU 從根源上和 WebGL 就不是一個時代的，無論是編碼風格還是性能表現上。
題外話，OpenGL 並不是沒有學習的價值，反而它還會存在一段時間，WebGL 也一樣。
WebGPU 是一種新的網絡圖形 API，它具有顯著的優勢，它遵循現代計算機圖形 API的架構，例如Vulkan、DirectX 12和Metal。Web 圖形 API 範式的這種轉變允許用戶利用原生圖形 API 帶來的相同好處：由於能夠讓 GPU 保持忙碌的工作，更快的應用程式，更少的圖形驅動程序特定的錯誤，以及新功能的潛力。將來實施。
WebGPU 可以說是 Web 上所有渲染 API 中最複雜的，儘管這一成本被 API 提供的性能提升和對未來支持的保證所抵消。這篇文章旨在揭開 API 的神秘面紗，讓我們更容易拼湊出如何編寫使用它的 Web 應用程式。
例如大大減少相同圖形的 JavaScript 工作量，以及機器學習模型推斷的三倍以上的改進。WebGPU 的初始版本可以在 ChromeOS、macOS 和 Windows 上使用。對其他平台的支持將於今年晚些時候推出。
廣泛的平台支持 WebGPU：
- Google Chrome：WebGPU 在 Chrome 中作為原始試用版提供。目前 Android 版 Chrome Canary 不支持 WebGPU。
- Mozilla Firefox：您必須使用 Beta 或 Nightly 頻道。Firefox Nightly for Android 支持 WebGPU，儘管它們的實現似乎缺少一些功能。
- Microsoft Edge：WebGPU 目前可通過他們的金絲雀版本獲得，但功能上與 Chrome 相同。
- Apple Safari：Safari 團隊正在致力於在桌面上支持 WebGPU，但在移動方面沒有任何消息。
如下圖：
WebGL對比WebGPU
大家比較熟悉的 WebGL 1.0 和 WebGL 2.0 分別是 OpenGL ES 2.0 和 OpenGL ES 3.0 API 的 Javascript 實現的子集。WebGL 的設計可以追溯到 1992 年發布的 OpenGL 1.0 API。這一沿襲可以將 OpenGL ES 大量可用的知識體系和應用程式相對容易地移植到 WebGL 中。
但是，這也意味著 WebGL 與現代 GPU 的設計不匹配，導致 CPU 性能和 GPU 性能問題。這也使得在現代原生 GPU API 之上實現 WebGL 變得非常困難。WebGL 2.0 Compute 的貢獻者決定將精力集中在 WebGPU 上。
所以WebGPU不是WebGL的延續，也不對標OpenGL，所以就需要用名稱在概念上進行區分。
直接上對比圖：
Web 網絡圖形的新曙光
WebGPU 是一種新的 Web API，它公開了現代硬體功能，並允許在 GPU 上進行渲染和計算操作，類似於 Direct3D 12、Metal 和 Vulkan。與 WebGL 系列 API 不同，WebGPU 提供了對更高級 GPU 功能的訪問，並未 GPU 上的通用計算提供一流的支持。該 API 的設計考慮了 Web 平台，具有常用的 JavaScript API、與 Promise 的集成、對導入視頻的支持以及帶有大量錯誤消息的完善的開發人員體驗。
WebGPU 的這個初始版本是未來更新和增強的構建塊。API 將提供更高級的圖形功能，並鼓勵開發人員發送對其他功能的請求。Chrome 團隊還計劃提供對著色器核心的更深入訪問，以便在 WebGPU 著色語言 WGSL 中進行更多的機器學習優化和額外的人體工程學。
WebGPU 是 W3C 的「Web GPU」社區組織協作努力的結果，其中包括來自 Mozilla、Apple、Intel 和 Microsoft 等主要公司的貢獻。經過六年的發展（90 位貢獻者，2000 次 commits，3000 個 issues），從 2017 年的初始設計開始，第一個實現現在可以在 Chrome 中使用，並正在支持 Firefox 和 Safari。
WebGPU 是 W3C 的「Web GPU」社區組協作努力的結果，其中包括來自 Mozilla、Apple、Intel 和 Microsoft 等主要公司的貢獻。經過六年的發展（90 位貢獻者，2000 次提交，3000 個問題），從 2017 年的初始設計開始，第一個實現現在可以在 Chrome 中使用，並正在支持 Firefox 和 Safari。
Chromium 的 Dawn 庫和 Firefox 的 wgp 庫都可以作為獨立包使用，它們提供了出色的可移植性和人體工程學層，可以抽象作業系統 GPU API。在原生應用中使用這些庫還可以更輕鬆地通過 Emscripten和 Rust web-sys 移植到 WASM。
具體如下圖：
WebGPU 瀏覽器支持
WebGPU 的初始版本可在支持 Vulkan 的 ChromeOS 設備、支持 Direct3D 12 的 Windows 設備和 macOS 的 Chrome 113 中使用。Linux、Android 和對現有平台的擴展支持即將推出。
除了在 Chrome 中的初步實現之外，目前在 Firefox 和 Safari 中正在開發 WebGPU。
WebGPU 庫支持
許多廣泛使用的 WebGL 庫已經在實施 WebGPU 支持的過程中或已經這樣做了。這意味著使用 WebGPU 可能只需要進行一行更改：
- Babylon.js已經完全支持 WebGPU.
官網：https://babylonjs.com/
在線演示：https://playground.babylonjs.com/#YX6IB8#73
Github：https://github.com/BabylonJS/Babylon.js
Babylon 的使命是創建世界上最強大、最漂亮、最簡單的Web渲染引擎之一。我們的熱情是讓它對每個人都完全開放和免費。我們是藝術家、開發人員、創作者和夢想家，我們希望儘可能簡單，讓每個人都能將自己的想法付諸實踐。這是Babylon.js平台的一個重要里程碑。Babylon.js是帶著對有史以來最偉大的科幻節目之一的深深熱愛和欽佩而命名的，我們很高興地宣布推出下一版本的Babylon.jsp平台。Babylon.js 5.0是迄今為止該平台最大、最大膽、最雄心勃勃的更新。從對WebGPU的全面支持，到使用Native Capabilities跨平台部署體驗的能力，再到數不勝數的工具、功能和改進，Babylon.js 5.0為每個人帶來了下一代網絡渲染技術。
如下圖：
- PlayCanvas 宣布了最初的 WebGPU 支持。
官網：https://playcanvas.github.io/
WebGPU是一項尖端技術，有望徹底改變3D圖形在網絡上的處理方式。作為WebGL的繼任者，WebGPU為複雜的3D圖形和模擬提供了更快、更高效的渲染功能。
PlayCanvas一直處於這項新技術的前沿，並一直致力於為其平台添加WebGPU支持。
有了WebGPU，我們可以期待未來在網絡上看到更多身臨其境和交互式的3D體驗。
如下圖：
- TensorFlow.js支持大多數運算符的 WebGPU 優化版本。
官網：https://js.tensorflow.org/
Github：https://github.com/tensorflow/tfjs
TensorFlow.js是一個開源的硬體加速JavaScript庫，用於訓練和部署機器學習模型。
- 在瀏覽器中開發ML
使用靈活直觀的API，使用低級JavaScript線性代數庫或高級層API從頭開始構建模型。
- 在Node.js中開發ML
在Node.js運行時下使用相同的TensorFlow.js API執行原生TensorFlow。
- 運行現有模型
使用TensorFlow.js模型轉換器在瀏覽器中運行預先存在的TensorFlow模型。
- 重新搜索現有模型
使用連接到瀏覽器的傳感器數據或其他客戶端數據重試預先存在的ML模型。
如下圖：
- Three.js WebGPU 支援正在進行中，
官網：https://threejs.org/
Github：https://github.com/mrdoob/three.js/
three.js，一個WebGL引擎，基於JavaScript，可直接運行GPU驅動遊戲與圖形驅動應用於瀏覽器。其庫提供大量特性與API以繪製3D場景於瀏覽器。
如下圖：
WebGPU 示例
在線演示：https://webgpu.github.io/webgpu-samples
Github：https://github.com/webgpu/webgpu-samples
WebGPU示例是一組演示WebGPU API使用的示例。請在WebGPU.io上查看當前的實現狀態以及如何在瀏覽器中運行WebGPU。
WebGPU 最佳實踐
描述了使用WebGPU API各個方面的最佳實踐。
需要注意的是，這些頁面不是開始使用WebGPU的教程，而是專注於使用API的特定部分的最有效模式，尤其是如果您是熟悉WebGL或某個本地API的開發人員。如果你有興趣學習WebGPU，請先查看以下資源（當你掌握了基本知識後一定會回來！）
如下圖：
關於WebGPU的未來
展望宏圖之類的話不說，但是隨著紅綠藍三家的 GPU 技術越發精湛，加上各個移動端的 GPU 逐漸起色，三大現代圖形API肯定還在發展，WebGPU 一定能在 Web 端釋放現代圖形處理器（GPU）的強大能力，無論是圖形遊戲，亦或是通用並行計算帶來的機器學習、AI能力。
其實不應該只是和WebGL去對比。因為WebGPU必然將取代WebGL，這是W3C已經明顯釋放出來的信號。就比如我們日常使用3G，4G，5G甚至未來的6G，或者說是我們的iphoneX, iphone11, iphone12,iphone13一樣。考慮到設備兼容和時間問題，WebGL也會長期存在。但是，說到根本，這些都是技術疊代升級帶來的「自然選擇」問題。WebGPU帶來的異步特性，Compute Shader，非全局狀態機，更靈活的resouce binding，甚至是未來的光線追蹤等等，都是現代圖形API的特性，也是WebGL無法實現的。
我們提到WebGPU的未來，更應該考慮是Web生態和Native生態的問題。尤其是面向未來，面向元宇宙時代。
WebGPU 毫無疑問會在未來取代 WebGL
Web 一直是最開放和易於傳播的平台，而今天遊戲、元宇宙等數字內容非常依賴 Web 平台的各種特性，但是 Web 環境中還沒有跟上 DirectX12、Vulkan、Metal 等現代圖形接口的變革。這一現狀隨著 WebGPU 標準的逐步完善，即將得到改變。這會給 Web 會帶來非常振奮人心的未來可能性。
WebGPU 是由 W3C GPU for the Web 社區組所發布的規範，目標是允許網頁代碼以高性能且安全可靠的方式訪問 GPU 功能。WebGPU 是一套為瀏覽器設計的次時代圖形 API 標準，為了彌合各個平台圖形 API 的差異性，它對 DirectX12、Vulkan、Metal 進行了融合和封裝。藉助 WebGPU，可以充分釋放現代 GPU 硬體的強大能力，讓開發者可以用 TS/JS 在 Web 端也開發媲美原生表現力的場景，實現更大型更複雜的 3D 場景表現，甚至使用現代 GPU 的通用計算能力完成之前無法想像的複雜計算任務。
最後
一台電腦,一個鍵盤,盡情揮灑智慧的人生;幾行數字,幾個字母,認真編寫生活的美好;
一 個靈感,一段程序,推動科技進步,促進社會發展。
創作不易，喜歡的老鐵們加個關注，點個讚，打個賞，後面會不定期更新乾貨和技術相關的資訊，速速收藏，謝謝！你們的一個小小舉動就是對小編的認可，更是創作的動力。