真實感渲染：WebGPU介紹和使用光柵化管線繪製一個三角形
大家好~本課程為“真實感渲染”的線上課程，從0開始，介紹相關的圖形學演算法和數學基礎，給出詳細的數學推導、虛擬碼和實現程式碼，最終帶領大家開發出基於物理的渲染器
線上課程資料：
加QQ群，獲得ppt等資料，與群主交流討論：106047770
本系列文章為線上課程的覆盤，每上完一節課就會同步釋出對應的文章
本課程系列文章可進入索引檢視：
真實感渲染系列文章索引
回顧相關課程內容
- 為什麼要學習真實感渲染？
為什麼要學習本課
- WebGPU是什麼？
- WebGL和WebGPU相比有什麼區別？
- 如何用WebGPU繪製一個三角形？
主問題：WebGPU是什麼
- WebGPU是什麼？
答：Web端圖形API。瀏覽器封裝了現代圖形API（Dx12、Vulkan、Metal），提供給Web 3D程式設計師WebGPU API - 它有什麼用？
答：
主問題：如何渲染
-
在哪裡渲染？
答：GPU -
有哪些渲染管線？
答： -
每個渲染管線分別用於什麼用途？
答：光柵化管線用於渲染；光追管線用於光線相交計算，實現了硬體光線相交計算加速；計算管線用於通用GPU計算，也可以實現光線相交計算，還可以實現遮擋剔除等計算
主問題：WebGPU和WebGL是什麼關係
-
WebGL是什麼？
答：和WebGPU一樣，都是Web端圖形API -
它對應本地端的什麼圖形API？它的版本是如何演進的？
答： -
WebGL和WebGPU相比有什麼區別？
答： -
WebGPU相比WebGL有什麼優勢？
答：- WebGPU提供了對GPU更大範圍地控制，從而能提高效能
- WebGPU更好地支援多執行緒
- WebGPU支援計算管線，從而讓程式設計師能使用GPU進行計算
- WebGPU與WebGL2的區別很大，兩者不容易相容。如果要從WebGL1升級，最好直接升級到WebGPU，一勞永逸
- 各大瀏覽器都會支援WebGPU，而IOS不支援WebGL2
主問題：如何學習WebGPU
任務：準備開發環境
- WebGPU Node開源專案是幹什麼的？
答：執行在Node.js環境中，底層封裝了Vulkan等本地圖形API，上層提供WebGPU API - 為什麼要用WebGPU Node開源專案而不是WebGPU標準?
答：因為它有下面的優點：- WebGPU標準目前不支援光追管線，但是WebGPU Node開源專案支援它（需要RTX顯示卡）
- WebGPU標準使用的WGSL著色器語言缺少很多特性；而WebGPU Node開源專案使用GLSL，更成熟
然而它也有缺點： WebGPU Node提供的WebGPU API版本較老（2020年的版本）
-
我們使用什麼管線？
答：考慮到大多數同學的電腦沒有RTX顯示卡，所以我們主要使用計算管線而不是光追管線來實現光線追蹤 -
安裝nodejs
Node.js 是能夠在伺服器端執行JavaScript 的開放原始碼、跨平臺 JavaScript 執行環境
下載最新版本，版本至少為13及以上
在Windows上安裝時務必選擇全部元件，包括勾選Add to Path
檢查npm
npm是Node.js的包管理工具，通過下面的方式來檢查是否已安裝：
//應該能打印出版本號
npm -v
- 安裝VS Code
進入官網下載並安裝
- 準備專案程式碼
-
clone本課程的Github專案(HTTPS clone)：https://github.com/yyc-git/PotorealisticRenderEdu-3
-
clone 後，請在根目錄上執行：yarn
-
沒有yarn的同學請先執行：npm install --global yarn
-
每個同學可以在專案中新建“mine/”資料夾（已經被git ignore），用於存放自己的檔案
-
在專案根目錄下，輸入：
node lessons/2_triangle/code/index.js
應該能看到執行結果：
- Shader languages support for VS Code
安裝這個用於GLSL高亮的VS Code外掛
- Shaderc GLSL Linter
安裝這個用於GLSL編譯檢查的VS Code外掛：
1.下載shaderc，選擇對應的作業系統的版本，解壓
（在cloud storage中，可以找到歷史版本）
2.VS Code中安裝Shaderc GLSL Linter外掛
3.設定它：
"glslcPath": "your-install-dir/bin/glslc"(e.g. /Users/yang/File/install/bin/glslc)
"glslcArgs": "--target-env=vulkan1.2"
4.驗證：
開啟專案的scene.vert檔案，隨便寫一些錯誤的glsl程式碼，應該會有紅線出現。
按f8後出現錯誤資訊，如下圖所示：
- Clang-Format
安裝這個用於GLSL格式化的VS Code外掛：
1.終端上執行：
npm install -g clang-format
2.VS Code中安裝Clang-Format外掛
3.設定它:
"executable": "your-global-node_module-dir/clang-format/bin/your-os-dir/clang-format"
(e.g. /usr/local/lib/node_modules/clang-format/bin/darwin_x64/clang-format)
4.驗證：
開啟專案的scene.vert檔案，把格式打亂（如縮排程式碼）；然後格式化程式碼，應該能夠正確格式化