WebGPU入門
隨著WebGPU日益成熟，本季度將贏來(lái)WebGPU正式版本的發(fā)布。關(guān)注WebGPU開發(fā)的小伙伴也越來(lái)越多。筆者也希望邊學(xué)邊記錄分享給大家。
WebGPU 簡(jiǎn)介
由W3C組織定義的一個(gè)新的API標(biāo)準(zhǔn)，用于在Web上使用Javascript來(lái)控制GPU計(jì)算和繪制。該標(biāo)準(zhǔn)獲得了目前所有主流廠商的支持，由大家一起參與WebGPU的發(fā)展。有望成為一個(gè)全平臺(tái)支持的標(biāo)準(zhǔn)。
WebGPU擬補(bǔ)了過(guò)去WebGL的各種不足和背負(fù)的各種歷史包袱，其主要接入現(xiàn)代圖形API（Direct3D、Vulkman、Metal）?？傊啾萕ebGL，其會(huì)更快、更強(qiáng)、更靈活，更符合Web現(xiàn)代的開發(fā)標(biāo)準(zhǔn)。
WebGL與WebGPU的那些事兒
WebGL相當(dāng)于是在使用十幾年前的OpenGL框架體系。而OpenGL本身就已經(jīng)非常古老，有將近30年歷史了。WebGL僅僅只實(shí)現(xiàn)了OpenGL ES 2.0和3.0的標(biāo)準(zhǔn)，已經(jīng)無(wú)法滿足現(xiàn)代GPU框架體系，也無(wú)法滿足現(xiàn)在高性能的計(jì)算和渲染需求。蘋果公司在2018年宣布拋棄OpenGL整個(gè)框架。在2015年前后，蘋果、微軟、Khronos分別推出了基于全新GPU框架的Metal（2014年）、Direct3D 12（2015年）、Vulkan（2016年），現(xiàn)在三者被大家統(tǒng)稱為為現(xiàn)代圖形學(xué)API。W3C在制定新的Web圖形學(xué)標(biāo)準(zhǔn)也完全參考了新的三個(gè)圖形學(xué)API，拋棄了OpenGL的整個(gè)框架。
- WebGL1.0標(biāo)準(zhǔn)，2011 年定制，基于OpenGL ES2.0在Web上的實(shí)現(xiàn)
- OpenGL ES2.0是OpenGL 2.0在移動(dòng)端的具體實(shí)現(xiàn)
- 相當(dāng)于WebGL對(duì)標(biāo)的是2004年的OpenGL的標(biāo)準(zhǔn)
- WebGL2.0標(biāo)準(zhǔn)，對(duì)標(biāo)OpenGL 3.2 在2009年的實(shí)現(xiàn)
WebGPU支持現(xiàn)狀
- Chrome Google 基于 Dawn 實(shí)現(xiàn)，v94-101 版本已經(jīng)提供桌面端支持
- FireFox Mozilla 基于 gfx-rs 實(shí)現(xiàn)，Nightly Build版本支持桌面端和Android端
- Safari Apple 基于 WebKit 實(shí)現(xiàn)，開發(fā)者預(yù)覽版支持IOS、Mac
開發(fā)需求
- 開發(fā)工具
- Chrome Canary支持最新的 WebGPU API
- Visual Studio Code 對(duì) WebGPU 相關(guān)生態(tài)支持比較完善
- Vite 速度上較快的編譯、打包工具
- 語(yǔ)言
- TypeScript 利用其類型特性來(lái)檢查代碼是否使用正確，節(jié)省找文檔時(shí)間
- WGSL WebGPU 新的著色器語(yǔ)言
- HTML/CSS
- 環(huán)境
- Node.js
- npm或yarn
- CMD/Terminal
工程搭建
-
yarn create vite創(chuàng)建一個(gè)項(xiàng)目，根據(jù)提示輸入項(xiàng)目名稱并選擇項(xiàng)目模版vanilla-ts -
cd 項(xiàng)目名稱進(jìn)入到項(xiàng)目目錄 -
yarn安裝依賴 -
yarn add @webgpu/types -D安裝webgpu的類型支持 - 在
tsconfig.json配置文件中為compilerOptions增加"types": ["vite/client", "@webgpu/types"] -
yarn run dev啟動(dòng)項(xiàng)目，根據(jù)提示在瀏覽器訪問(wèn)預(yù)覽地址
接下來(lái)所有的代碼操作入口將從
src/main.ts開始
判斷瀏覽器是否支持WebGPU
// 判斷WebGPU是否可用，根據(jù)定義
const gpu = navigator.gpu;
if(gpu === undefined){
throw new Error("瀏覽器不支持WebGPU");
};
