科普丨《計算機圖形學入門》學習筆記分享

為什麼“不是做’元宇宙’的公司“？

最近經常遇到這樣的情景：
“你們公司是做什麼的？”
“我們是做線上虛擬空間，&%&￥#￥%R&$%#%…”
“哦，你們做的就是那個元宇宙啊。”
“我們做的事跟“真正的元宇宙”有一定的關係，但其實我們覺得關係並不大。”
作為從業者，我們相信元宇宙、web3.0確實是未來，但目前硬件、軟件和應用場景都還不成熟，至於什麼時候能成熟，在我們這一代能不能成熟，我們並不知道，現階段的“元宇宙”，還只是一個初期概念。
當下熱衷於“元宇宙”概念的個人或者企業，目的不外乎：綁定熱點提高知名度，提升形象拉高產品或服務的售價，借勢概念炒高估值或股價。
但對於靈境至維這樣一個年輕的團隊，從創立之初我們就決定靠自身的核心競爭力去做有門檻的事，在市場上站著把錢掙到，並且在這個前提下做好了長期發展的規劃和準備，概念的紅利，我們確實不需要。

不做元宇宙，那我們在做些什麼？

靈境至維專注為品牌和藝術活動打造開放和連接的線上虛擬空間。每一個虛擬空間包含可漫遊的3D虛擬空間、虛擬形象，多媒體內容、社交網絡和多樣化的互動內容，這些虛擬空間相互連通，形成完整的虛擬社區和世界。

掃碼可進入OPPO MWC World虛擬空間

我們會用到的技術包括：虛擬空間、虛擬人、3D視覺、平面視覺、遊戲引擎、雲服務器、雲渲染、各種名交互技術等，為我們服務的客戶解決真實的痛點和問題，為品牌和用戶創造價值。

去年底我們上線了國內首個具有虛擬世界體驗的基於Web的線上虛擬科技大會——OPPO未來科技大會，活動為期2天，線上空間訪問量超過200萬，活動結束後2個月，空間訪問量仍有近50萬。在未來我們將提供包括針對會議活動、音樂節、藝術展和線上社區等多種不同場景類型的虛擬空間服務。

相較於追逐熱點，我們更熱衷於追求知識，享受用知識去實現理想和夢想的過程，並堅信一定可以實現。當我們的才華撐不起我們野心的時候，靜下心來學習是我們唯一的選擇。

計算機圖形學基礎內部學習分享

計算機圖形學跟當下的許多技術和熱點息息相關，遊戲、影視、設計建模、計算機圖形界面、AR、虛擬人、動漫等等，我們用戶做虛擬的空間的“實時渲染”這塊要想做好，需要知其所以然，這個學科就是基礎。

這是我們內部的一次學習分享，分享人是靈境至維團隊的前端主程，學習內容是加州大學聖芭芭拉分校閻令琪教授在GAMES平台上開設的《GAMES101: 現代計算機圖形學入門》價格（點擊可跳轉至觀看完整價格）‌，分為22講，總時長約28小時，根據價格內容以及分享人的個人理解，將分為以下7個主要部分來進行分享。

這門價格是國內應該是首個講底層原理的價格（之前只有國外），非常感謝閻令琪教授為這個領域在中國計算機圖形學發展做出的貢獻。

以下就是這次價格分享的內容實錄：

一、圖形學概述

這部分主要介紹計算機圖形學的一些基礎概念。

1. 什麼是計算機圖形學(CG)？和計算機視覺(CV)、數字圖像處理(DIP)有什麼區別？

事實上，圖形學發展到現在，內容已經變得十分豐富，與很多學科都有交叉，目前並沒有一個很好的定義能夠準確解答這個問題。

因此這裡從數據處理的角度出發，說一下圖形學與幾種相似學科的區別，便於大家理解。

首先，圖形學是一種將二維或三維的圖形數據，經過一系列數學算法，轉化為顯示設備上柵格圖像的科學，核心概念是由數據到圖像，其主要應用領域有電子遊戲、影視、設計建模、計算機圖形界面等。

計算機視覺則與之正好相反，是通過給定的圖像，提取其中的信息，轉化為計算機可分析的數據，核心概念是由圖像到數據，主要應用領域有人臉識別、無人駕駛等。

數字圖像處理則是一門將圖像轉成數字信號，由計算機處理的科學，核心概念可以大致理解為由圖像到圖像，主要應用領域有圖片美化、航天航空、顯微圖像分析等。

2. 圖形學有哪些子領域？

這裡根據中科大教授劉利剛老師2013年發表的一篇文章為參考，將圖形學的主要研究領域分為建模、渲染、動畫、人機交互，這門課主要涉及到前三種領域，重點介紹了圖形學渲染基礎。其中渲染根據渲染速度可分為實時渲染和離線渲染；根據風格可分為真實感渲染（也叫基於物理的渲染）和非真實感渲染(NPR)。

3. 為什麼要學計算機圖形學？

這個問題的答案就因人而異了，但歸根結底都是為了讓顯示的視覺效果達到賞心悅目的程度。

二、線性代數基礎

這部分主要介紹了學習圖形學所需的一些線性代數基礎，其中主要是利用向量和矩陣，對數據進行變換操作。

1. 向量

一個同時具有大小和方向，且滿足平行四邊形法則的幾何對象。

1.1 單位向量

指長度為1的向量

1.2 向量加法

1.3 向量點乘

性質：滿足結合律和分配律和交易所律笛卡爾公式：

幾何意義：

1.4 向量叉乘

性質：滿足結合律和分配律，但不滿足交易所律笛卡爾公式

幾何意義：求法線的內外方向

2. 矩陣

Wiki：將一些元素排列成若干行，每行放上相同數量的元素，就是一個矩陣

2.1 矩陣乘法

性質：滿足結合律和分配律，但不滿足交易所律矩陣與矩陣相乘（A的列數必須等於B的行數）

矩陣與向量相乘

2.2 轉置矩陣

2.3 逆矩陣

2.4 正交矩陣（wiki）

性質：矩陣轉置等於矩陣的逆

幾何意義：
行（列）之間兩兩正交，因此各個行（列）可表示為坐標系的坐標軸，通常用於表示線性變換。

三、圖形渲染管線

圖形渲染管線是實時渲染的底層工具。其最主要的功能就是根據一個虛擬的相機、3D的物件、光照等信息，渲染生成一個2D的圖片。

管線根據概念大致可分為四個階段（非標準，以RRT書中為參考）：

應用階段（價格中沒有提及）；幾何處理階段；光柵化階段；像素處理階段。

需要注意的是，其中每個階段本身通常又可分為幾個小的階段。以下分別對這四個階段進行梳理。

1.應用階段

跟之後的幾個階段需要硬件參與的情況不同的是，應用階段是全部通過軟件實現的，軟件開發者對這一階段有完全的控制。這一階段執行的功能通常有：碰撞檢測、輸入檢測、動畫等。

在應用階段的結尾，CPU會將模型數據傳遞給GPU，這一過程被成為Drawcall。

2.幾何處理階段

幾何處理階段的主要目的是將3D空間的數據轉化到屏幕空間上，其中最主要的步驟就是MVP變換

2.1模型變換（Modeling Transformation）

模型變換的目的是將需要處理的幾何體頂點/法線數據統一到世界坐標系下，這個過程主要會應用到上一章節提到的線形代數的知識。

齊次坐標（引入齊次坐標的目的是為了將仿射變換統一到一個矩陣中）

縮放矩陣

平移矩陣

旋轉

– 繞坐標軸旋轉

– 繞任意軸旋轉（羅德里格旋轉公式）

2.2視圖變換（View/Camera Transformation）

視圖變換的目的是規範化相機在世界空間下的位置和朝向。當然，如果只移動相機而不移動物體，則會導致相機與物體的相對位置發生變化，因此在變換相機的同時，也要改變物體。

規範相機矩陣

以右手坐標係為例，需要將相機位置e移到原點，相機朝向g正對z軸負方向，相機頂部t正對y軸正方向，g與t的叉乘方向為x軸正方向。然而按照這個思路很難做變換矩陣，因此需要巧妙借用正交矩陣的特性：轉置矩陣=逆矩陣，進行逆變換：

經過視圖變換的相機與物體如圖

2.3 投影變換（Projection Transformation）

投影變換的目的就是將三維坐標投影成二維，其中涉及兩種類型：正交投影和透視投影。

正交投影的視圖體通常為一個矩形框，正交投影將其轉成一個單元立方體。其主要特點就是變換後平行線要依然保持平行。這種變換是平移和縮放的組合。

透視投影比較複雜，它的視圖體是一個截錐。應用透視投影會讓物體有現實世界中“近大遠小”的現象。求透視矩陣的思路是先將其轉化為正交投影，再進行求解。那麼目的就是找出透視轉化正交的矩陣，這裡直接貼結論

求出轉化矩陣後，還有個問題，轉化後的正交矩陣的top、bottom、left、right怎麼求呢？

3.光柵化階段

經過幾何變換步驟，頂點已經能夠投影到屏幕上了。而光柵化的目的則是將空間中連續的坐標離散化為屏幕上一個個的像素點。其主要步驟可以分為：

1）使用包圍盒等算法求出圖像區間；

2）使用叉乘或漸進增量等方法對像素進行遍歷，求幾何內部的點。

這個步驟也會產生一些問題，例如圖像的“鋸齒”問題，其生成原因是由於信號的採樣頻率跟不上圖像變化，業界目前也有一些相對可行的優化算法，例如：MSAA（模糊邊界超採樣）、FXAA（基於數字圖像處理優化）、TAA（基於上一幀對比數據優化）。

4.像素處理階段

像素處理階段分為著色階段和合併階段，價格中主要對著色進行了講解，而著色的目的就是計算出每個採樣像素點的顏色是多少並將結果儲存起來，要考慮的因素通常有：光照、著色頻率、紋理。

4.1光照模型

當光照射到物體表面時,物體對光會發生反射、透射、吸收、衍射、折射、和乾涉，其中被物體吸收的部分轉化為熱，反射、透射的光進入人的視覺系統，使我們能看見物體。為模擬這一現象,我們建立一些數學模型來替代複雜的物理模型，這些模型就稱為光照模型。

光柵化技術的特點是只能考慮單個像素的顏色值，而不能考慮這個像素受其它像素影響的光照部分。基於此的光照模型被成為局部光照模型，價格中介紹了現階段比較常用的一種局部光照模型——BlinnPhong光照模型。

BlinnPhong光照模型主要由三部分組成：Diffuse（漫反射）、Specular（高光）、Ambient（環境光）。

Diffuse

Specular

Ambient

4.2著色頻率

知道光照模型等式後，還需要了解模型上每個著色點的分佈，這裡就需要引入著色頻率的概念，常見的著色頻率有三種：Flat Shading、Gouraud Shading、Phong Shading。分別對應以下三種樣子：

從左到右的算法消耗依次增加，需要注意的是，Phong Shading雖然可以讓模型表面看上去更為光滑，但是卻解決不了地面模型邊界棱角的問題。

4.3紋理（Texture）

解決了光照模型和著色頻率的問題後，我們已經能夠模擬光線照到物體上的現象了，那麼接下來如何描述物體本身的複雜材質呢？這裡就要引入紋理的概念了，紋理就是使用預處理的數據（大多數是圖片）豐富3D表面的表現。

如何將2D紋理對應到3D模型的表面上？

通過UV（紋理坐標）來實現，實現上UV通常都是通過3D設計工具（如c4d、blender）實現的。

非頂點位置的屬性值如何計算？

插值，插值的實現主要用到重心坐標。

屏幕分辨率和紋理分辨率不一致怎麼處理？

– 當1屏幕像素

– 當1屏幕像素>1紋素（texel），也就是紋理圖片過於清晰（通常出現在場景遠處），會產生摩爾紋現象。常用的解決方案有Mipmap、Anisotropic Filtering、EWA（橢圓加權平均）過濾。

部分紋理類型。

– 漫反射紋理

– 環境紋理

– 凹凸/法線紋理

– AO（環境遮擋）紋理

5. 圖形渲染管線作業

四、幾何圖形

正如渲染的目的是要將一個三維物體渲染成2D的畫面，幾何圖形部分的研究目的就是如何通過數學工具表示各種三維物體。

1. 表示形式

幾何的數學表示形式可分為隱式表示和顯示表示兩種：

1.1 隱式表示

隱式表示則是不通過笛卡爾坐標來表示幾何圖形，例如：

Algebraic surface（代數曲面）

Constructive solid geometry （構造實體幾何）

SDF（有距離函數）

Level Set（水平集）

Fractals（分形）

隱式表示優點在於根據給定點與隱式公式間的大小關係，可以很方便知道點是否在幾何體的內部。缺點則是不方便進行採樣。而顯示表示的優缺點則與之相反。

1.2 顯示表示

顯示表示則通常有以下類型

Point Cloud（點雲）

Polygon Mesh（Polygon網格）

The Wavefront Object File (.obj) Format

2. 曲線和曲面

構造複雜幾何體最核心的問題是表示複雜的曲線和曲面。其中常見的算法有Bézier、B-splines、NURBS。價格中著重介紹來Bézier曲線與Bézier曲面。

2.1 Bézier曲線

屬性

幾何表示（de Casteljau Algorithm（德卡斯特里奧算法））

代數表示（伯恩斯坦多項式）

多段貝塞爾曲線如何保持平滑？

1)三點一線

2)兩邊長度相等

2.2 Bézier曲面

曲面無非就是將曲線進行升維，在做插值的時候多考慮一維的信息。

3. 網格處理

網格指的是三維Polygon網格模型，以下簡稱為“網格”。簡單來說，可以給網格下一個簡單定義：由Polygon集合定義的，用以表示三維模型表面輪廓的拓撲和空間結構稱為“網格”，英文稱作“polygon mesh”或“mesh”。

而我們在項目中使用網格模型時，經常會存在面過多或者過少的情況，這時就需要對網格進行處理，常見的網格處理形式分為三種：Mesh subdivision（網格細分）、Mesh simplification（網格簡化）、Mesh regularization（網格規範化）。

3.1 網格細分

網格細分則是將相對低面的模型轉化為多面。

目前常見有兩種實現算法：1. Loop細分：針對三角面的細分方式，將一個三角面轉化為四個三角面。 2.Catmull-Clark細分：針對任意形狀的細分，經過一次細分可將原本不是四邊的面轉化為四邊面。

3.2 網格簡化

網格簡化則是將相對高面的模型轉化為低面。

目前比較常見的算法是基於二次度量誤差

二次度量誤差（QEM，quadric error metric）指的是當前頂點到其鄰域所有三角面（也稱關聯平面）的距離平方和。過程：

1)統計所有參與邊折疊的邊

2)計算所有頂點的QEM(v)，計算所有邊的QEM(e)=QEM(v1)+QEM(v2)

3)根據QEM(e)的排序找到最小的QEM(e)的邊

4)折疊該邊並找到最優的QEM的新頂點v’，刪除v1，v2，和相關face，更新v’的QEM為QEM(v1)+QEM(v2)，更新相關聯的QEM(e)

5)重複3)、4)直到要求達到要求。

3.3 網格規範化

這塊價格中只是簡單提及，通過查資料了解到是與3D重建等技術相關，遊戲這塊用的並不多。

五、光線追踪

之前在圖形渲染管線板塊有介紹BlinnPhong光照模型，其中有提到這種局部光照模型沒辦法處理全局光線傳播的效果，而現實世界中的場景是經過無數次光線傳播再傳入人眼的。因此，要想渲染出更加逼真的效果，就需要引入光線追踪的算法。

顧名思義，光線追踪算法中對於光線的定義是非常重要的，這裡圖形學中採用的是幾何光學的定義，主要把光線做了以下定義：

1)光線是沿直線傳播的；

2)光線間不發生碰撞；

3)光線到觀察點的路徑是可逆的。

根據第三點光路可逆的法則，我們就可以把光線的起點定在人眼（攝像機），以此來描述光線追踪的步驟。

1. Ray Casting

從攝像機想投影平面的每一個像素點發出一條射線，通過射線尋找與物體的交點，再將交點與光源進行連線判斷交點是否在陰影中。

2. Recursive (Whitted-Style) Ray Tracing

Ray casting的過程仍然是局部的，那麼如何引入全局概念呢？這裡就用到了經典的Whitted-Style路徑追踪算法。算法中定義每一個交點的顏色貢獻是由直接光照、間接反射光照和間接折射光照（可能）組成的，將這些部分進行權重累加，再使用BlinnPhong模型進行著色，則得到投影平面上最終點的顏色。

3. 光線表示方程

將每條光線想像成一條射線，則這條射線由三部分組成：

起點– o方向– d發射出去的時間（長度）- t

4. 光線求交

4.1 與隱式表面求交

4.2 與顯示表面求交

更快的求交方法（Möller Trumbore Algorithm）

補充信息：

光線追踪這塊這篇文章寫的非常詳細：https://blog.csdn.net/qq_38065509/article/details/106299336?spm=1001.2014.3001.5502

4.3 加速結構

遍歷每一個面求交點的性能消耗是非常恐怖的，加速的大體思路就是不直接遍歷面數，而是使用包圍盒等算法進行加速。

軸對齊包圍盒

有了包圍盒還不夠，我們還可以對場景進行分區，常見的分區算法有以下幾種

Oct-Tree（八叉樹）：每次都切割八份

KD-Tree：每次都沿軸線切割一次

BSP-Tree：按一定算法沿任意軸切一刀

BVH（推薦）：在KD-Tree的基礎上以包圍盒為單位進行分割

BVH的一些優化：每次都分割最長的邊、分割點以中心物體為參照、當節點中包含很少的物體時則停止。

5. 現代光線追踪算法

上面描述的whited-style光線追踪模型雖然將全局光線傳播的算法引入到光照模型中，但仍然不夠準確，原因有二：

1）光線傳播中只考慮當前交點反射和折射出去的光線，而沒有追踪漫反射的光線；

2）著色採用的還是BlinnPhong這個經驗模型，無法精確的模擬真實物理的現象。

針對以上的問題，我們就要引入真實的物理概念來定義光線追踪的現象，因此就有了基於物理的渲染（PBR），而輻射度量學就是這樣一套測量光線能量的學科。

5.1 輻射度量學

一些比較重要的物理概念：

Radiant Energy（輻射能）：表示能量，單位：J（焦耳）。 Radiant flux（輻射通量/功率）：單位時間的輻射能量，單位：W（瓦特）/ lm（流明）。 Radiant intensity（輻射強度）：每單位立體角的輻射通量，單位：W·sr−1。 Irradiance（輻照度）*：入射表面的輻射通量（不帶方向）（從所有方向到達某一點的能量之和），單位：W·m−2。 Radiance（輻射率）*：每單位立體角每單位投射表面的輻射通量（帶方向），單位：W·sr−1·m−2。