介紹
大家好，本系列從0開始學習WebGPU API，並給出相關的demo。
上一篇博文
WebGPU學習系列目錄
下一篇博文
WebGPU學習（二）: 學習“繪制一個三角形”示例
WebGPU介紹
WebGL是老的Web 3D圖形API，它的版本演進如下圖所示：
WebGPU是最新的Web 3D圖形API，與WebGL的對比為：
瀏覽器封裝了現代圖形API（Dx12、Vulkan、Metal），提供給Web 3D程序員WebGPU API。
WebGPU概要：
為什么要學習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，學習成本低；
后者的好處是新語言功能更強大，性能更好。
- 參考資料
WebGPU 開發狀態與計划-2018.11.17
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
大家可以使用我下載的Chrome Canary。
對於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。
- Chrome Canary
-
技術棧
-
Javascript語言
-
使用原生WebGPU API
-
能給你帶來什么收益？
- 從0學習WebGPU，熟悉原生API
- 縮小與PC端最新的3D技術的差距（學了WebGPU，就只與目前最新的DX12 RTX差半代了！而WebGL2只相當於DX10）
- 更新思維模式，學習最新的設計理念（WebGPU相比WebGL相當靈活和模塊化，如果要被封裝成引擎的話需要一些新的設計思路）
內容規划
本系列分成三個部分：
第一部分（已經完成）
一個一個地學習官方的sample（我fork到本地了），掌握基礎的API調用，講解相關的概念
第二部分（開始寫了）
學習光線追蹤，並實現對應的sample
第三部分（沒有開始寫）
綜合運用所學內容，實現一些demo（如gpu driven render pipeline）