前言

隨著技術(shù)的發(fā)展，基于 GPU 的渲染技術(shù)得到了廣泛應(yīng)用，日常生活中常見(jiàn)的 3D 動(dòng)畫(huà)和游戲都是通過(guò)計(jì)算機(jī)渲染技術(shù)來(lái)實(shí)現(xiàn)。當(dāng)前主要的 3D 渲染模型包括光柵化渲染和光線追蹤兩大類(lèi)，本文主要圍繞光柵化渲染進(jìn)行介紹，描述了簡(jiǎn)單場(chǎng)景下3D渲染過(guò)程，主要幫助讀者了解基于光柵化的 3D 渲染原理及過(guò)程。本文為系列文章，并在下一篇系列文章中以 Intel Gen12 為例，講述 GPU 一些基本硬件單元及如何利用硬件加速渲染過(guò)程。希望通過(guò)這種軟件計(jì)算 + 硬件實(shí)現(xiàn)的方式，讓大家了解 GPU 3D 渲染原理及過(guò)程。

在開(kāi)始正式的介紹前，有以下幾點(diǎn)說(shuō)明：

在渲染過(guò)程中，涉及到向量、矩陣等數(shù)學(xué)知識(shí)不再闡述。在后面用到的時(shí)候會(huì)有提及。

文中選擇了一個(gè)簡(jiǎn)單的模型場(chǎng)景，過(guò)程也盡可能簡(jiǎn)化。旨在重點(diǎn)講述光柵化流程，便于讀者理解。

推薦課程 GAMES101，文章后面用到的一些圖片出自該課件。

光柵化過(guò)程

圖0 光柵化示意圖

圖0 是光柵化的一個(gè)簡(jiǎn)易圖，其中光柵化主要完成以下兩個(gè)功能：

將幾何圖元（三角形/多邊形）投影到屏幕上

將投影之后的圖元分解成片段

模型建立

下文開(kāi)始舉例說(shuō)明光柵化過(guò)程，為了更簡(jiǎn)單的說(shuō)明光柵化，我們選用相對(duì)簡(jiǎn)單的模型，在三維空間中存在兩個(gè)三角形，其中三角形1 三個(gè)頂點(diǎn)坐標(biāo)分別為(-2, 0, -2)、(2, 0, -2)、(0, 2, -2)，三角形2 三個(gè)頂點(diǎn)坐標(biāo)分別為(-1, 0.5, -20)、(2.5, 1, -20)、(3, -1.5, -20)，之所以后面三角形 z 絕對(duì)值比較大，是為了后面觀察透視投影近大遠(yuǎn)小的效果。在模型中，除了被觀察物體，還需要確認(rèn)觀察點(diǎn)的位置，這里將相機(jī)放在位置(0, 0, 0)，觀察方向是 z 軸負(fù)方向（z-），向上向量為 y 軸正向（y+)。模型如圖1所示：



圖1 模型頂視圖

物體和相機(jī)的位置已經(jīng)放好了，那么我們接下來(lái)要做的就是要將相機(jī)實(shí)際看到的內(nèi)容最終顯示到屏幕上。模型是三維的，而最終的成像是二維，所以這其中必然要有投影操作。

正交投影和透視投影

先來(lái)看一下透視投影和正交投影的效果圖：

圖2 透視投影 & 正交投影

對(duì)比正交投影和透視投影效果可以發(fā)現(xiàn)，透視投影的結(jié)果會(huì)有近大遠(yuǎn)小的效果，而正交投影不會(huì)。正交投影中，以平行線投射方式投影，在工程制圖等場(chǎng)景應(yīng)用廣泛。透視投影這種近大遠(yuǎn)小的效果和人眼成像效果基本一致，后面主要針對(duì)透視投影講解。也正是因?yàn)檫@種效果，才有了"道理我都懂，可是為什么鴿子這么大"這個(gè)梗。綠色的球在視野之外，會(huì)被裁剪掉。透視投影本質(zhì)就是對(duì)一個(gè)平截頭體及平截頭體里的物體（圖2左半邊虛線內(nèi)部分，包含紅球和黃球）做變換，這時(shí)候平截頭體會(huì)被壓成長(zhǎng)方體(圖3-1)，變換后的物體也包含在這個(gè)長(zhǎng)方體中，最終長(zhǎng)方體標(biāo)準(zhǔn)化生成[-1, 1] ^ 3標(biāo)準(zhǔn)正方體(圖3-2)，然后再針對(duì)[x, y]平面做投影，投影過(guò)程中z軸作為深度覆蓋參考。

圖3-1 透視壓縮



圖3-2 坐標(biāo)標(biāo)準(zhǔn)化

再看下面兩個(gè)效果圖：




圖4-2

圖4-1鐵軌是平行的，但在透視投影的作用下，原本的平行線在遠(yuǎn)處變得相交。圖4-2是觀察正交視圖和透視視圖來(lái)對(duì)比兩者區(qū)別，同樣，在透視投影下，會(huì)有近大遠(yuǎn)小的效果，（圖中四個(gè)頂點(diǎn)坐標(biāo)分別為(-1, 10, -20), (1, 10, -20), (-1, -1, 0), (1, -1, 0)，z 軸俯視觀察。

關(guān)于透視投影部分還有以下幾點(diǎn)說(shuō)明：

這里沒(méi)有推導(dǎo)透視投影矩陣，而是直接給出了矩陣變換后的效果圖，一是希望讀者從直觀上感受透視投影的效果，二是文章主要內(nèi)容是光柵化過(guò)程的概述，推導(dǎo)不作為重點(diǎn)。如果想了解透視投影的原理，可以學(xué)習(xí)《GAMES101》或者從《Fundamentals of Computer Graphics》中尋找答案

針對(duì)透視投影的效果，最終呈現(xiàn)出來(lái)的就是近大遠(yuǎn)小的視覺(jué)效果

無(wú)論是正交投影還是透視投影，我們目前做的都是針對(duì)幾何圖形的變換，但是最終的目的是屏幕顯示，屏幕顯示必然涉及到分辨率和屏幕尺寸。所以，正交投影和透視投影的最后一步都是標(biāo)準(zhǔn)化(圖3-2)，最終得到[-1, 1] ^ 3的標(biāo)準(zhǔn)立方體。屏幕上的窗口可以是動(dòng)態(tài)變化的，如：400 x 600，600 x 800等，標(biāo)準(zhǔn)化后通過(guò)簡(jiǎn)單平移 + 縮放即可完成視口變換。

結(jié)合我們的模型，對(duì)兩個(gè)三角形做透視投影（圖5-1），可以看到兩個(gè)三角形都在平截頭體中，做透視投影后（乘透視矩陣）會(huì)先得到標(biāo)準(zhǔn)立方體，然后向[x, y]平面投影（暫時(shí)忽略z），得到具有近大遠(yuǎn)小效果的圖（圖5-2），圖5-2動(dòng)態(tài)比對(duì)正交投影和透視投影差別，可以很明顯看到透視投影之后，z絕對(duì)值大的三角形會(huì)變小很多。



圖5-1 包含在平截頭體中的三角形

圖5-2 最終顯示的三角形(透明)

光柵化 & 著色

在透視投影之后，得到的是[-1, -1] ^ 3標(biāo)準(zhǔn)立方體，這一小節(jié)要講的是如何將這個(gè)標(biāo)準(zhǔn)立方體投影并繪制在屏幕上。具體過(guò)程如下圖所示。

圖6-1

圖中有如下兩點(diǎn)需要注意：

這里先對(duì)屏幕做個(gè)簡(jiǎn)單的抽象，將各個(gè)像素抽象為正方形，像素中心即為正方形中心，每個(gè)小格子就是一個(gè)像素，每個(gè)小方格子為 1 * 1，像素位于中心，坐標(biāo)為(x + 0.5, y+0.5)

上一小節(jié)提到了透視投影之后，會(huì)標(biāo)準(zhǔn)化成 [-1, 1] ^ 3 的標(biāo)準(zhǔn)化立方體，這時(shí)先忽略 z 坐標(biāo)，根據(jù)立方體中各個(gè)點(diǎn)的 [x, y] 坐標(biāo)投在屏幕上。當(dāng)前的[x, y]是標(biāo)準(zhǔn)化坐標(biāo)，需要做個(gè)簡(jiǎn)單的平移 + 縮放操作，將 x -> width，y -> height，其中 width、height 代表的屏幕中顯示窗口大小，這一步叫做視口變換。

回到我們開(kāi)始的模型，兩個(gè)三角形，共有 6 個(gè)頂點(diǎn)，這里假設(shè)所有的圖形都不會(huì)被裁剪，我們假設(shè)三角形三個(gè)頂點(diǎn)在在經(jīng)歷透視投影 --> 標(biāo)準(zhǔn)化 --> 視口變換后的坐標(biāo)與屏幕坐標(biāo)關(guān)系如下圖所示（這里是效果示意圖，并不是按照上文模型中的坐標(biāo)得出）：

圖7-1 投影示意圖

圖7-2 包圍盒光柵化

圖7-3 包圍盒光柵化

圖7-1在不考慮覆蓋的情況下，根據(jù)兩個(gè)三角形各自頂點(diǎn)變換后的結(jié)果，確定兩個(gè)三角形的位置。圖7-2、7-3是在確定三角形位置后，根據(jù)三角形覆蓋的像素對(duì)其著色。具體步驟如下（以圖7-2為例）：

首先根據(jù)投影后三個(gè)頂點(diǎn)的范圍確定一個(gè)包圍盒，這么做的好處是減少搜索范圍。

確定了包圍盒后，依次判定包圍盒中的像素是否在三角形內(nèi)，這里可以用向量叉乘方法，根據(jù)叉乘方向是否同向判定。

對(duì)于包含在三角形內(nèi)的像素，對(duì)其進(jìn)行著色。著色過(guò)程中，涉及到紋理坐標(biāo)、法向量等要素的計(jì)算，圖7-2中我們知道投影之后的三個(gè)頂點(diǎn)坐標(biāo)、紋理坐標(biāo)、法向量，但是無(wú)法獲得三角形內(nèi)任一點(diǎn)的這些數(shù)據(jù)，這時(shí)候就會(huì)用到三角形的重心坐標(biāo)，利用重心坐標(biāo)通過(guò)插值的方法獲得三角形內(nèi)任一點(diǎn)的數(shù)據(jù)。比如已知三角形三個(gè)頂點(diǎn)的紋理坐標(biāo)(u, v)，想知道三角形內(nèi)任一點(diǎn)的紋理坐標(biāo)，就可以通過(guò)該點(diǎn)的重心坐標(biāo)獲取，有一點(diǎn)需要切記，這里所說(shuō)的重心坐標(biāo)不是投影后的，而是在做透視投影之前的重心坐標(biāo)，如果要用投影后的重心坐標(biāo)，需要做修正。對(duì)于三角形內(nèi)法向量計(jì)算也是相同道理。

不過(guò)上面的方法仍然存在兩個(gè)問(wèn)題：

圖7-2、7-3考慮的都只針對(duì)自身三角形的光柵化，對(duì)于兩個(gè)三角形的重疊部分沒(méi)有考慮，后面講的深度緩沖會(huì)解決這個(gè)問(wèn)題。

在判定像素與三角形位置關(guān)系時(shí)，我們判定的是小方格中心點(diǎn)與三角形關(guān)系，即使中心點(diǎn)不在三角形內(nèi)，像素的小方格子仍然會(huì)被三角形覆蓋，那么小格子是標(biāo)記為不亮、還是按照被覆蓋的面積來(lái)著色，這塊如果處理的不好很容易出現(xiàn)鋸齒，這里就需要反走樣技術(shù)，這里不再闡述。

深度緩沖

在透視投影之后得到一個(gè)標(biāo)準(zhǔn)正方體，在向 x、y 確定平面投影時(shí)會(huì)遇到這樣的情況，對(duì)于兩個(gè)不同頂點(diǎn)，x、y 相同，z 不同，這時(shí)候就要借助深度緩沖方法。不考慮透明效果，上述兩個(gè)頂點(diǎn)，誰(shuí)距離攝像機(jī)近，后面的就會(huì)被遮擋。具體方法如下。

圖8-1 深度緩沖原理

在光柵化過(guò)程中，被著色的像素會(huì)記錄當(dāng)前點(diǎn)在空間中距離攝像機(jī)深度，如果再次被著色的時(shí)候，會(huì)與之前記錄的深度值做比對(duì)，如果新的值距離攝像機(jī)更近，那么會(huì)覆蓋掉舊的顏色，否則仍然用舊的顏色。這樣就解決了點(diǎn)的覆蓋問(wèn)題，上文僅僅是方法上的闡述，還有很多優(yōu)化空間，比如我們可以提前深度值的判定，對(duì)于被覆蓋的點(diǎn)省掉不必要的著色操作。圖8-2是實(shí)例模型執(zhí)行深度緩沖后的投影結(jié)果。

圖8-2 最終投影

總結(jié)

上圖是圖形管線的主要過(guò)程，對(duì)照上文例子中的簡(jiǎn)單模型闡述各個(gè)環(huán)節(jié)工作：

Vertex Processing: 頂點(diǎn)處理，對(duì)空間中頂點(diǎn)進(jìn)行變換，針對(duì)我們例子中簡(jiǎn)化的兩個(gè)三角形模型，透視投影包含在頂點(diǎn)變換中。

Rasterization: 光柵化操作，對(duì)于我們這個(gè)例子就是對(duì)兩個(gè)三角形做透視投影 --> 然后向[x, y]平面做投影 --> 視口變換，然后判定投影后的三角形內(nèi)包含了多少像素。

Fragment Processing: 像素著色，例子中就是針對(duì)投影后兩個(gè)三角形內(nèi)的像素進(jìn)行著色，這里與光照、紋理映射相關(guān)，對(duì)于三角形任一點(diǎn)的紋理坐標(biāo)、法向量可以通過(guò)三角形頂點(diǎn)的這些信息及三角形重心坐標(biāo)（透視投影前）計(jì)算得到。

Blending: 混合上屏，將最終混合結(jié)果填充到圖形緩沖區(qū)，進(jìn)而刷到屏幕。

審核編輯：湯梓紅