介紹

大家好，本系列從0開始學習WebGPU API，并給出相關的demo。

上一篇博文
WebGPU學習系列目錄
下一篇博文
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。

• 技術棧

  • Javascript語言

  • 使用原生WebGPU API

能給你帶來什么收益？

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

內容規劃

本系列分成三個部分：

第一部分（已經完成）

一個一個地學習官方的sample（我fork到本地了），掌握基礎的API調用，講解相關的概念

第二部分（開始寫了）

學習光線追蹤，并實現對應的sample

第三部分（沒有開始寫）

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