1. 為什么要從“畫一個三角形”開始理解固定功能管線在圖形學里三角形的地位相當于編程里的Hello World——但它遠比Hello World更接近真實原理。我第一次在CPU上手動實現(xiàn)固定功能管線Fixed Function Pipeline時才真正明白顯卡拿到一堆頂點之后到底干了多少活。很多人一開始就被Shader帶走急著去調(diào)“頂點著色器”和“片元著色器”卻對整條渲染流程只有一個模糊概念數(shù)據(jù)進去像素出來。中間那些階段——坐標變換、裁剪、光柵化、深度測試、混合——到底是誰在什么時間點做了什么反而一知半解。固定功能管線恰恰是理解這一切最好的教材。所謂“固定功能”指的是早期GPU把渲染流程拆成一系列處理階段這些階段在硬件上已經(jīng)“焊死”了開發(fā)者能通過設置參數(shù)調(diào)節(jié)行為但不能改變處理邏輯本身。比如OpenGL 1.x時代你調(diào)用glRotatef、glLightfv、glTexEnvi去配置矩陣、光照和紋理驅動把這些狀態(tài)翻譯成硬件的固定指令頂點進去、像素出來中間你的自由度非常有限。但正因為沒得選你反而會被迫看清“管線到底長什么樣”。為什么偏偏拿三角形舉例這不是隨便選的。三角形是光柵化硬件的基本處理單元理由至少有兩條。第一三角形是最簡單的平面多邊形三個點一定共面這保證了后續(xù)插值和裁剪在數(shù)學上干凈利落四邊形在透視投影下可能被掰成兩個不共面的半片而三角形不會。第二三角形內(nèi)部任意一點都能用重心坐標barycentric coordinates唯一表示這個坐標天然適合做顏色、紋理、深度等屬性的插值。實際渲染里一個復雜的角色模型動輒幾十上百萬個三角形GPU干的核心活就是“把三角形的頂點變成一組覆蓋屏幕的像素”然后再決定這些像素以什么顏色寫進畫面。這篇文章不打算帶你深入某個現(xiàn)代圖形API的Demo而是想完整拆解“畫一個三角形”這條鏈路上每一步的原理和隱藏細節(jié)固定功能管線在頂點階段做了什么在光柵化階段做了什么在逐片元階段又做了什么。你可能是剛接觸圖形學的新手也可能寫了一陣Shader但總覺得哪里隔著一層紙這篇文章都適合你。我會把每一步背后的數(shù)學邏輯和實際踩坑經(jīng)驗都攤開講最后還會給你一個可以在CPU上運行的極簡“固定功能版”渲染器框架讓你親手看到那條流水線是怎么運轉的。2. 固定功能管線究竟做了哪幾件事從頂點到像素的流水線拆解2.1 頂點坐標的變形記本地坐標到屏幕坐標的五次變換你傳入GPU的第一個數(shù)據(jù)通常是一個頂點數(shù)組里面至少包含位置坐標可能還有顏色、法線、紋理坐標等屬性。固定功能管線的Vertex階段頂點處理階段要做的第一件事就是把頂點從“模型自己的本地坐標系”搬到“屏幕像素坐標系”。這段路程大致要經(jīng)歷五個小站任何一站出問題三角形要么不顯示要么顯示在錯誤位置。第一站是模型變換Model Transform。物體在美術手里是在本地坐標系里建模的一個角色模型的“原點”可能在肚臍位置手臂頂點坐標是相對于這個原點的。模型變換矩陣M負責把它放到世界坐標系里完成平移、旋轉、縮放這些擺位操作。第二站是視圖變換View Transform矩陣V把世界坐標轉換成以相機為中心、以相機朝向為基礎的觀察坐標相機位置變成原點相機正前方變成-z軸OpenGL約定。第三站是投影變換Projection Transform矩陣P把觀察坐標的視錐體裁剪成標準立方體這一步同時決定了你能看到多大范圍、近遠裁剪面在哪以及透視還是正交。第四站關鍵且容易被忽略透視除法。矩陣P的輸出是齊次裁剪坐標clip coordinates這個坐標帶有一個w分量而真正的歸一化坐標NDC要求x、y、z都除以w。這一步才是“近大遠小”的真正來源離相機近的頂點w小除以w之后坐標變化幅度大離相機遠的頂點w大坐標被壓縮得厲害。最后一次變換是視口變換Viewport Transform把NDC里的[-1, 1]映射到實際的窗口像素坐標比如1920x1080的屏幕x從-1映射到01920y從1映射到01080注意y軸方向是上下翻轉的。這五個步驟在固定功能管線上自動發(fā)生開發(fā)者只需要通過矩陣狀態(tài)告訴驅動“用哪組參數(shù)”。我當時學的時候總覺得這一步太抽象后來用了個土辦法理解想象你手里拿著一張照片第一步?jīng)Q定照片里的人在房間的哪個位置第二步?jīng)Q定用什么角度拍第三步?jīng)Q定用廣角還是長焦第四步?jīng)Q定照片的立體感第五步?jīng)Q定把照片洗成多大尺寸。五種變換對應著同一套數(shù)學邏輯一連串矩陣乘法。2.2 光柵化三角形覆蓋了哪些像素頂點處理完后三角形已經(jīng)變成了屏幕坐標系下的三個二維點同時每個頂點身上掛著一堆屬性深度值、顏色、紋理坐標。接下來登場的是光柵化Rasterization階段任務是找出“這個三角形覆蓋了哪些像素中心點”并為每一個被覆蓋的像素生成一個片元fragment。固定功能時代的光柵化硬件主要用的是掃描轉換scan conversion的思路現(xiàn)代GPU則更偏向基于包圍盒的并行測試。無論哪種實現(xiàn)核心數(shù)學都是同一個給定三角形三個頂點v0、v1、v2和像素點p判斷p是否落在三角形內(nèi)部。最常用的方法是叉積符號測試或者用重心坐標判斷把p表示成v0、v1、v2的加權平均p λ0 * v0 λ1 * v1 λ2 * v2要求λ0 λ1 λ2 1且三個λ都大于等于0p就在三角形內(nèi)部。這三個λ值同時就是插值系數(shù)頂點顏色乘以各自權重再相加就是片元的顏色。聽起來不復雜但光柵化有兩個地方值得注意。第一像素中心點通常取整數(shù)坐標三角形的邊卻是連續(xù)的浮點坐標所以邊緣會出現(xiàn)鋸齒。固定功能管線的年代硬件里會提供多重采樣MSAA或者紋理鋸齒消除方案但最樸素的做法就是不處理這也是為什么老游戲的畫面邊緣總是“狗牙”明顯。第二三角形覆蓋像素時兩個三角形共享的邊必須只被計入一次否則同一像素會被寫入兩次產(chǎn)生閃爍和臟邊這在光柵化里叫“top-left rule”之類的一致性規(guī)則屬于硬件層面的細節(jié)應用層一般不關心。光柵化完成之后每個像素位置上產(chǎn)生了一個或若干個片元。片元可以理解成“候選像素”它帶有從頂點插值得到的所有屬性但還不能直接上屏后面還有一道關卡。2.3 逐片元操作像素最終能不能畫上去片元從光柵化出來后進入逐片元操作per-fragment operations階段。這一步在現(xiàn)代圖形API里很多仍然保留為固定功能硬件單元——它沒有變成可編程的shader因為這些東西本質(zhì)上是硬件回答“這個像素能不能寫、怎么寫”的判斷題。固定功能管線里這一串操作通常包括裁剪測試scissor test、Alpha測試、模板測試stencil test、深度測試depth test、混合blending、抖動dithering和邏輯操作。其中對“畫三角形”這件事最重要的兩個是深度測試和混合。深度測試的邏輯一句話就能說清每個片元帶有一個深度值z它代表這個像素點在相機空間里離相機的遠近幀緩沖區(qū)外還掛著一張深度緩沖區(qū)記錄著當前已經(jīng)寫入的最近片元的深度。新片元到來時先拿它的z值和深度緩沖里對應位置的值比一比默認模式是“小于等于就通過”通過后再用新z覆蓋舊z顏色也覆蓋。這意味著即使兩個三角形在代碼層面一先一后遞交最終誰顯示在前面取決于誰離相機更近而不是誰后畫。固定功能管線里深度測試和深度寫入是可以分別開關的這個組合在透明物體渲染時非常重要透明物體通常要關掉深度寫入、保留深度測試否則后面的半透明層會擋住前面的?；旌蟗lending則負責解決“半透明顏色怎么合成”的問題。固定功能管線提供一套固定的混合模式比如src alpha、one、one minus src alpha這幾種因子組合用來計算新片元顏色和幀緩沖里已有顏色的加權和。OpenGL里的glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA)就是最標準的標準alpha混合。到這里一個片元才真正獲得“上屏資格”被寫進顏色緩沖。3. 畫三角形時最容易翻車的幾個細節(jié)以及背后的數(shù)學原理3.1 矩陣乘法順序左乘還是右乘結果天差地別固定功能管線時代你在OpenGL里要設置三組矩陣GL_MODELVIEW和GL_PROJECTION然后代碼大致長這樣glMatrixMode(GL_PROJECTION); glLoadIdentity(); gluPerspective(45.0f, aspect, 0.1f, 100.0f); glMatrixMode(GL_MODELVIEW); glLoadIdentity(); gluLookAt(eye, center, up);看起來沒問題但很多人剛開始都會犯一個錯把M、V、P的乘法順序寫成p_local * M * V * P而不是P * V * M * p_local。區(qū)別在于矩陣乘法不滿足交換律而這個順序恰恰是初學者最大的坑之一。如果你把第一個三角形放在原點乘以一個“看起來正確”的MVP矩陣但順序反了結果就是三角形在屏幕上的位置和預期完全對不上甚至直接落在裁剪范圍外畫面白屏一片。我當時排查過這類問題最后發(fā)現(xiàn)就是矩陣順序。為什么順序必須是“先M再V再P”因為每一步變換的輸入是前一步的輸出模型矩陣把本地坐標變到世界視圖矩陣把世界坐標變到相機空間投影矩陣把相機空間變到裁剪空間。寫完整就是// 列向量約定頂點寫在右邊 vec4 clipPos projectionMatrix * viewMatrix * modelMatrix * localPos;如果你用的是行向量約定比如某些數(shù)學庫自帶轉置存儲那就全反過來。團隊協(xié)作時這個約定必須統(tǒng)一不然今天你的三角形在左邊他改了一行代碼之后跑右邊去了。固定功能管線的好處是矩陣狀態(tài)由驅動管理但壞處是你很難直接看到中間數(shù)據(jù)?，F(xiàn)代可編程管線里你在Shader里手動算反而容易調(diào)試。3.2 裁剪必須在透視除法之前做一個三角形經(jīng)過透視投影之后可能一部分在視錐體內(nèi)、一部分在視錐體外。比如一個很大的三角形某個頂點跑到相機背后去了。這時候如果直接做透視除法那個位于相機后面的頂點的坐標會被翻轉三角形形狀徹底亂掉。所以硬件必須在透視除法之前完成視錐裁剪。裁剪空間clip space里判斷頂點是否在可見區(qū)域用的是一組簡單不等式-w x w-w y w-w z w。任何不滿足條件的頂點都要被裁剪而一條邊穿過裁剪面時三角形需要被切成一個或多個新三角形。固定功能管線里的硬件裁剪器clip unit干的就是這活而且它對每個三角形的輸出可能是零個、一個、兩個甚至更多個三角形。想一想就知道這跟“畫單個三角形”的直覺很不一樣你以為只需要填充三個頂點圍成的區(qū)域實際上GPU內(nèi)部可能先做了幾何分裂。新手在軟件光柵化器里最常偷懶的做法是“先透視除法再判斷NDC是否越界”這幾乎一定會出現(xiàn)三角形在地平線附近撕裂、翻轉的現(xiàn)象。正確做法是計算裁剪坐標 clip P * V * M * localPos檢查clip的x、y、z是否都在[-w, w]內(nèi)都合格才做透視除法不合格做裁剪或丟棄。3.3 深度測試不是“按畫家算法”而是“按深度緩沖”很多剛接觸3D的人腦子里的遮擋模型是“誰后畫誰在上面”這其實更像畫家算法painters algorithm先畫遠處的山再畫近處的樹后面的覆蓋前面的。畫家算法在深度排序完全正確時能工作但三角形互相穿插、或者運動物體快速交換前后關系時排序成本高且結果不穩(wěn)定。深度緩沖區(qū)z-buffer徹底解決了這個問題它為每個像素存一個深度值片元能不能寫顏色取決于它帶過來的深度值是否比緩沖里的更小離相機更近。固定功能管線的深度測試單元就是干這個的。這里有一個實際中頻繁踩的坑深度緩沖的精度和數(shù)值范圍。OpenGL的NDC z范圍是[-1, 1]DirectX是[0, 1]而深度緩沖通常把z映射到[0, 1]存儲。透視投影的z經(jīng)過除法后不是線性分布的離相機近的部分精度高、遠的部分精度低。所以近裁剪面和遠裁剪面如果比值特別懸殊地平線附近就會出現(xiàn)深度沖突z-fighting表現(xiàn)為模型表面上閃爍的碎花——兩個幾乎共面的表面在遠處互相爭奪像素。我當時調(diào)一個地形項目時地面和道路鋪層出現(xiàn)大面積閃爍調(diào)了半天就是遠處深度精度不夠。解決辦法是壓縮近遠裁剪面的距離或者在shader里用反深度緩沖而不是盲目調(diào)偏移量。3.4 屏幕空間的線性插值藏著透視校正的坑三角形光柵化時頂點屬性顏色、紋理坐標、法線都是靠重心坐標插值到每個片元上的。但直接在每個片元上對屏幕空間坐標做線性插值得到的結果是不符合透視規(guī)律的。舉個例子一個由近到遠延伸的地面紋理如果簡單地在屏幕空間里對紋理坐標做線性插值遠處的紋理線會被拉伸得奇寬無比近處的卻擠在一起產(chǎn)生一種“紋理在甩動”的不真實感。正確做法是透視校正插值perspective-correct interpolation屏幕空間里真正線性插值的對象不是屬性本身而是屬性除以w后的值以及1/w。最后把兩個插值結果相除才得到正確的屬性。固定功能管線內(nèi)部自動做了這一層校正所以你直接用固定管線貼紋理通常不會遇到這個問題。但一旦你開始自己寫軟件光柵化器、或者在現(xiàn)代Shader里手動計算插值這個坑就立刻暴露。判斷方法很簡單看紋理在地平線附近有沒有不該有的波浪形扭曲。如果有八成是插值沒做透視校正。4. 今天寫Shader的人為什么還離不開固定功能的底層邏輯很多人會有個疑問現(xiàn)在誰還在用固定功能管線OpenGL 3.2之后核心profile直接移除了固定功能WebGL 2.0時代大家寫的是GLSL ShaderVulkan和Metal更是一上來就要你手寫全套渲染狀態(tài)。那這篇文章講這些“老古董”是不是過時了恰恰相反。固定功能管線不是被淘汰了而是被拆開了——它把一條完整流水線里需要邏輯判斷的部分做成可編程單元把那些不需要邏輯判斷的硬件操作繼續(xù)固化下來。你今天寫的頂點著色器取代的正是固定功能里“頂點變換和光照”那一段你寫的片元著色器取代的正是固定功能里“紋理采樣、霧計算、alpha測試”那一段。但深度測試、模板測試、混合、光柵化這些環(huán)節(jié)在現(xiàn)代渲染管線上依然由固定硬件完成你只能配置參數(shù)不能改寫邏輯。這張對應關系在任何入門教材里都成立但真正讓我意識到它價值的是調(diào)試Shader的時候。有一次我寫一個粒子效果的片元著色器畫面粒子總是被場景里的墻體擋得嚴嚴實實。我開始以為是混合模式配錯了查了半天最后發(fā)現(xiàn)是深度寫入沒關。如果我對“固定功能管線哪些環(huán)節(jié)由硬件接管”沒有概念一定會像無頭蒼蠅一樣在Shader代碼里翻。但因為我腦子里有那套流水線圖瞬間就能定位片元著色器輸出顏色之后后面還有一層深度測試單元在等著我。固定功能時期還有個經(jīng)常被老教程一筆帶過的坑就是法線變換。在固定功能管線的頂點變換階段如果你開啟了光照硬件會自動把法線從模型空間變換到世界空間或視圖空間。但一個關鍵規(guī)則是遇到非均勻縮放時法線不能直接用模型矩陣變換否則法線和表面的垂直關系會被破壞。正確做法是使用模型矩陣的逆轉置矩陣。在固定功能管線上驅動默默幫你處理了這個細節(jié)到了可編程著色器時代這個任務落到你頭上但你如果沒學過固定功能的“標準行為”甚至不知道有這個坑存在。這就是為什么我依然建議新人先理解固定功能管線再學Shader它告訴你哪些事是硬件默默替你做的這些事也正是你在寫Shader時最容易忘記親自去做的。5. 親手在CPU上寫一個“固定功能管線版”三角形渲染器理解了原理不動手做一遍總覺得缺了點東西。我建議你親手在CPU上實現(xiàn)一個極簡的軟件固定功能渲染器目標只有一個把一個彩色三角形正確顯示在屏幕上。這個練習會強迫你走一遍完整的變換→光柵化→深度測試流程做完之后你對管線的理解會扎實很多。以下代碼是C風格偽代碼聚焦核心邏輯完整工程留作練習5.1 數(shù)據(jù)結構與變換函數(shù)首先定義頂點、三角形和幀緩沖struct Vertex { float x, y, z, w; // 本地坐標w初始為1 float r, g, b; // 頂點顏色 }; struct Triangle { Vertex v[3]; }; struct Framebuffer { int width, height; float* depth; // 深度緩沖 unsigned char* color; // 顏色緩沖RGB各8bit };接下來實現(xiàn)MVP矩陣和變換函數(shù)。為了簡單這里直接預設一個透視投影矩陣和一組視圖矩陣你不需要自己推導但必須知道每個矩陣的職責// 先把整個窗口的像素填成背景色 void clear(Framebuffer fb, float r, float g, float b) { for (int i 0; i fb.width * fb.height; i) { fb.color[i * 3 0] (unsigned char)(r * 255); fb.color[i * 3 1] (unsigned char)(g * 255); fb.color[i * 3 2] (unsigned char)(b * 255); fb.depth[i] 1e30f; // 初始深度設為無窮遠 } } // 頂點變換本地坐標 - 屏幕坐標 深度 bool transformVertex(const Vertex in, const Matrix4 mvp, int fbWidth, int fbHeight, /* out */ Vertex out) { // 矩陣乘法clip mvp * local float cx mvp.m[0] * in.x mvp.m[4] * in.y mvp.m[8] * in.z mvp.m[12] * in.w; float cy mvp.m[1] * in.x mvp.m[5] * in.y mvp.m[9] * in.z mvp.m[13] * in.w; float cz mvp.m[2] * in.x mvp.m[6] * in.y mvp.m[10] * in.z mvp.m[14] * in.w; float cw mvp.m[3] * in.x mvp.m[7] * in.y mvp.m[11] * in.z mvp.m[15] * in.w; // 裁剪測試x/y/z 是否都在 [-w, w] 內(nèi)不在就丟棄 if (fabs(cx) cw || fabs(cy) cw || fabs(cz) cw) return false; // 透視除法 float invW 1.0f / cw; float nx cx * invW; // NDC范圍約[-1,1] float ny cy * invW; float nz cz * invW; // 視口變換NDC - 屏幕像素 out.x (nx 1.0f) * 0.5f * fbWidth; out.y (1.0f - ny) * 0.5f * fbHeight; // y翻轉 out.z nz; // z保留給深度測試 out.w in.w; // 順便存一下原始w用于透視校正 out.r in.r; out.g in.g; out.b in.b; return true; }注意這個裁剪測試極其簡化了真正的裁剪器要做三角形切分這里直接丟棄不合格三角形——對于“屏幕中央放一個三角形”的場景完全夠用。如果你想支持部分頂點在屏幕外就需要寫真正的多邊形裁剪算法這是后話。5.2 光柵化主循環(huán)光柵化的目標是遍歷三角形屏幕包圍盒內(nèi)的每個像素用重心坐標判斷像素中心是否在三角形內(nèi)部然后插值顏色和深度執(zhí)行深度測試最后寫顏色緩沖。void drawTriangle(Framebuffer fb, const Triangle tri, const Matrix4 mvp) { Vertex sv[3]; for (int i 0; i 3; i) { if (!transformVertex(tri.v[i], mvp, fb.width, fb.height, sv[i])) return; } // 計算屏幕空間包圍盒 int minX (int)floor(fminf(sv[0].x, fminf(sv[1].x, sv[2].x))); int maxX (int)ceil(fmaxf(sv[0].x, fmaxf(sv[1].x, sv[2].x))); int minY (int)floor(fminf(sv[0].y, fminf(sv[1].y, sv[2].y))); int maxY (int)ceil(fmaxf(sv[0].y, fmaxf(sv[1].y, sv[2].y))); minX max(minX, 0); maxX min(maxX, fb.width - 1); minY max(minY, 0); maxY min(maxY, fb.height - 1); for (int y minY; y maxY; y) { for (int x minX; x maxX; x) { // 用重心坐標判斷像素中心 (x0.5, y0.5) 是否在三角形內(nèi) float px x 0.5f, py y 0.5f; float area edgeFunction(sv[0], sv[1], sv[2]); if (area 0.0f) continue; float w0 edgeFunction(sv[1], sv[2], Vertex{px, py}); float w1 edgeFunction(sv[2], sv[0], Vertex{px, py}); float w2 edgeFunction(sv[0], sv[1], Vertex{px, py}); // 歸一化重心坐標 w0 / area; w1 / area; w2 / area; // 所有系數(shù) 0像素在三角形內(nèi) if (w0 0 w1 0 w2 0) { // 插值深度簡單場景頂點z已經(jīng)算好 float depth sv[0].z * w0 sv[1].z * w1 sv[2].z * w2; // 深度測試通過才寫顏色 if (depth fb.depth[y * fb.width x]) { fb.depth[y * fb.width x] depth; float r sv[0].r * w0 sv[1].r * w1 sv[2].r * w2; float g sv[0].g * w0 sv[1].g * w1 sv[2].g * w2; float b sv[0].b * w0 sv[1].b * w1 sv[2].b * w2; fb.color[(y * fb.width x) * 3 0] (unsigned char)(r * 255); fb.color[(y * fb.width x) * 3 1] (unsigned char)(g * 255); fb.color[(y * fb.width x) * 3 2] (unsigned char)(b * 255); } } } } } // 邊緣函數(shù)判斷(p,q,r)逆時針/順時針方向 float edgeFunction(const Vertex a, const Vertex b, const Vertex c) { return (c.x - a.x) * (b.y - a.y) - (c.y - a.y) * (b.x - a.x); }這套代碼雖然簡單但它完整復現(xiàn)了固定功能管線的關鍵環(huán)節(jié)頂點經(jīng)過MVP變換、透視除法、視口變換光柵化階段用重心坐標判斷覆蓋并插值逐片元階段執(zhí)行深度測試再寫入顏色緩沖。運行時你會發(fā)現(xiàn)把兩個不同深度、不同顏色的三角形丟進去顯示結果完全由深度關系決定而不是繪制順序這正是你理解固定功能管線后應得的“直覺”。5.3 輸出與后續(xù)你可以擴展什么寫完幀緩沖之后如何看結果最簡單的辦法是輸出PPM圖像文件。PPM是一種極其簡單的文本圖像格式你只需要寫文件頭“P3\n寬 高\n255\n”然后逐行輸出RGB數(shù)值就能用看圖軟件打開。零依賴兩分鐘搞定。如果你想做實時窗口再去接SDL或GLFW這類庫但練習階段沒必要——能看見一個正確處理遮擋的彩色三角形你已經(jīng)走通了整個管線。這個極簡渲染器非常簡陋但它就是一張完整的“圖紙”。后續(xù)擴展方向很多給光柵化加上透視校正插值插值屬性時帶上1/w最后還原三角形邊緣的抗鋸齒對覆蓋面積做加權采樣紋理映射在片元階段采樣一張貼圖逐頂點光照在頂點階段算好顏色再插值。每加一個功能你都會更清楚它應該出現(xiàn)在管線的哪個位置、由哪個階段負責。我自己做完這個練習最大的感受是很多在現(xiàn)代API里被抽象掉的復雜度并不是不存在了而是被驅動和硬件藏起來了。固定功能管線的價值就是替你把蓋子掀開讓你看見流水線內(nèi)部的每個齒輪都在轉。畫一個三角形不難難的是清楚知道這個三角形在屏幕上出現(xiàn)的每一步都被誰做了什么——這份清楚會陪你走完之后所有圖形學相關的路。