你可能使用過 WebGL，如果沒有，那么一定使用過 Three.js，不是嗎？本文將向你介紹 WebGL 和后起之秀 WebGPU。
1、WebGL 的起源
說起起源，就不得不說OpenGL。
在個人計算機的早期，使用最廣泛的 3D 圖形渲染技術(shù)是 Direct3D 和 OpenGL。Direct3D 是微軟 DirectX 技術(shù)的一部分，主要用于 Windows 平臺。OpenGL作為一種開源的跨平臺技術(shù)，贏得了眾多開發(fā)者的青睞。
然后是一個特殊的版本——OpenGL ES。它專為嵌入式計算機、智能手機、家用游戲機和其他設備而設計。它從 OpenGL 中刪除了許多舊的和無用的特性，同時添加了新特性。比如去掉矩形等多余的多邊形，只保留點、線、三角形等基本圖形。這使它能夠保持輕量級，同時仍然足夠強大以渲染漂亮的 3D 圖形。
而 WebGL 是從 OpenGL ES 衍生而來的。它專注于 Web 的 3D 圖形渲染。
下圖顯示了它們之間的關(guān)系：
2、WebGL 的歷史
從上圖可以看出，WebGL 已經(jīng)很老了。不僅因為它的存在時間長，還因為它的標準繼承自OpenGL。OpenGL的設計理念可以追溯到1992年，而這些古老的概念其實與今天GPU的工作原理很不相符。
對于瀏覽器開發(fā)者來說，他們需要適應GPU的不同特性，這給他們帶來了很多不便。雖然這些對于我們的上層開發(fā)者來說是不可見的。
從上圖我們可以看到，蘋果在 2014 年發(fā)布了 Metal。Steve Jobs 是 OpenGL ES 的支持者，他認為這是行業(yè)的未來。所以當時Apple設備上的游戲依賴于OpenGL ES。你玩過嗎？
但在喬布斯去世后，蘋果放棄了 OpenGL ES，開發(fā)了新的圖形框架 Metal。
微軟也在2015年發(fā)布了自己的D3D12[Direct3D 12]圖形框架。緊隨其后的是Khronos Group，你知道是誰嗎？
事實上，它是圖形行業(yè)的一個國際組織，類似于前端圈的 W3C 和 TC39。WebGL 是它的標準。甚至他們也逐漸淡化了 WebGL，轉(zhuǎn)而支持現(xiàn)在的 Vulkan。
到目前為止，Metal、D3D12 [Direct3D 12] 和 Vulkan 并列為三大現(xiàn)代圖形框架。這些框架充分釋放了 GPU 的可編程能力，讓開發(fā)者可以最大程度地自由控制 GPU。
還需要注意的是，當今的主流操作系統(tǒng)不再支持 OpenGL 作為主要支持。這意味著我們今天編寫的每一行 WebGL 代碼都有 90% 的機會不會被 OpenGL 繪制。它在 Windows 計算機上使用 DirectX 繪制，在 Mac 計算機上使用 Metal 繪制。
可以看出OpenGL已經(jīng)晚了。但這并不意味著它會消失。它繼續(xù)在嵌入式和科學研究等特殊領(lǐng)域發(fā)揮作用。
WebGL 也是如此，大量的適配工作使其難以向前推進。于是推出了 WebGPU。
3、什么是 WebGPU？
WebGPU 的目的是提供現(xiàn)代 3D 圖形和計算能力。它是前端的老朋友W3C組織制定的標準。與 WebGL 不同，WebGPU 不是 OpenGL 的包裝器。相反，它指的是當前的圖形渲染技術(shù)，一種新的跨平臺高性能圖形界面。
它的設計更容易被三大圖形框架實現(xiàn)，減輕了瀏覽器開發(fā)者的負擔。它是一個精確的圖形API，完全開放了整個顯卡的能力。不再是像 WebGL 這樣的上層 API。
更具體的優(yōu)點如下：
- 減少 CPU 開銷
- 對多線程的良好支持
- 使用計算著色器將通用計算 (GPGPU) 的強大功能引入 Web
- 全新的著色器語言——WebGPU Shading Language (WGSL)
- 未來將支持“實時光線追蹤”的技術(shù)
這里我挑出多線程支持來詳細說一下：
在 WebGL 中，你可以使用 OffscreenCanvas 進行多線程處理，但 Safari 尚不支持此功能。而且它的操作也很有限，你必須將整個 Canvas 的所有操作都轉(zhuǎn)移到單個 Worker 上。
webGPU 上下文可以由多個工作人員共享。這些worker只要在時間線上沒有互斥操作，都可以正常運行。這無疑帶 來了良好的開發(fā)體驗。
這是因為 WebGL 全局狀態(tài)的設置。它在設置狀態(tài)后立即執(zhí)行，這使得 WebGL 無法支持多線程。
而WebGPU用來Pipeline Object設置渲染管線中的相關(guān)信息。它分為兩個階段：“記錄命令”和“提交命令”。
“記錄命令”是一個純 CPU 進程。可以分別記錄在多個worker（多線程）中，然后提交到同一個隊列中。
“提交命令”就是讓GPU根據(jù)隊列中的命令順序執(zhí)行。
4、WebGPU的發(fā)展現(xiàn)狀
WebGPU 的 API 仍在開發(fā)迭代中，但我們可以在 Chrome Canary 中試用。
在目前的前端框架中，Three.js 已經(jīng)開始實現(xiàn) WebGPU 的后端渲染器，Babylon.js 計劃在5.x版本中支持 WebGPU。
5、結(jié)束語
我認為WebGPU取代WebGL是大勢所趨。而且我相信它在元宇宙場景中有很大的潛力，這很有趣不是嗎？
原文鏈接：http://www.bimant.com/blog/webgpu-is-webgl-killer/
