大家好~本課程為“真實感渲染”的線上課程，從0開始，介紹相關的圖形學算法和數學基礎，給出詳細的數學推導、偽代碼和實現代碼，最終帶領大家開發出基于物理的渲染器

線上課程資料：

本節課錄像回放1

本節課錄像回放2

加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學習系列
• WebGPU學習中文資料
• WebGPU規范
• webgpu-samples

任務：準備開發環境

• 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文件，把格式打亂（如縮進代碼）；然后格式化代碼，應該能夠正確格式化

主問題：如何使用光柵化管線實現“繪制一個三角形”

• WebGPU坐標系介紹
  右手坐標系
  

• 已知一個三角形的三個頂點（2D坐標，z為0），如何通過光柵化管線渲染出一個三角形？
  

結學

• 如何通過光柵化管線渲染出一個三角形？

任務：使用光柵化管線實現“繪制一個三角形”

• 請實現代碼
  答：待實現的代碼：exec，實現后的代碼：code
• 介紹代碼實現
  答：參考資料：WebGPU學習（二）: 學習“繪制一個三角形”示例
• 請每個同學運行代碼，渲染出一個三角形
  答：在項目根目錄下，輸入：

node lessons/2_triangle/code/index.js 

應該能看到運行結果：

• 移植該程序到WebGPU標準需要哪些修改？

總結

• 請回顧本節課的內容？
• 回答開始的問題？

參考資料

• WebGPU學習系列
• 《WebGL編程指南》
• WebGPU規范

謝謝你~