WebGPU學習（一）: 開篇

介紹

你們好，本系列從0開始學習WebGPU API，並給出相關的demo。

上一篇博文
WebGPU學習系列目錄
下一篇博文
WebGPU學習（二）: 學習「繪製一個三角形」示例

WebGPU介紹

WebGPU至關於DX12/Vulkan，能讓程序員更靈活地操做GPU，從而大幅提高性能。

爲何要學習WebGPU

• WebGPU更好地支持多線程

• WebGPU支持compute shader，從而讓程序員能利用GPU實現不少優化

• WebGPU與WebGL2的區別很大，二者不容易兼容。若是要從WebGL1升級，最好直接升級到WebGPU，一勞永逸

• WebGPU是標準，各大瀏覽器都會支持。不像WebGL2，蘋果直接不支持。

• 目前WebGPU雖然還未正式發佈，但已經比較成熟了，也有相關的Demo可供學習

WebGPU完善程度

自從2017年提出WebGPU後，已經通過兩年的發展。
目前Chrome和Safari支持得比較好，基本功能都有了（好比可以繪製pbr材質的模型，支持compute shader等），並且已經能夠在MacOS中運行。

Babylonjs已經支持了WebGPU，詳見WebGPU 文檔。

不過WebGPU對於shader使用哪一種方案尚未肯定：
在Chrome中，使用4.5版本的glsl ，須要經過官方提供的第三方庫將其轉成二進制碼（SPIR-V）；
在Safari中，直接使用新的語言WSL，不須要轉換。

前者的好處是咱們熟悉glsl，學習成本低；
後者的好處是新語言功能更強大，性能更好。

• 參考資料

Implementation Status
WebGPU and WSL in Safari
WebGPU and WSL in Web Inspector
Babylonjs->WebGPU 文檔
webgpu-samples for Chrome (uses GLSL via SPIR-V)
WebKit/Safari Demos (uses WSL)
gpuweb->issues

準備開發環境

目前只能在MacOS高版本中運行WebGPU（我以前是MacOS 10.10版本，運行不了WebGPU！升級爲MacOS Catalina就能夠運行了！！！）。

對於Chrome：
下載最新的Chrome Canary，而且打開 chrome://flags/#enable-unsafe-webgpu

對於Safari：
下載最新的Safari Technology Preview，選中 Safari → Preferences → Advanced → Develop menu→ Experimental Features → WebGPU

WebGPU學習資料

目前學習資料很是少，屬於早期探索階段～

WebGPU學習中文資料
WebGPU: An Explicit Graphics API for the Web
Get started with GPU Compute on the Web
WebGPU API規範

本系列技術選型

• 開發環境

  • Chrome Canary
    由於Chrome市場佔用率更高，並且shader使用glsl更簡單，因此我使用Chrome Canary。

• 技術棧

  • Javascript語言

  • 使用原生WebGPU API

能給你帶來什麼收益？

• 從0學習WebGPU，熟悉原生API
• 縮小與PC端最新的3D技術的差距（學了WebGPU，就只與目前最新的DX12 RTX差半代了！而WebGL2只至關於DX10）
• 更新思惟模式，學習最新的設計理念（WebGPU相比WebGL至關靈活和模塊化，若是要被封裝成引擎的話須要一些新的設計思路）

內容規劃

本系列分紅三個部分：

第一部分

一個一個地學習官方的sample，掌握基礎的API調用，講解相關的概念

第二部分

學習進階內容（如indirect draw、ray tracing等），並實現對應的sample

第三部分

綜合運用所學內容，實現一些demo（如gpu driven render pipeline）