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