2022-1-23 資深UI設(shè)計(jì)者
設(shè)計(jì)師需求中 3D 視覺(jué)平移到互動(dòng) H5 中的項(xiàng)目越來(lái)越多，three.js 和 PBR 工作流的結(jié)合卻一直沒(méi)有被系統(tǒng)化地整理。
和各位前端神仙一起做項(xiàng)目，也一起磕磕碰碰出了愛(ài)與痛的領(lǐng)悟。小小總結(jié)，希望 3D 去往 H5 的道路天塹變通途。
本手冊(cè)主要分為兩大部分：
Part 1 理論篇：主要讓設(shè)計(jì)師了解計(jì)算機(jī)到底是如何理解和實(shí)時(shí)渲染我們?cè)O(shè)計(jì)的 3D 項(xiàng)目，以及 three.js 材質(zhì)和預(yù)期材質(zhì)的對(duì)應(yīng)關(guān)系。
Part 2 實(shí)踐篇：基于 three.js 的實(shí)現(xiàn)性，提供場(chǎng)景、材質(zhì)貼圖的制作思路、以及 gltf 工作流，并動(dòng)態(tài)討論項(xiàng)目常常遇到的還原問(wèn)題。
本文主要面向剛接觸 3D 圖形學(xué)的設(shè)計(jì)師，僅截取了最常用的理論知識(shí)和大家一起學(xué)習(xí)；部分涉及技術(shù)美術(shù)或計(jì)算機(jī)圖形學(xué)的描述可能不甚嚴(yán)謹(jǐn)，希望大家多多交流討論哈。
其實(shí)無(wú)論 H5 開(kāi)發(fā)用到的是哪種 webGL，設(shè)計(jì)相關(guān)的材質(zhì)制作基本還是基于 PBR 思路進(jìn)行的，所以這邊建議各位親可以先去閱讀一下 Substance 官方寶冊(cè)《The PBR Guide》。
設(shè)計(jì)師在還原 3D 類(lèi)型的互動(dòng) H5 項(xiàng)目的時(shí)候一定想過(guò)這個(gè)宇宙終極問(wèn)題：為什么 H5/Web 實(shí)現(xiàn)的 3D 效果和 C4D 里渲染出來(lái)的差異那么大？
其實(shí)這是我們對(duì)實(shí)時(shí)渲染引擎（UE、Unity、three.js 等）和離線渲染工具（Redshift、Octane、Vray 等）的差異存在誤解：一是離線渲染工具是基于真實(shí)光照環(huán)境來(lái)計(jì)算每顆像素的著色，實(shí)時(shí)渲染如果要實(shí)現(xiàn)這種效果需要耗費(fèi)更多硬件基礎(chǔ)和算力去模擬光照（沒(méi)個(gè)好顯卡都開(kāi)不動(dòng)光追）。
雖然 UE5 的實(shí)時(shí)渲染技術(shù)和硬件兼容性已經(jīng)讓大家大吃一驚，但在實(shí)際項(xiàng)目，尤其是需要兼容低端設(shè)備的 H5 來(lái)說(shuō)，渲染能力還是相對(duì)有限的。二是對(duì)于游戲或 H5 互動(dòng)網(wǎng)站實(shí)際應(yīng)用來(lái)說(shuō)，流暢的互動(dòng)體驗(yàn)優(yōu)先級(jí)往往高于畫(huà)面精細(xì)度，所以犧牲視覺(jué)保性能也是常見(jiàn)情況。
圖 1-Octane 離線渲染效果 vs three.js 實(shí)時(shí)渲染效果：材質(zhì)細(xì)節(jié)、全局光照及投影、以及抗鋸齒表現(xiàn)差距明顯
當(dāng)實(shí)時(shí)渲染效果與設(shè)計(jì)預(yù)期差距過(guò)大時(shí)，設(shè)計(jì)師能多了解一些基礎(chǔ)的計(jì)算機(jī)圖形學(xué)，也許就能更好地和開(kāi)發(fā)同學(xué)商討性價(jià)比更高的視覺(jué)實(shí)現(xiàn)和資源優(yōu)化方案（以及更多 Battle 的籌碼）。
首先我們要知道計(jì)算機(jī)之所以能在 2D 屏幕上畫(huà)出 3D 的圖像，是因?yàn)橛兄鳎⊿hader）在繪制，它將我們?nèi)S空間里的模型與光照信息進(jìn)行轉(zhuǎn)換，并光柵化為二維圖像。在計(jì)算機(jī)圖形學(xué)中，著色器是用于對(duì)圖像的材質(zhì)（光照、亮度、顏色）進(jìn)行處理的程式。
常用的著色器分為四種：像素/片元著色器（Pixel/Fragment Shader）、頂點(diǎn)著色器（Vertex Shader）、幾何著色器（Geometry Shader）、細(xì)分曲面著色器（Tessellation Shader）。
像素/片元著色器與頂點(diǎn)著色器（Vertex Shader）在 webGL 處理過(guò)程中都有使用，頂點(diǎn)著色器先將模型中每個(gè)頂點(diǎn)的位置、紋理坐標(biāo)、顏色等信息進(jìn)行轉(zhuǎn)換裝配，再由片元著色器對(duì) 3D 信息光柵化并轉(zhuǎn)換成 2D 屏幕信息。（關(guān)于著色器差異，感興趣的同學(xué)可以直接跳到附錄查看。）
著色器是怎么把頂點(diǎn)中所帶有光照、紋理等信息轉(zhuǎn)換并重建在二維圖像的像素中呢？GPU 中是透過(guò)不同的著色算法來(lái)實(shí)現(xiàn)的。
一種是獲取每個(gè)三角形的插值（Interpolate）來(lái)實(shí)現(xiàn)，這種方法稱(chēng)作 Per Vertex Lighting，但是當(dāng)三角型很大的時(shí)候，插值往往不夠精準(zhǔn)。此時(shí)還可以引用另一種方法 Per Pixel Lighting，計(jì)算每個(gè)像素的光照信息，獲得更好的渲染效果，但是往往也帶來(lái)更大的計(jì)算量。
一般常見(jiàn)計(jì)算機(jī)圖形著色算法有三類(lèi)：Flat Shading、Gouraud Shading、Phong Shading。這些算法雖然看起來(lái)和我們?cè)O(shè)計(jì)師沒(méi)啥關(guān)系，但事實(shí)上在后面了解 three.js 材質(zhì)時(shí)，就會(huì)發(fā)現(xiàn)他們?cè)诔尸F(xiàn)時(shí)的差異。
圖 2-Flat、Gouraud、Blinn-Phong 著色法比較 [ F1, ©?Stefano Scheggi ]
平直著色法 Flat Shading
這種著色法認(rèn)為模型中所有面都是平的，同一個(gè)多邊形上的任意點(diǎn)的法線方向都相同。著色時(shí)，會(huì)優(yōu)先選擇多邊形的第一個(gè)頂點(diǎn)或三角形的幾何中心計(jì)算顏色。這種著色法實(shí)踐上的效果很像低面模型，也比較適合使用在高速渲染的場(chǎng)景。值得注意的是，這種著色法難以做出平滑高光效果。
高洛德平滑著色法 Gouraud Shading
這是一種平滑的著色方法，在著色時(shí)會(huì)先計(jì)算三角形每個(gè)頂點(diǎn)的光照特性，利用雙線插值去補(bǔ)齊三角形區(qū)域內(nèi)其他像素的顏色。這個(gè)著色法比起平直著色法增加了插值的細(xì)節(jié)，而且也比 Phong 著色法渲染單個(gè)像素的光照特性的性能要高。
但是在渲染高光時(shí)，可能會(huì)因?yàn)闊o(wú)法獲取精確的光照值而出現(xiàn)一些不自然的過(guò)渡（或 T 型連接容易被錯(cuò)誤繪制），此時(shí)可以考慮對(duì)模型進(jìn)行細(xì)分或使用漫反射材質(zhì)。
Phong 平滑著色法 Phong Shading
與 Gouraud Shading 不同的是，它會(huì)對(duì)頂點(diǎn)的法線進(jìn)行插值，并透過(guò)每個(gè)像素的法向量計(jì)算光照特性。這種做法能繪制出精致、精準(zhǔn)的曲面，但是計(jì)算量較大。Blinn-Phong 是 Phong 的進(jìn)階版，著色性能更好，且高光彌散更自然。
簡(jiǎn)單了解計(jì)算機(jī)如何繪制 3D 圖形后，再來(lái)看看它要如何具體理解我們所設(shè)計(jì)的 3D 場(chǎng)景。
3D 轉(zhuǎn)換成 2D，也就是 3D 柵格化的過(guò)程中，每一個(gè)像素的顏色是需要基于它所在的環(huán)境計(jì)算出來(lái)，而基于被渲染物體表面某個(gè)點(diǎn)的光強(qiáng)度計(jì)算模型就被稱(chēng)為光照明模型（Illumination Model）或光照模型（Light Model），透過(guò)計(jì)算光照模型所得到表面位置對(duì)應(yīng)像素顏色的過(guò)程被稱(chēng)為表面繪制（Surface Render）。
*請(qǐng)注意這里說(shuō)的光照模型并不是指設(shè)計(jì)師理解的 3D 立體模型，而是指模型對(duì)象表面光照效果的數(shù)學(xué)計(jì)算模型。
影響光照模型的因素有兩大方面，一是本身給渲染物體材質(zhì)設(shè)置的各種光學(xué)特性（顏色反射系數(shù)、表面紋理、透明度等），二是場(chǎng)景中光源光及環(huán)境光（場(chǎng)景中各個(gè)被照明對(duì)象的反射光）。
傳統(tǒng)光照模型都是對(duì)漫反射和鏡面反射的理想化模擬，如果要還原基于真實(shí)物理世界的效果，光照模型需要遵循能量守恒定律：一個(gè)物體能反射的光必然少于它接受的光。在實(shí)踐層面則表現(xiàn)為，一個(gè)漫反射更強(qiáng)且更粗糙的物體會(huì)反射更暗且范圍更大的高光，反之亦反。
圖 3-基于 PBR 的光照模型需要遵循能量守恒定律 [ F2, ©?Joe Wilson ]
光照模型與著色組合在不同的渲染需求下也會(huì)有不同的應(yīng)用：
圖 4-真實(shí)感渲染及非真實(shí)感渲染對(duì)比 [ F3, ©?Autodesk ]
真實(shí)感渲染 Photorealistic Rendering
考慮到真實(shí)感渲染對(duì)硬件的依賴，目前 webGL 中使用的一般以簡(jiǎn)單的局部光照模型為主（只計(jì)算光源對(duì)物體的光照效果，不計(jì)算物體間的相互影響，我們看到的“假反射”通常透過(guò)貼圖來(lái)進(jìn)行模擬），根據(jù)反射形態(tài)，經(jīng)典的光照模型有下列幾種：
這種模型的粗糙表面（如塑料、石材等）會(huì)將反射光從各個(gè)方向反射出去，而這種光反射也稱(chēng)為漫反射。理想的漫反射體我們通常稱(chēng)作郎伯反射體（Lambertian Reflectors），也就是我們熟悉的橡膠材質(zhì)。
圖 5-漫反射模型與其他光照模型對(duì)比 [ F4, ©?ViroCore ]
這是一種以實(shí)驗(yàn)及觀察為合成基礎(chǔ)的非物理模型。它的表面反射同時(shí)結(jié)合了粗糙表面漫反射和光滑表面鏡面反射，但 Phong 模型在高光處的表現(xiàn)有過(guò)渡瑕疵。
圖 6-Phong 鏡面反射模型視覺(jué)構(gòu)成 [ F5 ]
是在 OpenGL 和 Direct3D 里默認(rèn)的著色模型，一種調(diào)優(yōu)后的非物理的 Phong 模型，頂點(diǎn)間的像素插值使用 Gouraud 著色算法，比 Phong 著色算法性能更好，而且高光效果也更平滑。
圖 7-Phong 及 Blinn-Phong 鏡面反射模型對(duì)比 [ F6 ]
如果你用過(guò) C4D 的默認(rèn)渲染器，那么一定在材質(zhì)的反射通道設(shè)置中見(jiàn)過(guò)它倆。
這是相對(duì)高級(jí)的光照模型，不同于 Phong 和 Blinn-Phong 模型僅僅對(duì)漫反射及鏡面反射進(jìn)行理想化模擬，這兩個(gè)光照模型基于不同物理材質(zhì)加入了微表面（Microfacet）的概念，并考慮到表面粗糙度對(duì)反射的影響，對(duì)鏡面反射進(jìn)行了調(diào)優(yōu)，使得高光的長(zhǎng)尾彌散更加自然，也是目前 PBR 渲染管線（Unity、UE）中較常用的光照模型。
圖 8-Phong、Blinn-Phong 與 GGX 鏡面反射模型對(duì)比 [ F7, ©?ridgestd ]
終于有一個(gè)設(shè)計(jì)師們常見(jiàn)的概念了。次表面散射是指光穿透不透明物體時(shí)（皮膚、液體、毛玻璃等）的散射現(xiàn)象。現(xiàn)實(shí)生活中，大部分物體都是半透明的，光會(huì)先穿透物體表面，繼而在物體內(nèi)被吸收、多次反射、然后在不同的點(diǎn)穿出物體。以皮膚為例，只有大概 6%的反射是直接反射，而 94%的反射都是次表面散射。
BSSRDF（雙向次表面反射分布函數(shù)）是用于描述入射光在介質(zhì)內(nèi)部的光照模型，目前也被應(yīng)用在最新的虛擬角色皮膚實(shí)時(shí)渲染中；但由于 SSS 材質(zhì)的計(jì)算需要依賴深度/厚度數(shù)據(jù)，所以 webGL 對(duì)這種高級(jí)光照效果的還原程度還是相對(duì)有限的。
圖 9-Unity 中模擬次表面散射光照模型效果 [ F8, ©?Alan Zucconi ]
非真實(shí)感渲染 Unphotorealistic Rendering
也就是我們常說(shuō)的 3 渲 2，非寫(xiě)實(shí)渲染風(fēng)格也是從人們對(duì) 3D 場(chǎng)景套以 2D 繪畫(huà)或自然媒體材質(zhì)需求而演化過(guò)來(lái)的。因此非寫(xiě)實(shí)渲染技術(shù)實(shí)際上是不同光照模型+不同著色處理共同作用的風(fēng)格化輸出，目前也被大量應(yīng)用在動(dòng)畫(huà)及游戲中，像《英雄聯(lián)盟：雙城之戰(zhàn)》《蜘蛛俠：平行宇宙》都是頂級(jí)三渲二大作。
圖 10-在不同通道中混合應(yīng)用真實(shí)感渲染及非真實(shí)感渲染效果 [ F9, ©?Polygon Runway]
卡通著色，一種最常見(jiàn)的以 3D 技術(shù)模擬扁平風(fēng)格的著色形式，通常以極簡(jiǎn)的顏色、漸變及明確的外框線等漫畫(huà)元素作為風(fēng)格特征。
圖 11-Blender 中不同類(lèi)型的 Toon Shader 效果 [ F10, ©?Blendernpr]
日本創(chuàng)意編程師 Misaki Nakano 制作了一個(gè)非常有趣的 Toon Shading H5 互動(dòng)頁(yè)面，大家可以體驗(yàn)一下不同著色形態(tài)下非常模型的視覺(jué)表現(xiàn)。點(diǎn)擊體驗(yàn)： https://mnmxmx.github.io/toon-shading/dst/index.html
圖 12-Misaki Nakano 的 Toon Shader 互動(dòng)網(wǎng)站 [ F11, ©?Misaki Nakano]
目前越來(lái)越多渲染器可支持設(shè)計(jì)師及工程師根據(jù)項(xiàng)目需求對(duì)著色進(jìn)行定制化處理，以產(chǎn)出更具風(fēng)格化和藝術(shù)化的著色效果。例如工業(yè)界插畫(huà)常用的冷暖著色（Gooch Shading），以及更具繪畫(huà)質(zhì)感的素描著色（Hatching）及油畫(huà)水墨畫(huà)等自然媒體著色，都已經(jīng)深入到了我們?nèi)粘５膭?chuàng)作之中。
圖 13-在 Unity 中，基于真實(shí)感渲染的貼圖效果與 NPR 水墨風(fēng)格化著色效果對(duì)比 [ F11, ©?鄧佳迪]
說(shuō)完真實(shí)感與非真實(shí)感渲染差異后，我們?cè)賮?lái)看看 Three.js 中的材質(zhì)。
和許多渲染引擎一樣，除了原生材質(zhì)外，webGL 的材質(zhì)和著色都是可以根據(jù)需求進(jìn)行定制的，但這往往會(huì)也帶來(lái)較高的開(kāi)發(fā)成本及兼容性風(fēng)險(xiǎn)。考慮到 H5 項(xiàng)目的實(shí)際應(yīng)用場(chǎng)景，下表羅列了 Three.js 原生材質(zhì)的對(duì)比，包含了材質(zhì)特性優(yōu)勢(shì)、貼圖差異及適用場(chǎng)景，大家可以基于項(xiàng)目需求快速選擇并混合使用：
圖 15 – three.js 材質(zhì)對(duì)比表
雖然著色、光照模型以及材質(zhì)渲染對(duì) 3D 表現(xiàn)有著最為直觀的影響，但 3D 工作流仍有一個(gè)隱秘而關(guān)鍵的環(huán)節(jié)——色彩管理。
真實(shí)世界中按照物理定律，如果光的強(qiáng)度增加一倍，那么亮度也會(huì)增加一倍，這是線性的關(guān)系。理想狀態(tài)下，像素在顯示屏上的亮度也應(yīng)為線性關(guān)系，才能符合人眼對(duì)真實(shí)世界的觀察效果（如圖 b：橫坐標(biāo)為像素的物理亮度，縱坐標(biāo)為像素顯示時(shí)的實(shí)際亮度）。
但是顯示器的成像由于電壓的影響，導(dǎo)致輸出亮度與電壓的關(guān)系是一個(gè)亮度等于電壓的 1.7-2.3 次冪的非線性關(guān)系，這就導(dǎo)致了當(dāng)電壓線性變化時(shí)，亮度的變化在暗處轉(zhuǎn)換時(shí)變慢，如果顯示器不經(jīng)過(guò)矯正，暗部成色也會(huì)整體偏暗（如圖 c）。目前大多數(shù)顯示器的 Gamma 值約為 2.2，所以也可以理解 Gamma2.2 是所有顯示器自帶的一個(gè)遺傳病。
圖 15-紅色上曲線=Gamma0.45=sRGB Space；綠色下曲線=Gamma2.2=顯示器真實(shí)成像缺陷；藍(lán)色斜線=Gamma1.0=Linear Space 真實(shí)物理世界線性關(guān)系
為了矯正顯示器的非線性問(wèn)題（從圖 c 校正回圖 b），我們需要對(duì)它進(jìn)行一個(gè) 2.2 次冪的逆運(yùn)算（如圖 a），在數(shù)學(xué)上，這是一個(gè)約 0.45 的冪運(yùn)算（Gamma0.45）。經(jīng)過(guò) 0.45 冪運(yùn)算，再由顯示器經(jīng)過(guò) 2.2 次冪輸出，最后的顏色就和實(shí)際物理空間的一致了，這套校正的操作就是伽馬校正（Gamma Correction）。
而我們常見(jiàn)的 sRGB 就是 Gamma0.45 所在的色彩空間，是 1996 由微軟與惠普共同開(kāi)發(fā)的標(biāo)準(zhǔn)色彩空間。當(dāng)照片素材一開(kāi)始儲(chǔ)存成 sRGB 空間，相當(dāng)于自帶一個(gè) Gamma0.45 的遺傳病抗體，當(dāng)它被顯示器顯示時(shí)，就自動(dòng)中和了顯示器 Gamma2.2 的缺陷，從而顯示出與物理世界相符的亮度。
另一個(gè)校正原因是因?yàn)槿搜墼诮邮芄饩€時(shí)的敏感度也不是線性的，人對(duì)于暗部的感知更敏感，對(duì)高亮區(qū)域感知較弱，而且人眼感知光強(qiáng)度與光的物理強(qiáng)度也剛好是對(duì)數(shù)關(guān)系。為了在暗部呈現(xiàn)更多人眼可感知的細(xì)節(jié)，Gamma0.45 的色彩空間中（如圖 a），像素的實(shí)際亮度也會(huì)高于它的物理亮度。
圖 16-人眼感知光強(qiáng)度與發(fā)射光真實(shí)物理強(qiáng)度對(duì)比
上面那一大段確實(shí)有點(diǎn)繞，但也就說(shuō)回來(lái)為什么建議渲染時(shí)使用線性空間（Linear Space）了。因?yàn)樵谟?jì)算機(jī)圖形中，著色器的運(yùn)算基本上都是基于物理世界的光照模型來(lái)保證渲染真實(shí)性的，如果模型的紋理輸入值是非線性的（sRGB），那么運(yùn)算的前提就不統(tǒng)一，輸出的結(jié)果自然就不那么真實(shí)了。
而在大多數(shù)工作流及渲染軟件中，大部分貼圖資源都是默認(rèn)輸出 sRGB 的（設(shè)計(jì)師作圖環(huán)境一般也在 sRGB，所見(jiàn)即所得），而法線貼圖、光線貼圖等紋理（純數(shù)值類(lèi)紋理，只用于計(jì)算）又是 Linear 的，這個(gè)部分就需要我們根據(jù)渲染引擎本身的特性，來(lái)判斷是否需要對(duì)不同的貼圖進(jìn)行不同的“去 Gamma 化”處理了（WebGL、Unity、Octane 等）。
將所有貼圖進(jìn)行去 Gamma 化，統(tǒng)一為 Linear 空間后，再在渲染輸出時(shí)由引擎統(tǒng)一進(jìn)行 Gamma 校正，這個(gè)時(shí)候在顯示屏里顯示的就是接近真實(shí)世界的效果了。
更多色彩空間的實(shí)際效果比較，大家可以看下 Unity 的文檔：《Linear/Gamma 渲染比較》：https://docs.unity3d.com/Manual/LinearRendering-LinearOrGammaWorkflow.html
回到 H5 所用的 Three.js，它的著色器計(jì)算也是默認(rèn)在 Linear 空間，如果最終渲染時(shí)不轉(zhuǎn)化為 sRGB，在設(shè)備顯示時(shí)可能會(huì)造成色彩失真。在 three.js 中色彩管理的工作流會(huì)根據(jù)導(dǎo)入模型 Asset 的差異而有所不同，如果貼圖與模型是分別導(dǎo)入場(chǎng)景，則建議可嘗試以下流程：
1. 輸入貼圖數(shù)據(jù) sRGB to Linear: 含色彩的貼圖（基礎(chǔ)材質(zhì)、環(huán)境、發(fā)光）設(shè)編碼為 sRGB（texture.encoding = sRGBEncoding），或?qū)秩驹O(shè)置 renderer.gammaInput 設(shè)為 True，可將原為 sRGB 的貼圖轉(zhuǎn)換為 Linear，而原純數(shù)值類(lèi)貼圖（法線、凹凸等）仍舊保持 Linear；這一操作可保證貼圖輸入數(shù)據(jù)的正確性與統(tǒng)一性。
2. 刷新材質(zhì)：當(dāng)材質(zhì)編碼類(lèi)型被修改后，需要設(shè)置 Material.needsUpdate 為 True，以重新編譯材質(zhì)。
3. 輸出渲染 Linear to sRGB: 校正渲染輸出值的 Gamma：
renderer.gammaOutput = true; renderer.gammaFactor = 2.2；以供顯示屏正確顯色。
《Part1-理論篇》就先告一段落啦，如果你偶發(fā)失眠，建議可以反復(fù)咀嚼延伸閱讀的內(nèi)容。
《Part2-實(shí)踐篇》會(huì)繼續(xù)完善 three.js 場(chǎng)景、材質(zhì)貼圖的制作思路、以及 gltf 工作流，并動(dòng)態(tài)討論項(xiàng)目常常遇到的還原問(wèn)題。
2022，咱們需求再見(jiàn)。
像素著色器 Pixel Shader
也稱(chēng)為片元/片段著色器（Fragment Shader）, 為二維著色器。它記錄了每一個(gè)像素的顏色、深度、透明度信息。最簡(jiǎn)單的像素著色器可用于記錄顏色，像素著色器通常使用相同的色階來(lái)表示光照屬性，以實(shí)現(xiàn)凹凸、陰影、高光、透明度等貼圖。同時(shí)，他們也可以用來(lái)修改每個(gè)像素的深度（Z-buffering）。
但是在 3D 圖像中，像素著色器可能無(wú)法實(shí)現(xiàn)一些復(fù)雜的效果，因?yàn)樗荒芸刂篇?dú)立的像素而并不含有場(chǎng)景中模型的頂點(diǎn)信息。不過(guò)，像素著色器擁有屏幕的坐標(biāo)信息，可以依據(jù)屏幕或鄰近像素的的材質(zhì)進(jìn)行采樣并增強(qiáng)，例如，Cel Shader 的邊緣強(qiáng)化或一些后期的模糊效果。
頂點(diǎn)著色器 Vextex Shader
是最常見(jiàn)的 3D 著色器，他記錄了模型每個(gè)頂點(diǎn)的位置、紋理坐標(biāo)、顏色等信息。它將每個(gè)頂點(diǎn)的 3D 位置信息轉(zhuǎn)換成 2D 屏幕坐標(biāo)。頂點(diǎn)著色器可以處理位置、顏色、紋理的坐標(biāo)，但是無(wú)法增加新的頂點(diǎn)。
幾何著色器 Geometry Shader
是最近新興的著色器，在 Direct3D 10 和 Open GL3.2 中被引用。這種著色器可以在圖元外生成新的頂點(diǎn)，從而轉(zhuǎn)換成新的圖元（例如點(diǎn)、線、三角等），而優(yōu)勢(shì)也是在于可以直接在著色中增加模型細(xì)節(jié)，減低 CPU 負(fù)擔(dān)。集合著色器的常用場(chǎng)景包括點(diǎn)精靈（Point Sprite）生成（粒子動(dòng)畫(huà)），細(xì)分曲面，體積陰影等。
細(xì)分曲面著色器 Tessellation Shader
在 OpenGL4.0 和 Direct3D 11 中出現(xiàn)，它可以在圖元內(nèi)鑲嵌更多三角體。為傳統(tǒng)模型新增了兩個(gè)著色步驟（一是細(xì)分控制著色，又稱(chēng)為 Hull Shader，二是細(xì)分評(píng)估著色，又稱(chēng)為 Domain Shader），兩者結(jié)合可以讓簡(jiǎn)單的模型快速獲得細(xì)分曲面。（例如，含細(xì)分曲面效果的模型加上置換貼圖就可以獲得極其逼真細(xì)膩的模型）
GL: Graphics Library, 圖形函數(shù)庫(kù)。
webGL：Web Graphics Library，Html 5 可接入的 3D 繪圖協(xié)議/函數(shù)庫(kù)，可以為 H5 Canvas 提供 3D 渲染的各類(lèi) API。
Z-Buffering：深度緩沖，3D 圖像在渲物體的時(shí)候，每一個(gè)生成的像素的深度會(huì)存儲(chǔ)在緩沖區(qū)中。如果另一個(gè)物體也在同一個(gè)像素中產(chǎn)生渲染結(jié)果，那么 GPU 會(huì)比較兩個(gè)物體的深度，優(yōu)先渲染距離更近的物體，這個(gè)過(guò)程叫做 Z-Culling。當(dāng)兩個(gè)物體靠很近的時(shí)候（16-bit），可能會(huì)出現(xiàn) Z-Fighting，也就是交疊閃爍的現(xiàn)象，使用 24 或 32bit 的 Buffer 可以有效緩解。
Rendering Pipeline：渲染管線/渲染流水線/像素流水線，為 GPU 的處理工作流，是 GPU 負(fù)責(zé)給圖形配上顏色的專(zhuān)門(mén)通道。管線越多，畫(huà)面越流暢精美。
圖 17-渲染管道細(xì)節(jié)工作流 [ F12 ]
Rasterization：光柵化/點(diǎn)陣化/柵格化，就是將管線處理完的圖元轉(zhuǎn)換成一系列屏幕可視的像素，過(guò)程包括：圖元拼裝（Primitive assembly）-三角形遍歷（Triangle Traversal）- Pixel Processing-Merging。
文章來(lái)源：優(yōu)設(shè) 作者：ISUX
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( m.ssll180.com )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
藍(lán)藍(lán)設(shè)計(jì)的小編 http://m.ssll180.com