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