3D to H5工作流應用手冊-理論篇

輯導語：作為產品設計師，你知道計算機是如何理解和實時渲染3D項目的嗎？相信你也曾為這個問題而困擾，本篇文章里，作者總結了相應的理論問題，也許可以幫你打通3D和H5之間的障礙。

前言

設計師需求中3D視覺平移到互動H5中的項目越來越多，three.js和PBR工作流的結合卻一直沒有被系統化地整理。

和各位前端神仙一起做項目，也一起磕磕碰碰出了愛與痛的領悟。小小總結，希望3D去往H5的道路天塹變通途。

本手冊主要分為兩大部分：

Part 1 理論篇：主要讓設計師了解計算機到底是如何理解和實時渲染我們設計的3D項目，以及three.js材質和預期材質的對應關系。

Part 2 實踐篇：基于three.js的實現性，提供場景、材質貼圖的制作思路、以及gltf工作流，并動態討論項目常常遇到的還原問題。

本文主要for剛接觸3D圖形學的設計師，僅截取了最常用的理論知識和大家一起學習。

部分涉及技術美術或計算機圖形學的描述可能不甚嚴謹，希望大家多多交流討論哈。

其實無論H5開發用到的是哪種webGL，設計相關的材質制作基本還是基于PBR思路進行的，所以這邊建議各位親可以先去閱讀一下Substance官方寶冊《The PBR Guide》。

理論篇

設計師在還原3D類型的互動H5項目的時候一定想過這個宇宙終極問題：為什么H5/Web實現的3D效果和C4D里渲染出來的差異那么大？

其實這是我們對實時渲染引擎（UE、Unity、three.js等）和離線渲染工具（Redshift、Octane、Vray等）的差異存在誤解：一是離線渲染工具是基于真實光照環境來計算每顆像素的著色，實時渲染如果要實現這種效果需要耗費更多硬件基礎和算力去模擬光照（沒個好顯卡都開不動光追）。

雖然UE5的實時渲染技術和硬件兼容性已經讓大家大吃一驚，但在實際項目，尤其是需要兼容低端設備的H5來說，渲染能力還是相對有限的。二是對于游戲或H5互動網站實際應用來說，流暢的互動體驗優先級往往高于畫面精細度，所以犧牲視覺保性能也是常見情況。

Octane離線渲染效果 VS three.js 實時渲染效果

材質細節、全局光照及投影、以及抗鋸齒表現差距明顯

當實時渲染效果與設計預期差距過大時，設計師能多了解一些基礎的計算機圖形學，也許就能更好地和開發同學商討性價比更高的視覺實現和資源優化方案（以及更多Battle的籌碼）。

1. 著色器與著色算法差異（靴靴微硬核預警）

首先我們要知道計算機之所以能在2D屏幕上畫出3D的圖像，是因為有著色器（Shader）在繪制，它將我們三維空間里的模型與光照信息進行轉換，并光柵化為二維圖像。在計算機圖形學中，著色器是用于對圖像的材質（光照、亮度、顏色）進行處理的程式。

常用的著色器分為四種：像素/片元著色器（Pixel/Fragment Shader）、頂點著色器（Vertex Shader）、幾何著色器（Geometry Shader）、細分曲面著色器（Tessellation Shader）。

像素/片元著色器與頂點著色器（Vertex Shader）在webGL處理過程中都有使用，頂點著色器先將模型中每個頂點的位置、紋理坐標、顏色等信息進行轉換裝配，再由片元著色器對3D信息光柵化并轉換成2D屏幕信息。（關于著色器差異，感興趣的同學可以直接跳到附錄查看。）

著色器是怎么把頂點中所帶有光照、紋理等信息轉換并重建在二維圖像的像素中呢？GPU中是透過不同的著色算法來實現的。

一種是獲取每個三角形的插值（Interpolate）來實現，這種方法稱作Per Vertex Lighting，但是當三角型很大的時候，插值往往不夠精準。此時還可以引用另一種方法Per Pixel Lighting，計算每個像素的光照信息，獲得更好的渲染效果，但是往往也帶來更大的計算量。

一般常見計算機圖形著色算法有三類：Flat Shading、Gouraud Shading、Phong Shading。這些算法雖然看起來和我們設計師沒啥關系，但事實上在后面了解three.js材質時，就會發現他們在呈現時的差異。

Flat、Gouraud、Blinn-Phong著色法比較 [ F1, ??Stefano Scheggi ]

1）平直著色法 Flat Shading

這種著色法認為模型中所有面都是平的，同一個多邊形的上任意點的法線方向都相同。著色時，會優先選擇多邊形的第一個頂點或三角形的幾何中心計算顏色。這種著色法實踐上的效果很像低面模型，也比較適合使用在高速渲染的場景。值得注意的是，這種著色法難以做出平滑高光效果。

2）高洛德平滑著色法 Gouraud Shading

這是一種平滑的著色方法，在著色時會先計算三角形每個頂點的光照特性，利用雙線插值去補齊三角形區域內其他像素的顏色。這個著色法的比起平直著色法增加了插值的細節，而且也比Phong著色法渲染單個像素的光照特性的性能要高。

但是在渲染高光時，可能會因為無法獲取精確的光照值而出現一些不自然的過渡（或T型連接容易被錯誤繪制），此時可以考慮對模型進行細分或使用漫反射材質。

3）Phong平滑著色法 Phong Shading

與Gouraud Shading不同的是，它會對頂點的法線進行插值，并透過每個像素的法向量計算光照特性。這種做法能繪制出精致、精準的曲面，但是計算量較大。Blinn-Phong是Phong的進階版，著色性能更好，且高光彌散更自然。

2. 基本光照模型 Illumination Model

簡單了解計算機如何繪制3D圖形后，再來看看它要如何具體理解我們所設計的3D場景。

3D轉換成2D，也就是3D柵格化的過程中，每一個像素的顏色是需要基于它所在的環境計算出來，而基于被渲染物體表面某個點的光強度計算模型就被稱為光照明模型（Illumination Model）或光照模型（Light Model），透過計算光照模型所得到表面位置對應像素顏色的過程被稱為表面繪制（Surface Render）。

*請注意這里說的光照模型并不是指設計師理解的3D立體模型，而是指模型對象表面光照效果的數學計算模型。

影響光照模型的因素有兩大方面，一是本身給渲染物體材質設置的各種光學特性（顏色反射系數、表面紋理、透明度等），二是場景中光源光及環境光（場景中各個被照明對象的反射光）。

傳統光照模型都是對漫反射和鏡面反射的理想化模擬，如果要還原基于真實物理世界的效果，光照模型需要遵循能量守恒定律：一個物體能反射的光必然少于它接受的光。在實踐層面則表現為，一個漫反射更強且更粗糙的物體會反射更暗且范圍更大的高光，反之亦反。

基于PBR的光照模型需要遵循能量守恒定律 [ F2, ??Joe Wilson ]

光照模型與著色組合在不同的渲染需求下也會有不同的應用：

真實感渲染（Photorealistic Rendering）：目的是基于真實物理世界對3D場景進行仿真還原。
非真實感渲染（Unphotorealistic Rendering）：也被成為風格化渲染（Stylistic Rendering），會更抽象化地對模型進行重繪。

真實感渲染及非真實感渲染對比 [ F3, ??Autodesk ]

1）真實感渲染 Photorealistic Rendering

考慮到真實感渲染對硬件的依賴，目前webGL中使用的一般以簡單的局部光照模型為主（只計算光源對物體的光照效果，不計算物體間的相互影響，我們看到的“假反射”通常透過貼圖來進行模擬），根據反射形態，經典的光照模型有下列幾種：

Lambert 漫反射模型：

這種模型的粗糙表面（如塑料、石材等）會將反射光從各個方向反射出去，而這種光反射也稱為漫反射。理想的漫反射體我們通常稱作郎伯反射體（Lambertian Reflectors），也就是我們熟悉的橡膠材質。

漫反射模型與其他光照模型對比 [ F4, ??ViroCore ]

Phong 鏡面反射模型：

這是一種以實驗及觀察為合成基礎的非物理模型。它的表面反射同時結合了粗糙表面漫反射和光滑表面鏡面反射，但Phong模型在高光處的表現有過渡瑕疵。

Phong鏡面反射模型視覺構成 [ F5 ]

Blinn–Phong 模型：

是在OpenGL和Direct3D里默認的著色模型，一種調優后的非物理的Phong模型，頂點間的像素插值使用Gouraud著色算法，比Phong著色算法性能更好，而且高光效果也更平滑。

Phong及Blinn-Phong鏡面反射模型對比 [ F6 ]

Cook-Torrance/GGX 光照模型：

如果你用過C4D的默認渲染器，那么一定在材質的反射通道設置中見過它倆。

這是相對高級的光照模型，不同于Phong和Blinn-Phong模型僅僅對漫反射及鏡面反射進行理想化模擬，這兩個光照模型基于不同物理材質加入了微表面（Microfacet）的概念，并考慮到表面粗糙度對反射的影響，對鏡面反射進行了調優，使得高光的長尾彌散更加自然，也是目前PBR渲染管線（Unity、UE）中較常用的光照模型。

Phong、Blinn-Phong與GGX鏡面反射模型對比 [ F7, ??ridgestd ]

次表面散射模型 Subsurface scattering/SSS：

終于有一個設計師們常見的概念了。次表面散射是指光穿透不透明物體時（皮膚、液體、毛玻璃等）的散射現象。現實生活中，大部分物體都是半透明的，光會先穿透物體表面，繼而在物體內被吸收、多次反射、然后在不同的點穿出物體。以皮膚為例，只有大概6%的反射是直接反射，而94%的反射都是次表面散射。

BSSRDF（雙向次表面反射分布函數）是用于描述入射光在介質內部的光照模型，目前也被應用在最新的虛擬角色皮膚實時渲染中；但由于SSS材質的計算需要依賴深度/厚度數據，所以webGL對這種高級光照效果的還原程度還是相對有限的。

Unity中模擬次表面散射光照模型效果 [ F8, ??Alan Zucconi ]

2）非真實感渲染 Non-Photorealistic Rendering-NPR

也就是我們常說的3渲2，非寫實渲染風格也是從人們對3D場景套以2D繪畫或自然媒體材質需求而演化過來的。因此非寫實渲染技術實際上是不同光照模型+不同著色處理共同作用的風格化輸出，目前也被大量應用在動畫及游戲中，像《英雄聯盟：雙城之戰》《蜘蛛俠：平行宇宙》都是頂級三渲二大作。

在不同通道中混合應用真實感渲染及非真實感渲染效果 [ F9, ??Polygon Runway]

Cel Shading/Toon Shading：

卡通著色，一種最常見的以3D技術模擬扁平風格的著色形式，通常以極簡的顏色、漸變及明確的外框線等漫畫元素作為風格特征。

Blender中不同類型的Toon Shader效果 [ F10, ??Blendernpr]

日本創意編程師Misaki Nakano制作了一個非常有趣的Toon Shading H5互動頁面，大家可以體驗一下不同著色形態下非常模型的視覺表現。搜索體驗：https://mnmxmx.github.io/toon-shading/dst/index.html

Misaki Nakano的Toon Shader互動網站 [ F11, ??Misaki Nakano]

Customized Shading：

目前越來越多渲染器可支持設計師及工程師根據項目需求對著色進行定制化處理，以產出更具風格化和藝術化的著色效果。例如工業界插畫常用的冷暖著色（Gooch Shading），以及更具繪畫質感的素描著色（Hatching）及油畫水墨畫等自然媒體著色，都已經深入到了我們日常的創作之中。

在Unity中，基于真實感渲染的貼圖效果與NPR水墨風格化著色效果對比 [ F11, ??鄧佳迪]

3. Three.js 材質著色對比

說完真實感與非真實感渲染差異后，我們再來看看Three.js中的材質。

和許多渲染引擎一樣，除了原生材質外，webGL的材質和著色都是可以根據需求進行定制的，但這往往會也帶來較高的開發成本及兼容性風險。考慮到H5項目的實際應用場景，下表羅列了Three.js原生材質的對比，包含了材質特性優勢、貼圖差異及適用場景，大家可以基于項目需求快速選擇并混合使用：

three.js材質對比表

4. 色彩描述與管理 Color Space

雖然著色、光照模型以及材質渲染對3D表現有著最為直觀的影響，但3D工作流仍有一個隱秘而關鍵的環節——色彩管理。

真實世界中按照物理定律，如果光的強度增加一倍，那么亮度也會增加一倍，這是線性的關系。理想狀態下，像素在顯示屏上的亮度也應為線性關系，才能符合人眼對真實世界的觀察效果（如圖b：橫坐標為像素的物理亮度，縱坐標為像素顯示時的實際亮度）。

但是顯示器的成像由于電壓的影響，導致輸出亮度與電壓的關系是一個亮度等于電壓的1.7-2.3次冪的非線性關系，這就導致了當電壓線性變化時，亮度的變化在暗處轉換時變慢，如果顯示器不經過矯正，暗部成色也會整體偏暗（如圖c）。目前大多數顯示器的Gamma值約為2.2，所以也可以理解Gamma2.2是所有顯示器自帶的一個遺傳病。

紅色上曲線=Gamma0.45=sRGB Space
綠色下曲線=Gamma2.2=顯示器真實成像缺陷
藍色斜線=Gamma1.0=Linear Space 真實物理世界線性關系

為了矯正顯示器的非線性問題（從圖c校正回圖b），我們需要對它進行一個2.2次冪的逆運算（如圖a），在數學上，這是一個約0.45的冪運算（Gamma0.45）。經過0.45冪運算，再由顯示器經過2.2次冪輸出，最后的顏色就和實際物理空間的一致了，這套校正的操作就是伽馬校正（Gamma Correction）。

而我們常見的sRGB就是Gamma0.45所在的色彩空間，是1996由微軟與惠普共同開發的標準色彩空間。當照片素材一開始儲存成sRGB空間，相當于自帶一個Gamma0.45的遺傳病抗體，當它被顯示器顯示時，就自動中和了顯示器Gamma2.2的缺陷，從而顯示出與物理世界相符的亮度。

另一個校正原因是因為人眼在接受光線時的敏感度也不是線性的，人對于暗部的感知更敏感，對高亮區域感知較弱，而且人眼感知光強度與光的物理強度也剛好是對數關系。為了在暗部呈現更多人眼可感知的細節，Gamma0.45的色彩空間中（如圖a），像素的實際亮度也會高于它的物理亮度。

人眼感知光強度與發射光真實物理強度對比

上面那一大段確實有點繞，但也就說回來為什么建議渲染時使用線性空間（Linear Space）了。因為在計算機圖形中，著色器的運算基本上都是基于物理世界的光照模型來保證渲染真實性的，如果模型的紋理輸入值是非線性的（sRGB），那么運算的前提就不統一，輸出的結果自然就不那么真實了。

而在大多數工作流及渲染軟件中，大部分貼圖資源都是默認輸出sRGB的（設計師作圖環境一般也在sRGB，所見即所得），而法線貼圖、光線貼圖等紋理（純數值類紋理，只用于計算）又是Linear的，這個部分就需要我們根據渲染引擎本身的特性，來判斷是否需要對不同的貼圖進行不同的”去Gamma化”處理了（WebGL、Unity、Octane等）。

將所有貼圖進行去Gamma化，統一為Linear空間后，再在渲染輸出時由引擎統一進行Gamma校正，這個時候在顯示屏里顯示的就是接近真實世界的效果了。

更多色彩空間的實際效果比較，大家可以看下Unity的文檔：《Linear/Gamma渲染比較》：

https://docs.unity3d.com/Manual/LinearRendering-LinearOrGammaWorkflow.html

回到H5所用的Three.js，它的著色器計算也是默認在Linear空間，如果最終渲染時不轉化為sRGB，在設備顯示時可能會造成色彩失真。在three.js中色彩管理的工作流會根據導入模型Asset的差異而有所不同，如果貼圖與模型是分別導入場景，則建議可嘗試以下流程：

1）輸入貼圖數據 sRGB to Linear: 含色彩的貼圖（基礎材質、環境、發光）設編碼為sRGB（texture.encoding = sRGBEncoding），或將渲染設置renderer.gammaInput設為True，可將原為sRGB的貼圖轉換為Linear，而原純數值類貼圖（法線、凹凸等）仍舊保持Linear；這一操作可保證貼圖輸入數據的正確性與統一性。

2）刷新材質：當材質編碼類型被修改后，需要設置Material.needsUpdate為True，以重新編譯材質。

3）輸出渲染 Linear to sRGB: 校正渲染輸出值的Gamma：renderer.gammaOutput = true; renderer.gammaFactor = 2.2；以供顯示屏正確顯色。

《Part1-理論篇》就先告一段落啦，如果你偶發失眠，建議可以反復咀嚼延伸閱讀的內容。

《Part2-實踐篇》會繼續完善three.js場景、材質貼圖的制作思路、以及gltf工作流，并動態討論項目常常遇到的還原問題。

2022，咱們需求再見。

附錄

1）著色器差異

① 像素著色器 Pixel Shader

也稱為片元/片段著色器（Fragment Shader）, 為二維著色器。它記錄了每一個像素的顏色、深度、透明度信息。最簡單的像素著色器可用于記錄顏色，像素著色器通常使用相同的色階來表示光照屬性，以實現凹凸、陰影、高光、透明度等貼圖。同時，他們也可以用來修改每個像素的深度（Z-buffering）。

但是在3D圖像中，像素著色器可能無法實現一些復雜的效果，因為它只能控制獨立的像素而并不含有場景中模型的頂點信息。不過，像素著色器擁有屏幕的坐標信息，可以依據屏幕或鄰近像素的的材質進行采樣并增強，例如，Cel Shader的邊緣強化或一些后期的模糊效果。

② 頂點著色器 Vextex Shader

是最常見的3D著色器，他記錄了模型每個頂點的位置、紋理坐標、顏色等信息。它將每個頂點的3D位置信息轉換成2D屏幕坐標。頂點著色器可以處理位置、顏色、紋理的坐標，但是無法增加新的頂點。

③ 幾何著色器 Geometry Shader

是最近新興的著色器，在Direct3D 10 和Open GL3.2中被引用。這種著色器可以在圖元外生成新的頂點，從而轉換成新的圖元（例如點、線、三角等），而優勢也是在于可以直接在著色中增加模型細節，減低CPU負擔。集合著色器的常用場景包括點精靈（Point Sprite）生成（粒子動畫），細分曲面，體積陰影等。

④ 細分曲面著色器 Tessellation Shader

在OpenGL4.0和 Direct3D 11中出現，它可以在圖元內鑲嵌更多三角體。為傳統模型新增了兩個著色步驟（一是細分控制著色，又稱為Hull Shader，二是細分評估著色，又稱為Domain Shader），兩者結合可以讓簡單的模型快速獲得細分曲面。（例如，含細分曲面效果的模型加上置換貼圖就可以獲得極其逼真細膩的模型）

2）一些術語的簡單理解

GL：Graphics Library, 圖形函數庫。

webGL：Web Graphics Library，Html 5可接入的3D繪圖協議/函數庫，可以為H5 Canvas提供3D渲染的各類API。

Z-Buffering：

深度緩沖，3D圖像在渲物體的時候，每一個生成的像素的深度會存儲在緩沖區中。如果另一個物體也在同一個像素中產生渲染結果，那么GPU會比較兩個物體的深度，優先渲染距離更近的物體，這個過程叫做Z-Culling。當兩個物體靠很近的時候（16-bit），可能會出現Z-Fighting，也就是交疊閃爍的現象，使用24或32bit的Buffer可以有效緩解。

Rendering Pipeline：

渲染管線/渲染流水線/像素流水線，為GPU的處理工作流，是GPU負責給圖形配上顏色的專門通道。管線越多，畫面越流暢精美。

渲染管道細節工作流 [ F12 ]

Rasterization：

光柵化/點陣化/柵格化，就是將管線處理完的圖元轉換成一系列屏幕可視的像素，過程包括：圖元拼裝（Primitive assembly）-三角形遍歷（Triangle Traversal）- Pixel Processing-Merging。

3）參考文獻+延伸閱讀

[1]Hearn, D. and Baker, M.P., 2004. Computer graphics with OpenGL, 計算機圖形學第四版 . Upper Saddle River, NJ: Pearson Prentice Hall,.

[2]Akenine-M?ller, T., Haines, E. and Hoffman, N., 2019.Real-time rendering. Crc Press.

[3]銳萌瑞, 經典光照模型（illumination model）

https://blog.csdn.net/qq_34552886/article/details/79089418

[4]Krishnaswamy, A; Baronoski, GVG (2004). “A Biophysically-based Spectral Model of Light Interaction with Human Skin” (PDF).

[5] List of Common Shading Algorithm：

https://en.wikipedia.org/wiki/List_of_common_shading_algorithms

[6] 0向往0, 剖析Unreal Engine超真實人類的渲染技術Part 1 – 概述和皮膚渲染

https://www.cnblogs.com/timlly/p/11098212.html

[7] 毛星云, 【《Real-Time Rendering 3rd》提煉總結】(十) 第十一章 · 非真實感渲染(NPR)相關技術總結

https://zhuanlan.zhihu.com/p/31194204

[8] 卜噪大仙，局部光照模型雜記【Lambert/Phong/Blin-Phong/BRDF/BSSRDF/Cook-Torrance】

https://www.jianshu.com/p/96ca495669d6

[9] puppet_masterm, Unity Shader-Matcap（材質捕獲）

https://blog.csdn.net/puppet_master/article/details/83582477

[10] WestLangley, documentation on gamma correction incorrect? #11110

https://github.com/mrdoob/three.js/issues/11110

[11] donmccurdy, Best practise for color management

https://github.com/aframevr/aframe/issues/3509

https://github.com/mrdoob/three.js/issues/11337#issuecomment-440795075

[12] alteredq, Questions about the use of Gamma Correction in the WebGL Renderer #1488

https://github.com/mrdoob/three.js/issues/1488

[13] Friksel, What’s this about gammaFactor?

https://discourse.threejs.org/t/whats-this-about-gammafactor/4264/3

[14] PZZZB，Linear Space Lightning、Gamma、sRGB詳情講解：

https://zhuanlan.zhihu.com/p/66558476

[15] Learn OpenGL, Gamma Correction

https://learnopengl.com/Advanced-Lighting/Gamma-Correction

[16] 柯靈杰，3D圖形學基礎：

https://zhuanlan.zhihu.com/p/27846162?source=post_page—–b1cde1f23adf———————-

[17] Klayge游戲引擎，關于D3D11你必須了解的幾件事情（三）

http://www.klayge.org/?p=1404

[18] 拓荒犬, GPU渲染流水線簡介

https://zhuanlan.zhihu.com/p/61949898

[19] Steve Baker, Learning to Love your Z-buffer.

https://www.sjbaker.org/steve/omniv/love_your_z_buffer.html

[20] Steve Baker, Alpha-blending and the Z-buffer.

https://www.sjbaker.org/steve/omniv/alpha_sorting.html

[21] Microsoft, Direct3D 11 Graphics-Tessellation Stages

https://docs.microsoft.com/en-us/windows/win32/direct3d11/direct3d-11-advanced-stages-tessellation#domain-shader-stage

[F1] Stefano Scheggi, Flat shading vs. Gouraud shading vs. Blinn-Phong shading

https://www.youtube.com/watch?v=VRw3GuVdldo

[F2] Joe Wilson, Physically-Based Rendering, And You Can Too!

https://marmoset.co/posts/basic-theory-of-physically-based-rendering/

[F3] Autodesk, Apply Visual Effects

https://download.autodesk.com/us/mudbox/help2011_5/index.html?url=./files/WS1a9193826455f5ff5cf1d02511b1d000978-6b44.htm,topicNumber=d0e8759

[F4] Virocore, Lighting and Materials

https://virocore.viromedia.com/v1.0.0/docs/3d-scene-lighting

[F5] Wikipedia, Phong Reflection Model

https://en.wikipedia.org/wiki/Phong_reflection_model

[F6] Wikipedia, Blinn–Phong reflection model

https://en.wikipedia.org/wiki/Blinn%E2%80%93Phong_reflection_model#cite_note-4

[F7] Ridgestd，從Microfacet到GGX反射模型

http://ridgestd.github.io/2019/03/18/ggx-shader/

[F8] Alan Zucconi, Fast Subsurface Scattering in Unity (Part 2)

https://www.alanzucconi.com/tag/sss/

[F9] Polygon Runway, Toon Shading Tutorial for Blender 2.8 with Commentary

https://www.youtube.com/watch?v=kriKwtzZWFg

[F10] Blendernpr, Basic Toon Shaders with Blender

]http://blendernpr.org/basic-toon-shaders-with-blender-internal/

[F11] 鄧佳笛，在Unity進行水墨風3D渲染的嘗試

https://zhuanlan.zhihu.com/p/25346977

[F12] Wikipedia, Graphics_pipeline

https://en.wikipedia.org/wiki/Graphics_pipeline

本文由 @騰訊ISUX 原創發布于人人都是產品經理。未經許可，禁止轉載

題圖來自Unsplash，基于CC0協議。

過四個月的內測與持續的技術迭代與優化，「團結引擎創世版」正式開放下載。

下載鏈接：https://unity.cn/tuanjie/releases

據介紹，此次發布的團結引擎創世版，帶來了完整的一站式微信小游戲解決方案，以及專為汽車智能座艙開發打造的團結引擎車機版，新增了對國產操作系統 OpenHarmony 的支持，并且展示了 beta 版本的虛擬幾何體（Virtual Geometry）功能。

在性能分析層面，團結引擎創世版增添了加強版的 Profiler 工具，新增 Frame Debugger 支持，可以深入分析渲染步驟；并在 Profiler 中新增 AssetBundle 的數量和內存統計，覆蓋了 NativeHeap、JS 文件系統等，幫助用戶全面分析 AssetBundle 的內存占用。

更多詳情訪問以下鏈接：https://docs.unity.cn/cn/tuanjiemanual/Manual/intro.html

多人想制作他們自己的主題，因此這是一篇關于 GTK 主題的制作以及各種制作時所必需的信息的文章。注意：這篇文章著重討論 GTK3，但會稍微談一下 GTK2、Metacity 等。本文不會討論光標和圖標。 -- DevynCJohnson

本文導航
-基本概念 …… 03%
-主題存放位置 …… 08%
-主題引擎 …… 14%
-創作 GTK3 主題 …… 18%
-測試主題 …… 78%
-主題下載 …… 85%
-延伸閱讀 …… 92%

編譯自： http://www.linux.org/threads/installing-obtaining-and-making-gtk-themes.8463/
作者： DevynCJohnson
譯者： fuowang

多數桌面版 Linux 都支持主題。GUI（LCTT 譯注：圖形用戶界面）獨有的外觀或者“風格”叫做主題。用戶可以改變主題讓桌面看起來與眾不同。通常，用戶也會更改圖標，然而，主題和圖標包是兩個獨立的實體。很多人想制作他們自己的主題，因此這是一篇關于 GTK 主題的制作以及各種制作時所必需的信息的文章。

注意：這篇文章著重討論 GTK3，但會稍微談一下 GTK2、Metacity 等。本文不會討論光標和圖標。

基本概念

GIMP 工具包（簡稱 GTK）是一個用來在多種系統上（因此造就了 GTK 的跨平臺）創建圖形用戶界面的構件工具包。GTK（http://www.gtk.org/）通常被誤認為代表“GNOME 工具包”，但實際上它代表“GIMP 工具包”，因為最初創造它是為了給 GIMP 設計用戶界面。GTK 是一個用 C 語言編寫的面向對象工具包（GTK 本身不是一種語言）。GTK 遵循 LGPL 協議完全開源。GTK 是一個廣泛使用的圖形用戶界面工具包，它含有很多用于 GTK 的工具。

為 GTK 制作的主題無法用在基于 Qt 的應用上。QT 應用需要使用 Qt 主題。

主題使用層疊樣式表（CSS）來生成主題樣式。這里的 CSS 和網站開發者在網頁上使用的相同。然而不是引用 HTML 標簽，而是引用 GTK 構件的專用標簽。學習 CSS 對主題開發者來說很重要。

主題存放位置

主題可能會存儲在 ~/.themes 或者 /usr/share/themes 文件夾中。存放在 ~/.themes 文件夾下的主題只有此 home 文件夾的所有者可以使用。而存放在 /usr/share/themes 文件夾下的全局主題可供所有用戶使用。當執行 GTK 程序時，它會按照某種確定的順序檢查可用主題文件的列表。如果沒有找到主題文件，它會嘗試檢查列表中的下一個文件。下述文字是 GTK3 程序檢查時的順序列表。

$XDG_CONFIG_HOME/gtk-3.0/gtk.css （另一寫法 ~/.config/gtk-3.0/gtk.css）
~/.themes/NAME/gtk-3.0/gtk.css
$datadir/share/themes/NAME/gtk-3.0/gtk.css （另一寫法 /usr/share/themes/name/gtk-3.0/gtk.css）

注意： “NAME”代表當前主題名稱。

如果有兩個主題名字相同，那么存放在用戶 home 文件夾（~/.themes）里的主題會被優先使用。開發者可以利用這個 GTK 主題查找算法的優勢來測試存放在本地 home 文件夾的主題。

主題引擎

主題引擎是軟件的一部分，用來改變圖形用戶界面構件的外觀。引擎通過解析主題文件來了解應當繪制多少種構件。有些引擎隨著主題被開發出來。每種引擎都有優點和缺點，還有些引擎添加了某些特性和特色。

從默認軟件源中可以獲取很多主題引擎。Debian 系的 Linux 發行版可以執行 apt-get install gtk2-engines-murrine gtk2-engines-pixbuf gtk3-engines-unico 命令來安裝三種不同的引擎。很多引擎同時支持 GTK2 和 GTK3。以下述列表為例：

gtk2-engines-aurora - Aurora GTK2 引擎
gtk2-engines-pixbuf - Pixbuf GTK2 引擎
gtk3-engines-oxygen - 將 Oxygen 組件風格移植 GTK 的引擎
gtk3-engines-unico - Unico GTK3 引擎
gtk3-engines-xfce - 用于 Xfce 的 GTK3 引擎

創作 GTK3 主題

開發者創作 GTK3 主題時，或者從空文件著手，或者將已有的主題作為模板。從現存主題著手可能會對新手有幫助。比如，開發者可以把主題復制到用戶的 home 文件夾，然后編輯這些文件。

GTK3 主題的通用格式是新建一個以主題名字命名的文件夾。然后新建一個名為 gtk-3.0 的子目錄，在子目錄里新建一個名為 gtk.css 的文件。在文件 gtk.css 里，使用 CSS 代碼寫出主題的外觀。為了測試可以將主題移動到 ~/.theme 里。使用新主題并在必要時進行改進。如果有需求，開發者可以添加額外的組件，使主題支持 GTK2、Openbox、Metacity、Unity 等桌面環境。

為了闡明如何創造主題，我們會學習 Ambiance 主題，通常可以在 /usr/share/themes/Ambiance 找到它。此目錄包含下面列出的子目錄以及一個名為 index.theme 的文件。

gtk-2.0
gtk-3.0
metacity-1
unity

index.theme 含有元數據（比如主題的名字）和一些重要的配置（比如按鈕的布局）。下面是 Ambiance 主題的 index.theme 文件內容。

[Desktop Entry]
Type=X-GNOME-Metatheme
Name=Ambiance
Comment=Ubuntu Ambiance theme
Encoding=UTF-8
[X-GNOME-Metatheme]
GtkTheme=Ambiance
MetacityTheme=Ambiance
IconTheme=ubuntu-mono-dark
CursorTheme=DMZ-White
ButtonLayout=close,minimize,maximize:
X-Ubuntu-UseOverlayScrollbars=true

gtk-2.0 目錄包括支持 GTK2 的文件，比如文件 gtkrc 和文件夾 apps。文件夾 apps 包括具體程序的 GTK 配置。文件 gtkrc 是 GTK2 部分的主要 CSS 文件。下面是 /usr/share/themes/Ambiance/gtk-2.0/apps/nautilus.rc 文件的內容。

# ==============================================================================
# NAUTILUS SPECIFIC SETTINGS
# ==============================================================================
style "nautilus_info_pane" {
bg[NORMAL] = @bg_color
}
widget_class "*Nautilus*<GtkNotebook>*<GtkEventBox>" style "nautilus_info_pane"
widget_class "*Nautilus*<GtkButton>" style "notebook_button"
widget_class "*Nautilus*<GtkButton>*<GtkLabel>" style "notebook_button"

gtk-3.0 目錄里是 GTK3 的文件。GTK3 使用 gtk.css 取代了 gtkrc 作為主文件。對于 Ambiance 主題，此文件有一行 @import url("gtk-main.css");。settings.ini 包含重要的主題級配置。GTK3 主題的 apps 目錄和 GTK2 有同樣的作用。assets 目錄里有單選按鈕、多選框等的圖像文件。下面是 /usr/share/themes/Ambiance/gtk-3.0/gtk-main.css 的內容。

/*default color scheme */
@define-color bg_color #f2f1f0;
@define-color fg_color #4c4c4c;
@define-color base_color #ffffff;
@define-color text_color #3C3C3C;
@define-color selected_bg_color #f07746;
@define-color selected_fg_color #ffffff;
@define-color tooltip_bg_color #000000;
@define-color tooltip_fg_color #ffffff;
/* misc colors used by gtk+
*
* Gtk doesn't currently expand color variables for style properties. Thus,
* gtk-widgets.css uses literal color names, but includes a comment containing
* the name of the variable. Please remember to change values there as well
* when changing one of the variables below.
*/
@define-color info_fg_color rgb (181, 171, 156);
@define-color info_bg_color rgb (252, 252, 189);
@define-color warning_fg_color rgb (173, 120, 41);
@define-color warning_bg_color rgb (250, 173, 61);
@define-color question_fg_color rgb (97, 122, 214);
@define-color question_bg_color rgb (138, 173, 212);
@define-color error_fg_color rgb (235, 235, 235);
@define-color error_bg_color rgb (223, 56, 44);
@define-color link_color @selected_bg_color;
@define-color success_color #4e9a06;
@define-color error_color #df382c;
/* theme common colors */
@define-color button_bg_color shade (@bg_color, 1.02); /*shade (#cdcdcd, 1.08);*/
@define-color notebook_button_bg_color shade (@bg_color, 1.02);
@define-color button_insensitive_bg_color mix (@button_bg_color, @bg_color, 0.6);
@define-color dark_bg_color #3c3b37;
@define-color dark_fg_color #dfdbd2;
@define-color backdrop_fg_color mix (@bg_color, @fg_color, 0.8);
@define-color backdrop_text_color mix (@base_color, @text_color, 0.8);
@define-color backdrop_dark_fg_color mix (@dark_bg_color, @dark_fg_color, 0.75);
/*@define-color backdrop_dark_bg_color mix (@dark_bg_color, @dark_fg_color, 0.75);*/
@define-color backdrop_selected_bg_color shade (@bg_color, 0.92);
@define-color backdrop_selected_fg_color @fg_color;
@define-color focus_color alpha (@selected_bg_color, 0.5);
@define-color focus_bg_color alpha (@selected_bg_color, 0.1);
@define-color shadow_color alpha(black, 0.5);
@define-color osd_fg_color #eeeeec;
@define-color osd_bg_color alpha(#202526, 0.7);
@define-color osd_border_color alpha(black, 0.7);
@import url("gtk-widgets-borders.css");
@import url("gtk-widgets-assets.css");
@import url("gtk-widgets.css");
@import url("apps/geary.css");
@import url("apps/unity.css");
@import url("apps/baobab.css");
@import url("apps/gedit.css");
@import url("apps/nautilus.css");
@import url("apps/gnome-panel.css");
@import url("apps/gnome-terminal.css");
@import url("apps/gnome-system-log.css");
@import url("apps/unity-greeter.css");
@import url("apps/glade.css");
@import url("apps/california.css");
@import url("apps/software-center.css");
@import url("public-colors.css");

metacity-1 文件夾含有 Metacity 窗口管理器按鈕（比如“關閉窗口”按鈕）的圖像文件。此目錄還有一個名為 metacity-theme-1.xml 的文件，包括了主題的元數據（像開發者的名字）和主題設計。然而，主題的 Metacity 部分使用 XML 文件而不是 CSS 文件。

unity 文件夾含有 Unity 按鈕使用的 SVG 文件。除了 SVG 文件，這里沒有其他的文件。

一些主題可能也會包含其他的目錄。比如， Clearlooks-Phenix 主題有名為 openbox-3 和 xfwm4 的文件夾。openbox-3 文件夾僅有一個 themerc 文件，聲明了主題配置和外觀（下面有文件示例）。xfwm4 目錄含有幾個 xpm 文件、幾個 png 圖像文件（在 png 文件夾里）、一個 README 文件，還有個包含了主題配置的 themerc 文件（就像下面看到的那樣）。

/usr/share/themes/Clearlooks-Phenix/xfwm4/themerc

# Clearlooks XFWM4 by Casey Kirsle
show_app_icon=true
active_text_color=#FFFFFF
inactive_text_color=#939393
title_shadow_active=frame
title_shadow_inactive=false
button_layout=O|HMC
button_offset=2
button_spacing=2
full_width_title=true
maximized_offset=0
title_vertical_offset_active=1
title_vertical_offset_inactive=1

/usr/share/themes/Clearlooks-Phenix/openbox-3/themerc

!# Clearlooks-Evolving
!# Clearlooks as it evolves in gnome-git...
!# Last updated 09/03/10
# Fonts
# these are really halos, but who cares?
*.font: shadow=n
window.active.label.text.font:shadow=y:shadowtint=30:shadowoffset=1
window.inactive.label.text.font:shadow=y:shadowtint=00:shadowoffset=0
menu.items.font:shadow=y:shadowtint=0:shadowoffset=1
!# general stuff
border.width: 1
padding.width: 3
padding.height: 2
window.handle.width: 3
window.client.padding.width: 0
menu.overlap: 2
*.justify: center
!# lets set our damn shadows here, eh?
*.bg.highlight: 50
*.bg.shadow: 05
window.active.title.bg.highlight: 35
window.active.title.bg.shadow: 05
window.inactive.title.bg.highlight: 30
window.inactive.title.bg.shadow: 05
window.*.grip.bg.highlight: 50
window.*.grip.bg.shadow: 30
window.*.handle.bg.highlight: 50
window.*.handle.bg.shadow: 30
!# Menu settings
menu.border.color: #aaaaaa
menu.border.width: 1
menu.title.bg: solid flat
menu.title.bg.color: #E6E7E6
menu.title.text.color: #111111
menu.items.bg: Flat Solid
menu.items.bg.color: #ffffff
menu.items.text.color: #111111
menu.items.disabled.text.color: #aaaaaa
menu.items.active.bg: Flat Gradient splitvertical border
menu.items.active.bg.color: #97b8e2
menu.items.active.bg.color.splitTo: #a8c5e9
menu.items.active.bg.colorTo: #91b3de
menu.items.active.bg.colorTo.splitTo: #80a7d6
menu.items.active.bg.border.color: #4b6e99
menu.items.active.text.color: #ffffff
menu.separator.width: 1
menu.separator.padding.width: 0
menu.separator.padding.height: 3
menu.separator.color: #aaaaaa
!# set handles here and only the once?
window.*.handle.bg: Raised solid
window.*.handle.bg.color: #eaebec
window.*.grip.bg: Raised solid
window.*.grip.bg.color: #eaebec
!# Active
window.*.border.color: #585a5d
window.active.title.separator.color: #4e76a8
*.title.bg: Raised Gradient splitvertical
*.title.bg.color: #8CB0DC
*.title.bg.color.splitTo: #99BAE3
*.title.bg.colorTo: #86ABD9
*.title.bg.colorTo.splitTo: #7AA1D1
window.active.label.bg: Parentrelative
window.active.label.text.color: #ffffff
window.active.button.*.bg: Flat Gradient splitvertical Border
window.active.button.*.bg.color: #92B4DF
window.active.button.*.bg.color.splitTo: #B0CAEB
window.active.button.*.bg.colorTo: #86ABD9
window.active.button.*.bg.colorTo.splitTo: #769FD0
window.active.button.*.bg.border.color: #49678B
window.active.button.*.image.color: #F4F5F6
window.active.button.hover.bg.color: #b5d3ef
window.active.button.hover.bg.color.splitTo: #b5d3ef
window.active.button.hover.bg.colorTo: #9cbae7
window.active.button.hover.bg.colorTo.splitTo: #8caede
window.active.button.hover.bg.border.color: #4A658C
window.active.button.hover.image.color: #ffffff
window.active.button.pressed.bg: Flat solid Border
window.active.button.pressed.bg.color: #7aa1d2
window.active.button.hover.bg.border.color: #4A658C
!# inactive
!#window.inactive.border.color: #7e8285
window.inactive.title.separator.color: #96999d
window.inactive.title.bg: Raised Gradient splitvertical
window.inactive.title.bg.color: #E3E2E0
window.inactive.title.bg.color.splitTo: #EBEAE9
window.inactive.title.bg.colorTo: #DEDCDA
window.inactive.title.bg.colorTo.splitTo: #D5D3D1
window.inactive.label.bg: Parentrelative
window.inactive.label.text.color: #70747d
window.inactive.button.*.bg: Flat Gradient splitVertical Border
window.inactive.button.*.bg.color: #ffffff
window.inactive.button.*.bg.color.splitto: #ffffff
window.inactive.button.*.bg.colorTo: #F9F8F8
window.inactive.button.*.bg.colorTo.splitto: #E9E7E6
window.inactive.button.*.bg.border.color: #928F8B
window.inactive.button.*.image.color: #6D6C6C
!# osd (pop ups and what not, dock?)
osd.border.width: 1
osd.border.color: #aaaaaa
osd.bg: flat border gradient splitvertical
osd.bg.color: #F0EFEE
osd.bg.color.splitto: #f5f5f4
osd.bg.colorTo: #EAEBEC
osd.bg.colorTo.splitto: #E7E5E4
osd.bg.border.color: #ffffff
osd.active.label.bg: parentrelative
osd.active.label.bg.color: #efefef
osd.active.label.bg.border.color: #9c9e9c
osd.active.label.text.color: #444
osd.inactive.label.bg: parentrelative
osd.inactive.label.text.color: #70747d
!# yeah whatever, this is fine anyhoo?
osd.hilight.bg: flat vertical gradient
osd.hilight.bg.color: #9ebde5
osd.hilight.bg.colorTo: #749dcf
osd.unhilight.bg: flat vertical gradient
osd.unhilight.bg.color: #BABDB6
osd.unhilight.bg.colorTo: #efefef

測試主題

在創作主題時，測試主題并且微調代碼對得到想要的樣子是很有幫助的。有相當的開發者想要用到“主題預覽器”這樣的工具。幸運的是，已經有了。

GTK+ Change Theme - 這個程序可以更改 GTK 主題，開發者可以用它預覽主題。這個程序由一個含有很多構件的窗口組成，因此可以為主題提供一個完整的預覽。要安裝它，只需輸入命令 apt-get install gtk-chtheme。
GTK Theme Switch - 用戶可以使用它輕松地更換用戶主題。測試主題時確保打開了一些應用，方便預覽效果。要安裝它，只需輸入命令 apt-get install gtk-theme-switch，然后在終端敲出 gtk-theme-switch2 即可運行。
LXappearance - 它可以更換主題，圖標以及字體。
PyWF - 這是基于 Python 開發的一個 The Widget Factory 的替代品。可以在 http://gtk-apps.org/content/show.php/PyTWF?content=102024 獲取 PyWF。
The Widget Factory - 這是一個古老的 GTK 預覽器。要安裝它，只需輸入命令 apt-get install thewidgetfactory，然后在終端敲出 twf 即可運行。

主題下載

Cinnamon - http://gnome-look.org/index.php?xcontentmode=104
Compiz - http://gnome-look.org/index.php?xcontentmode=102
GNOME Shell - http://gnome-look.org/index.php?xcontentmode=191
GTK2 - http://gnome-look.org/index.php?xcontentmode=100
GTK3 - http://gnome-look.org/index.php?xcontentmode=167
KDE/Qt - http://kde-look.org/index.php?xcontentmode=8x9x10x11x12x13x14x15x16
Linux Mint Themes - http://linuxmint-art.org/index.php?xcontentmode=9x14x100
Metacity - http://gnome-look.org/index.php?xcontentmode=101
Ubuntu Themes - http://www.ubuntuthemes.org/

整合營銷服務商