圖形學(xué)是客戶(hù)端的最重要知識(shí)之一

流程圖

文字解析：

圖元：構(gòu)成模型的基本單元，點(diǎn)、線(xiàn)、三角形。圖元的基本單元是頂點(diǎn)。

片元：獨(dú)立的一塊片段數(shù)據(jù)，儲(chǔ)存著著色信息和深度值。會(huì)與屏幕的像素進(jìn)行比較，最后影響屏幕上的像素顏色。

顏色緩沖區(qū)：一塊內(nèi)存，存儲(chǔ)著屏幕上每塊像素的顏色。

深度緩沖區(qū)：一塊內(nèi)存，存儲(chǔ)著屏幕上每塊像素的深度。

應(yīng)用階段：

本階段主要是將與渲染有關(guān)的場(chǎng)景數(shù)據(jù)包括：模型圖元數(shù)據(jù)、光源數(shù)據(jù)、攝像機(jī)數(shù)據(jù)傳遞到幾何階段。這個(gè)階段是在CPU中進(jìn)行的，因此可以由程序員全權(quán)控制，比如應(yīng)用一些算法對(duì)渲染性能做一些優(yōu)化。

幾何階段：

主要是將模型的頂點(diǎn)數(shù)據(jù)包括位置信息和著色信息轉(zhuǎn)換到屏幕空間。此后的階段都是位于GPU中，一部分是可由程序員編程的，一部分是高度可配置的，還有一部分是設(shè)備自身決定。

頂點(diǎn)著色

任務(wù)有兩個(gè)：
1、通過(guò)坐標(biāo)轉(zhuǎn)換將模型的頂點(diǎn)位置數(shù)據(jù)轉(zhuǎn)換到視圖空間。
首先頂點(diǎn)著色階段拿到的頂點(diǎn)坐標(biāo)數(shù)據(jù)都是位于模型空間的，要經(jīng)過(guò)模型轉(zhuǎn)換將這些坐標(biāo)數(shù)據(jù)轉(zhuǎn)換到世界空間。接著為了方便后面的投影和裁剪，需要將坐標(biāo)數(shù)據(jù)從世界空間轉(zhuǎn)換到攝像機(jī)空間（攝像機(jī)位置為原點(diǎn)，x軸指向右方，y指向上方，z軸是背離攝像機(jī)朝向的方向），這稱(chēng)為視圖轉(zhuǎn)換。模型轉(zhuǎn)換和視圖轉(zhuǎn)換都可以用4x4的矩陣進(jìn)行操作。

2、計(jì)算頂點(diǎn)著色數(shù)據(jù)。
應(yīng)用材質(zhì)，燈光等數(shù)據(jù)計(jì)算出頂點(diǎn)的著色數(shù)據(jù)，并儲(chǔ)存在頂點(diǎn)中。當(dāng)然這里也可以不用計(jì)算任何著色數(shù)據(jù)，把著色信息存儲(chǔ)在頂點(diǎn)中，傳遞后后續(xù)階段進(jìn)行處理。

這一階段是可由程序員編程的，稱(chēng)為頂點(diǎn)著色器。程序員可以自由決定頂點(diǎn)著色的方程式，也可以不處理，只是將著色數(shù)據(jù)傳遞到下面階段。并且，程序員可以在位置變換上做手腳，使模型的位置信息靈活多變，產(chǎn)生一些獨(dú)特的效果，甚至可以做動(dòng)畫(huà)（頂點(diǎn)動(dòng)畫(huà)）。

投影

使用最多的兩種投影方式是：透視投影和正交投影。為了方便裁剪，無(wú)論采用哪種投影方式，攝像機(jī)空間的數(shù)據(jù)最終會(huì)統(tǒng)一轉(zhuǎn)換到單元立方體呢。這個(gè)過(guò)程稱(chēng)為投影轉(zhuǎn)換，最終物體處于裁剪空間也叫齊次空間。

裁剪

只有攝像機(jī)視錐體內(nèi)的物體才是可見(jiàn)的。視錐體已經(jīng)轉(zhuǎn)換成了單元立方體，因此只有位于單元立方體內(nèi)部的圖元才會(huì)保留，位于外部的會(huì)被舍棄，相交的圖元會(huì)被裁剪。

屏幕映射

將上述保留下來(lái)的圖元映射到屏幕上。這個(gè)過(guò)程基本上是一個(gè)縮放的過(guò)程，將單元立方體中的圖元，根據(jù)屏幕大小，得到圖元的屏幕坐標(biāo)，注意屏幕坐標(biāo)是二維的，屏幕坐標(biāo)和z軸構(gòu)成了窗口坐標(biāo)系，xy軸儲(chǔ)存著屏幕的位置，z軸儲(chǔ)存著深度值，深度值主要是表示物體的遮擋關(guān)系。

光柵化:

主要是將屏幕上的頂點(diǎn)數(shù)據(jù)轉(zhuǎn)換成像素?cái)?shù)據(jù)。

三角形設(shè)置

每三個(gè)頂點(diǎn)形成一個(gè)三角形。為了后續(xù)階段的計(jì)算，會(huì)根據(jù)頂點(diǎn)的信息以及一些方程計(jì)算出三角形邊界的信息。

三角形遍歷

遍歷所有的三角形，根據(jù)上述邊界信息，計(jì)算其覆蓋的像素，并且會(huì)生成一個(gè)片元。片元中保存著著色信息，以及深度信息。這些數(shù)據(jù)是通過(guò)三角形三個(gè)頂點(diǎn)數(shù)據(jù)的插值運(yùn)算得到的。注意：片元并不是像素，像素是屏幕上顯示顏色的單元，片元只是保存了像素的數(shù)據(jù)。

像素處理階段

將片元與原有的像素合并輸出到屏幕上。

像素著色

逐片元的操作，這里跟頂點(diǎn)著色一樣屬于可編程的，也稱(chēng)為片元著色器（像素著色器）。這里主要作用跟頂點(diǎn)著色很像，計(jì)算著色信息，但是主角變了，頂點(diǎn)著色器主要作用于頂點(diǎn)，片元著色器主要作用于片元?？梢赃\(yùn)用各種計(jì)算方式，以及技術(shù)，比如貼紋理（圖片），重新生成片元的顏色信息。

合并

合并是指的，前一階段得到的片元與對(duì)應(yīng)的屏幕像素進(jìn)行合并。那么具體的合并是怎么操作的？主要的步驟有兩個(gè)：
1、測(cè)試。測(cè)試是決定哪些片元有資格與像素顏色合并，哪些片元需要被舍棄掉。
2、合并。將片元顏色與對(duì)應(yīng)的像素顏色合并。具體的合并方式是高度可配置的。我們可以決定直接替換掉原有顏色，也可以用一定的規(guī)則混合兩個(gè)顏色。

有一個(gè)算法叫z算法，也稱(chēng)為深度測(cè)試。每塊像素的顏色儲(chǔ)存在顏色緩沖區(qū)，深度值儲(chǔ)存在深度緩沖區(qū)。同時(shí)片元中保存著有新的顏色值和深度值，首先深度值會(huì)與屏幕上像素的深度值進(jìn)行比較，如果片元深度值小于屏幕上像素的深度值，那么就代表當(dāng)前片元是比屏幕上對(duì)應(yīng)的像素要離攝像機(jī)更近，此時(shí)就是把片元的顏色信息賦值給屏幕對(duì)應(yīng)像素的顏色緩沖區(qū)，深度值賦值給屏幕對(duì)應(yīng)像素的深度緩沖區(qū)；如果大于屏幕上像素的深度值，那么該片元就不會(huì)影響屏幕上的像素信息。這么做保證了渲染出來(lái)的畫(huà)面永遠(yuǎn)都是攝像機(jī)視角可見(jiàn)的元素，被遮擋的物體就被替換了。上述過(guò)程是無(wú)視渲染順序的。因此也就有了z算法的一個(gè)重大缺點(diǎn)就是處理透明度。

假設(shè)屏幕上已經(jīng)存在一個(gè)物體的渲染，接下來(lái)要渲染一個(gè)透明的物體，這個(gè)物體恰好位于已渲染的物體像素上，那么根據(jù)z算法要將當(dāng)前的透明物體的信息覆蓋到已有的物體信息。實(shí)際生活中，這種情況下，透明物體后面的物體還是可以看得到的，所以?xún)H僅使用z算法不做處理的話(huà)，就會(huì)得到錯(cuò)誤的視覺(jué)答案。
好在我們有其他的處理辦法。

Alpha通道與顏色緩沖區(qū)有緊密聯(lián)系。我們可以在片元著色器中決定棄除不想要的片元。可以用這種方式設(shè)置標(biāo)準(zhǔn)值，所有的片元的Alpha通道都會(huì)與該值比較，通過(guò)就可以參與后續(xù)操作，不通過(guò)就可以直接丟棄，不影響屏幕上原有的像素，這個(gè)過(guò)程稱(chēng)為Alpha測(cè)試。

當(dāng)然還是會(huì)存在一定的問(wèn)題，生活中完全透明的物體幾乎不存在，大多都是以半透明的形式存在，比如透過(guò)綠色玻璃可以看到后面的物體，首先綠色玻璃是我們可以看得到的，其次后面的物體顏色也會(huì)蒙上一層綠色。這里就涉及到合并階段顏色合并的一種方式，混合。不再是替換原來(lái)的像素的顏色，我們可以配置混合的方式，來(lái)決定合并階段最終像素的輸出顏色。

為了避免看到屏幕渲染的過(guò)程，屏幕渲染成像不是立即顯示在屏幕上的，而是采用了前后緩沖區(qū)。首先場(chǎng)景會(huì)渲染到后置緩沖區(qū)，等渲染完畢，就翻轉(zhuǎn)到前置緩沖區(qū)，這時(shí)候我們?cè)谄聊簧峡吹搅送暾匿秩井?huà)面。