整合營(yíng)銷服務(wù)商

          電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理

          免費(fèi)咨詢熱線:

          3D to H5工作流應(yīng)用手冊(cè)-理論篇

          輯導(dǎo)語:作為產(chǎn)品設(shè)計(jì)師,你知道計(jì)算機(jī)是如何理解和實(shí)時(shí)渲染3D項(xiàng)目的嗎?相信你也曾為這個(gè)問題而困擾,本篇文章里,作者總結(jié)了相應(yīng)的理論問題,也許可以幫你打通3D和H5之間的障礙。

          前言

          設(shè)計(jì)師需求中3D視覺平移到互動(dòng)H5中的項(xiàng)目越來越多,three.js和PBR工作流的結(jié)合卻一直沒有被系統(tǒng)化地整理。

          和各位前端神仙一起做項(xiàng)目,也一起磕磕碰碰出了愛與痛的領(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)目常常遇到的還原問題。

          本文主要for剛接觸3D圖形學(xué)的設(shè)計(jì)師,僅截取了最常用的理論知識(shí)和大家一起學(xué)習(xí)。

          部分涉及技術(shù)美術(shù)或計(jì)算機(jī)圖形學(xué)的描述可能不甚嚴(yán)謹(jǐn),希望大家多多交流討論哈。

          其實(shí)無論H5開發(fā)用到的是哪種webGL,設(shè)計(jì)相關(guān)的材質(zhì)制作基本還是基于PBR思路進(jìn)行的,所以這邊建議各位親可以先去閱讀一下Substance官方寶冊(cè)《The PBR Guide》。

          理論篇

          設(shè)計(jì)師在還原3D類型的互動(dòng)H5項(xiàng)目的時(shí)候一定想過這個(gè)宇宙終極問題:為什么H5/Web實(shí)現(xiàn)的3D效果和C4D里渲染出來的差異那么大?

          其實(shí)這是我們對(duì)實(shí)時(shí)渲染引擎(UE、Unity、three.js等)和離線渲染工具(Redshift、Octane、Vray等)的差異存在誤解:一是離線渲染工具是基于真實(shí)光照環(huán)境來計(jì)算每顆像素的著色,實(shí)時(shí)渲染如果要實(shí)現(xiàn)這種效果需要耗費(fèi)更多硬件基礎(chǔ)和算力去模擬光照(沒個(gè)好顯卡都開不動(dòng)光追)。

          雖然UE5的實(shí)時(shí)渲染技術(shù)和硬件兼容性已經(jīng)讓大家大吃一驚,但在實(shí)際項(xiàng)目,尤其是需要兼容低端設(shè)備的H5來說,渲染能力還是相對(duì)有限的。二是對(duì)于游戲或H5互動(dòng)網(wǎng)站實(shí)際應(yīng)用來說,流暢的互動(dòng)體驗(yàn)優(yōu)先級(jí)往往高于畫面精細(xì)度,所以犧牲視覺保性能也是常見情況。

          Octane離線渲染效果 VS three.js 實(shí)時(shí)渲染效果

          材質(zhì)細(xì)節(jié)、全局光照及投影、以及抗鋸齒表現(xiàn)差距明顯

          當(dāng)實(shí)時(shí)渲染效果與設(shè)計(jì)預(yù)期差距過大時(shí),設(shè)計(jì)師能多了解一些基礎(chǔ)的計(jì)算機(jī)圖形學(xué),也許就能更好地和開發(fā)同學(xué)商討性價(jià)比更高的視覺實(shí)現(xiàn)和資源優(yōu)化方案(以及更多Battle的籌碼)。

          1. 著色器與著色算法差異(靴靴微硬核預(yù)警)

          首先我們要知道計(jì)算機(jī)之所以能在2D屏幕上畫出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處理過程中都有使用,頂點(diǎn)著色器先將模型中每個(gè)頂點(diǎn)的位置、紋理坐標(biāo)、顏色等信息進(jìn)行轉(zhuǎn)換裝配,再由片元著色器對(duì)3D信息光柵化并轉(zhuǎn)換成2D屏幕信息。(關(guān)于著色器差異,感興趣的同學(xué)可以直接跳到附錄查看。)

          著色器是怎么把頂點(diǎn)中所帶有光照、紋理等信息轉(zhuǎn)換并重建在二維圖像的像素中呢?GPU中是透過不同的著色算法來實(shí)現(xiàn)的。

          一種是獲取每個(gè)三角形的插值(Interpolate)來實(shí)現(xiàn),這種方法稱作Per Vertex Lighting,但是當(dāng)三角型很大的時(shí)候,插值往往不夠精準(zhǔn)。此時(shí)還可以引用另一種方法Per Pixel Lighting,計(jì)算每個(gè)像素的光照信息,獲得更好的渲染效果,但是往往也帶來更大的計(jì)算量。

          一般常見計(jì)算機(jī)圖形著色算法有三類:Flat Shading、Gouraud Shading、Phong Shading。這些算法雖然看起來和我們?cè)O(shè)計(jì)師沒啥關(guān)系,但事實(shí)上在后面了解three.js材質(zhì)時(shí),就會(huì)發(fā)現(xiàn)他們?cè)诔尸F(xiàn)時(shí)的差異。

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

          1)平直著色法 Flat Shading

          這種著色法認(rèn)為模型中所有面都是平的,同一個(gè)多邊形的上任意點(diǎn)的法線方向都相同。著色時(shí),會(huì)優(yōu)先選擇多邊形的第一個(gè)頂點(diǎn)或三角形的幾何中心計(jì)算顏色。這種著色法實(shí)踐上的效果很像低面模型,也比較適合使用在高速渲染的場(chǎng)景。值得注意的是,這種著色法難以做出平滑高光效果。

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

          這是一種平滑的著色方法,在著色時(shí)會(huì)先計(jì)算三角形每個(gè)頂點(diǎn)的光照特性,利用雙線插值去補(bǔ)齊三角形區(qū)域內(nèi)其他像素的顏色。這個(gè)著色法的比起平直著色法增加了插值的細(xì)節(jié),而且也比Phong著色法渲染單個(gè)像素的光照特性的性能要高。

          但是在渲染高光時(shí),可能會(huì)因?yàn)闊o法獲取精確的光照值而出現(xiàn)一些不自然的過渡(或T型連接容易被錯(cuò)誤繪制),此時(shí)可以考慮對(duì)模型進(jìn)行細(xì)分或使用漫反射材質(zhì)。

          3)Phong平滑著色法 Phong Shading

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

          2. 基本光照模型 Illumination Model

          簡(jiǎn)單了解計(jì)算機(jī)如何繪制3D圖形后,再來看看它要如何具體理解我們所設(shè)計(jì)的3D場(chǎng)景。

          3D轉(zhuǎn)換成2D,也就是3D柵格化的過程中,每一個(gè)像素的顏色是需要基于它所在的環(huán)境計(jì)算出來,而基于被渲染物體表面某個(gè)點(diǎn)的光強(qiáng)度計(jì)算模型就被稱為光照明模型(Illumination Model)或光照模型(Light Model),透過計(jì)算光照模型所得到表面位置對(duì)應(yīng)像素顏色的過程被稱為表面繪制(Surface Render)。

          *請(qǐng)注意這里說的光照模型并不是指設(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ì)反射更暗且范圍更大的高光,反之亦反。

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

          光照模型與著色組合在不同的渲染需求下也會(huì)有不同的應(yīng)用:

          • 真實(shí)感渲染(Photorealistic Rendering):目的是基于真實(shí)物理世界對(duì)3D場(chǎng)景進(jìn)行仿真還原。
          • 非真實(shí)感渲染(Unphotorealistic Rendering):也被成為風(fēng)格化渲染(Stylistic Rendering),會(huì)更抽象化地對(duì)模型進(jìn)行重繪。

          真實(shí)感渲染及非真實(shí)感渲染對(duì)比 [ F3, ??Autodesk ]

          1)真實(shí)感渲染 Photorealistic Rendering

          考慮到真實(shí)感渲染對(duì)硬件的依賴,目前webGL中使用的一般以簡(jiǎn)單的局部光照模型為主(只計(jì)算光源對(duì)物體的光照效果,不計(jì)算物體間的相互影響,我們看到的“假反射”通常透過貼圖來進(jìn)行模擬),根據(jù)反射形態(tài),經(jīng)典的光照模型有下列幾種:

          Lambert 漫反射模型:

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

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

          Phong 鏡面反射模型:

          這是一種以實(shí)驗(yàn)及觀察為合成基礎(chǔ)的非物理模型。它的表面反射同時(shí)結(jié)合了粗糙表面漫反射和光滑表面鏡面反射,但Phong模型在高光處的表現(xiàn)有過渡瑕疵。

          Phong鏡面反射模型視覺構(gòu)成 [ F5 ]

          Blinn–Phong 模型:

          是在OpenGL和Direct3D里默認(rèn)的著色模型,一種調(diào)優(yōu)后的非物理的Phong模型,頂點(diǎn)間的像素插值使用Gouraud著色算法,比Phong著色算法性能更好,而且高光效果也更平滑。

          Phong及Blinn-Phong鏡面反射模型對(duì)比 [ F6 ]

          Cook-Torrance/GGX 光照模型:

          如果你用過C4D的默認(rèn)渲染器,那么一定在材質(zhì)的反射通道設(shè)置中見過它倆。

          這是相對(duì)高級(jí)的光照模型,不同于Phong和Blinn-Phong模型僅僅對(duì)漫反射及鏡面反射進(jìn)行理想化模擬,這兩個(gè)光照模型基于不同物理材質(zhì)加入了微表面(Microfacet)的概念,并考慮到表面粗糙度對(duì)反射的影響,對(duì)鏡面反射進(jìn)行了調(diào)優(yōu),使得高光的長(zhǎng)尾彌散更加自然,也是目前PBR渲染管線(Unity、UE)中較常用的光照模型。

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

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

          終于有一個(gè)設(shè)計(jì)師們常見的概念了。次表面散射是指光穿透不透明物體時(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ì)有限的。

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

          2)非真實(shí)感渲染 Non-Photorealistic Rendering-NPR

          也就是我們常說的3渲2,非寫實(shí)渲染風(fēng)格也是從人們對(duì)3D場(chǎng)景套以2D繪畫或自然媒體材質(zhì)需求而演化過來的。因此非寫實(shí)渲染技術(shù)實(shí)際上是不同光照模型+不同著色處理共同作用的風(fēng)格化輸出,目前也被大量應(yīng)用在動(dòng)畫及游戲中,像《英雄聯(lián)盟:雙城之戰(zhàn)》《蜘蛛俠:平行宇宙》都是頂級(jí)三渲二大作。

          在不同通道中混合應(yīng)用真實(shí)感渲染及非真實(shí)感渲染效果 [ F9, ??Polygon Runway]

          Cel Shading/Toon Shading:

          卡通著色,一種最常見的以3D技術(shù)模擬扁平風(fēng)格的著色形式,通常以極簡(jiǎn)的顏色、漸變及明確的外框線等漫畫元素作為風(fēng)格特征。

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

          日本創(chuàng)意編程師Misaki Nakano制作了一個(gè)非常有趣的Toon Shading H5互動(dòng)頁面,大家可以體驗(yàn)一下不同著色形態(tài)下非常模型的視覺表現(xiàn)。搜索體驗(yàn):https://mnmxmx.github.io/toon-shading/dst/index.html

          Misaki Nakano的Toon Shader互動(dòng)網(wǎng)站 [ F11, ??Misaki Nakano]

          Customized Shading:

          目前越來越多渲染器可支持設(shè)計(jì)師及工程師根據(jù)項(xiàng)目需求對(duì)著色進(jìn)行定制化處理,以產(chǎn)出更具風(fēng)格化和藝術(shù)化的著色效果。例如工業(yè)界插畫常用的冷暖著色(Gooch Shading),以及更具繪畫質(zhì)感的素描著色(Hatching)及油畫水墨畫等自然媒體著色,都已經(jīng)深入到了我們?nèi)粘5膭?chuàng)作之中。

          在Unity中,基于真實(shí)感渲染的貼圖效果與NPR水墨風(fēng)格化著色效果對(duì)比 [ F11, ??鄧佳迪]

          3. Three.js 材質(zhì)著色對(duì)比

          說完真實(shí)感與非真實(shí)感渲染差異后,我們?cè)賮砜纯碩hree.js中的材質(zhì)。

          和許多渲染引擎一樣,除了原生材質(zhì)外,webGL的材質(zhì)和著色都是可以根據(jù)需求進(jìn)行定制的,但這往往會(huì)也帶來較高的開發(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)目需求快速選擇并混合使用:

          three.js材質(zhì)對(duì)比表

          4. 色彩描述與管理 Color Space

          雖然著色、光照模型以及材質(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)過矯正,暗部成色也會(huì)整體偏暗(如圖c)。目前大多數(shù)顯示器的Gamma值約為2.2,所以也可以理解Gamma2.2是所有顯示器自帶的一個(gè)遺傳病。

          • 紅色上曲線=Gamma0.45=sRGB Space
          • 綠色下曲線=Gamma2.2=顯示器真實(shí)成像缺陷
          • 藍(lán)色斜線=Gamma1.0=Linear Space 真實(shí)物理世界線性關(guān)系

          為了矯正顯示器的非線性問題(從圖c校正回圖b),我們需要對(duì)它進(jìn)行一個(gè)2.2次冪的逆運(yùn)算(如圖a),在數(shù)學(xué)上,這是一個(gè)約0.45的冪運(yùn)算(Gamma0.45)。經(jīng)過0.45冪運(yùn)算,再由顯示器經(jīng)過2.2次冪輸出,最后的顏色就和實(shí)際物理空間的一致了,這套校正的操作就是伽馬校正(Gamma Correction)。

          而我們常見的sRGB就是Gamma0.45所在的色彩空間,是1996由微軟與惠普共同開發(fā)的標(biāo)準(zhǔn)色彩空間。當(dāng)照片素材一開始儲(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ì)高于它的物理亮度。

          人眼感知光強(qiáng)度與發(fā)射光真實(shí)物理強(qiáng)度對(duì)比

          上面那一大段確實(shí)有點(diǎn)繞,但也就說回來為什么建議渲染時(shí)使用線性空間(Linear Space)了。因?yàn)樵谟?jì)算機(jī)圖形中,著色器的運(yùn)算基本上都是基于物理世界的光照模型來保證渲染真實(shí)性的,如果模型的紋理輸入值是非線性的(sRGB),那么運(yùn)算的前提就不統(tǒng)一,輸出的結(jié)果自然就不那么真實(shí)了。

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

          將所有貼圖進(jìn)行去Gamma化,統(tǒng)一為L(zhǎng)inear空間后,再在渲染輸出時(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)換為L(zhǎng)inear,而原純數(shù)值類貼圖(法線、凹凸等)仍舊保持Linear;這一操作可保證貼圖輸入數(shù)據(jù)的正確性與統(tǒng)一性。

          2)刷新材質(zhì):當(dāng)材質(zhì)編碼類型被修改后,需要設(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)目常常遇到的還原問題。

          2022,咱們需求再見。

          附錄

          1)著色器差異

          ① 像素著色器 Pixel Shader

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

          但是在3D圖像中,像素著色器可能無法實(shí)現(xiàn)一些復(fù)雜的效果,因?yàn)樗荒芸刂篇?dú)立的像素而并不含有場(chǎng)景中模型的頂點(diǎn)信息。不過,像素著色器擁有屏幕的坐標(biāo)信息,可以依據(jù)屏幕或鄰近像素的的材質(zhì)進(jìn)行采樣并增強(qiáng),例如,Cel Shader的邊緣強(qiáng)化或一些后期的模糊效果。

          ② 頂點(diǎn)著色器 Vextex Shader

          是最常見的3D著色器,他記錄了模型每個(gè)頂點(diǎn)的位置、紋理坐標(biāo)、顏色等信息。它將每個(gè)頂點(diǎn)的3D位置信息轉(zhuǎn)換成2D屏幕坐標(biāo)。頂點(diǎn)著色器可以處理位置、顏色、紋理的坐標(biāo),但是無法增加新的頂點(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)畫),細(xì)分曲面,體積陰影等。

          ④ 細(xì)分曲面著色器 Tessellation Shader

          在OpenGL4.0和 Direct3D 11中出現(xiàn),它可以在圖元內(nèi)鑲嵌更多三角體。為傳統(tǒng)模型新增了兩個(gè)著色步驟(一是細(xì)分控制著色,又稱為Hull Shader,二是細(xì)分評(píng)估著色,又稱為Domain Shader),兩者結(jié)合可以讓簡(jiǎn)單的模型快速獲得細(xì)分曲面。(例如,含細(xì)分曲面效果的模型加上置換貼圖就可以獲得極其逼真細(xì)膩的模型)

          2)一些術(shù)語的簡(jiǎn)單理解

          GL:Graphics Library, 圖形函數(shù)庫(kù)。

          webGL:Web Graphics Library,Html 5可接入的3D繪圖協(xié)議/函數(shù)庫(kù),可以為H5 Canvas提供3D渲染的各類API。

          Z-Buffering:

          深度緩沖,3D圖像在渲物體的時(shí)候,每一個(gè)生成的像素的深度會(huì)存儲(chǔ)在緩沖區(qū)中。如果另一個(gè)物體也在同一個(gè)像素中產(chǎn)生渲染結(jié)果,那么GPU會(huì)比較兩個(gè)物體的深度,優(yōu)先渲染距離更近的物體,這個(gè)過程叫做Z-Culling。當(dāng)兩個(gè)物體靠很近的時(shí)候(16-bit),可能會(huì)出現(xiàn)Z-Fighting,也就是交疊閃爍的現(xiàn)象,使用24或32bit的Buffer可以有效緩解。

          Rendering Pipeline:

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

          渲染管道細(xì)節(jié)工作流 [ F12 ]

          Rasterization:

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

          3)參考文獻(xiàn)+延伸閱讀

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

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

          [3]銳萌瑞, 經(jīng)典光照模型(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超真實(shí)人類的渲染技術(shù)Part 1 – 概述和皮膚渲染

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

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

          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(材質(zhì)捕獲)

          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圖形學(xué)基礎(chǔ):

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

          [17] Klayge游戲引擎,關(guān)于D3D11你必須了解的幾件事情(三)

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

          [18] 拓荒犬, GPU渲染流水線簡(jiǎn)介

          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進(jìn)行水墨風(fēng)3D渲染的嘗試

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

          [F12] Wikipedia, Graphics_pipeline

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

          本文由 @騰訊ISUX 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載

          題圖來自Unsplash,基于CC0協(xié)議。

          過四個(gè)月的內(nèi)測(cè)與持續(xù)的技術(shù)迭代與優(yōu)化,「團(tuán)結(jié)引擎創(chuàng)世版」正式開放下載。

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

          據(jù)介紹,此次發(fā)布的團(tuán)結(jié)引擎創(chuàng)世版,帶來了完整的一站式微信小游戲解決方案,以及專為汽車智能座艙開發(fā)打造的團(tuán)結(jié)引擎車機(jī)版,新增了對(duì)國(guó)產(chǎn)操作系統(tǒng) OpenHarmony 的支持,并且展示了 beta 版本的虛擬幾何體(Virtual Geometry)功能。

          在性能分析層面,團(tuán)結(jié)引擎創(chuàng)世版增添了加強(qiáng)版的 Profiler 工具,新增 Frame Debugger 支持,可以深入分析渲染步驟;并在 Profiler 中新增 AssetBundle 的數(shù)量和內(nèi)存統(tǒng)計(jì),覆蓋了 NativeHeap、JS 文件系統(tǒng)等,幫助用戶全面分析 AssetBundle 的內(nèi)存占用。

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

          多人想制作他們自己的主題,因此這是一篇關(guān)于 GTK 主題的制作以及各種制作時(shí)所必需的信息的文章。注意: 這篇文章著重討論 GTK3,但會(huì)稍微談一下 GTK2、Metacity 等。本文不會(huì)討論光標(biāo)和圖標(biāo)。 -- DevynCJohnson

          本文導(dǎo)航
          • -基本概念 …… 03%

          • -主題存放位置 …… 08%

          • -主題引擎 …… 14%

          • -創(chuàng)作 GTK3 主題 …… 18%

          • -測(cè)試主題 …… 78%

          • -主題下載 …… 85%

          • -延伸閱讀 …… 92%

          編譯自: http://www.linux.org/threads/installing-obtaining-and-making-gtk-themes.8463/

          作者: DevynCJohnson

          譯者: fuowang

          多數(shù)桌面版 Linux 都支持主題。GUI(LCTT 譯注:圖形用戶界面)獨(dú)有的外觀或者“風(fēng)格”叫做主題。用戶可以改變主題讓桌面看起來與眾不同。通常,用戶也會(huì)更改圖標(biāo),然而,主題和圖標(biāo)包是兩個(gè)獨(dú)立的實(shí)體。很多人想制作他們自己的主題,因此這是一篇關(guān)于 GTK 主題的制作以及各種制作時(shí)所必需的信息的文章。

          注意: 這篇文章著重討論 GTK3,但會(huì)稍微談一下 GTK2、Metacity 等。本文不會(huì)討論光標(biāo)和圖標(biāo)。

          基本概念

          GIMP 工具包(簡(jiǎn)稱 GTK)是一個(gè)用來在多種系統(tǒng)上(因此造就了 GTK 的跨平臺(tái))創(chuàng)建圖形用戶界面的構(gòu)件工具包。GTK(http://www.gtk.org/)通常被誤認(rèn)為代表“GNOME 工具包”,但實(shí)際上它代表“GIMP 工具包”,因?yàn)樽畛鮿?chuàng)造它是為了給 GIMP 設(shè)計(jì)用戶界面。GTK 是一個(gè)用 C 語言編寫的面向?qū)ο蠊ぞ甙℅TK 本身不是一種語言)。GTK 遵循 LGPL 協(xié)議完全開源。GTK 是一個(gè)廣泛使用的圖形用戶界面工具包,它含有很多用于 GTK 的工具。

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

          主題使用層疊樣式表(CSS)來生成主題樣式。這里的 CSS 和網(wǎng)站開發(fā)者在網(wǎng)頁上使用的相同。然而不是引用 HTML 標(biāo)簽,而是引用 GTK 構(gòu)件的專用標(biāo)簽。學(xué)習(xí) CSS 對(duì)主題開發(fā)者來說很重要。

          主題存放位置

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

          1. $XDG_CONFIG_HOME/gtk-3.0/gtk.css (另一寫法 ~/.config/gtk-3.0/gtk.css)

          2. ~/.themes/NAME/gtk-3.0/gtk.css

          3. $datadir/share/themes/NAME/gtk-3.0/gtk.css (另一寫法 /usr/share/themes/name/gtk-3.0/gtk.css)

          注意: “NAME”代表當(dāng)前主題名稱。

          如果有兩個(gè)主題名字相同,那么存放在用戶 home 文件夾(~/.themes)里的主題會(huì)被優(yōu)先使用。開發(fā)者可以利用這個(gè) GTK 主題查找算法的優(yōu)勢(shì)來測(cè)試存放在本地 home 文件夾的主題。

          主題引擎

          主題引擎是軟件的一部分,用來改變圖形用戶界面構(gòu)件的外觀。引擎通過解析主題文件來了解應(yīng)當(dāng)繪制多少種構(gòu)件。有些引擎隨著主題被開發(fā)出來。每種引擎都有優(yōu)點(diǎn)和缺點(diǎn),還有些引擎添加了某些特性和特色。

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

          • gtk2-engines-aurora - Aurora GTK2 引擎

          • gtk2-engines-pixbuf - Pixbuf GTK2 引擎

          • gtk3-engines-oxygen - 將 Oxygen 組件風(fēng)格移植 GTK 的引擎

          • gtk3-engines-unico - Unico GTK3 引擎

          • gtk3-engines-xfce - 用于 Xfce 的 GTK3 引擎

          創(chuàng)作 GTK3 主題

          開發(fā)者創(chuàng)作 GTK3 主題時(shí),或者從空文件著手,或者將已有的主題作為模板。從現(xiàn)存主題著手可能會(huì)對(duì)新手有幫助。比如,開發(fā)者可以把主題復(fù)制到用戶的 home 文件夾,然后編輯這些文件。

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

          為了闡明如何創(chuàng)造主題,我們會(huì)學(xué)習(xí) Ambiance 主題,通常可以在 /usr/share/themes/Ambiance 找到它。此目錄包含下面列出的子目錄以及一個(gè)名為 index.theme 的文件。

          • gtk-2.0

          • gtk-3.0

          • metacity-1

          • unity

          index.theme 含有元數(shù)據(jù)(比如主題的名字)和一些重要的配置(比如按鈕的布局)。下面是 Ambiance 主題的 index.theme 文件內(nèi)容。

          [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 文件的內(nèi)容。

          # ==============================================================================

          # 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 作為主文件。對(duì)于 Ambiance 主題,此文件有一行 @import url("gtk-main.css");。settings.ini 包含重要的主題級(jí)配置。GTK3 主題的 apps 目錄和 GTK2 有同樣的作用。assets 目錄里有單選按鈕、多選框等的圖像文件。下面是 /usr/share/themes/Ambiance/gtk-3.0/gtk-main.css 的內(nèi)容。

          /*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 窗口管理器按鈕(比如“關(guān)閉窗口”按鈕)的圖像文件。此目錄還有一個(gè)名為 metacity-theme-1.xml 的文件,包括了主題的元數(shù)據(jù)(像開發(fā)者的名字)和主題設(shè)計(jì)。然而,主題的 Metacity 部分使用 XML 文件而不是 CSS 文件。

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

          一些主題可能也會(huì)包含其他的目錄。比如, Clearlooks-Phenix 主題有名為 openbox-3 和 xfwm4 的文件夾。openbox-3 文件夾僅有一個(gè) themerc 文件,聲明了主題配置和外觀(下面有文件示例)。xfwm4 目錄含有幾個(gè) xpm 文件、幾個(gè) png 圖像文件(在 png 文件夾里)、一個(gè) README 文件,還有個(gè)包含了主題配置的 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

          測(cè)試主題

          在創(chuàng)作主題時(shí),測(cè)試主題并且微調(diào)代碼對(duì)得到想要的樣子是很有幫助的。有相當(dāng)?shù)拈_發(fā)者想要用到“主題預(yù)覽器”這樣的工具。幸運(yùn)的是,已經(jīng)有了。

          • GTK+ Change Theme - 這個(gè)程序可以更改 GTK 主題,開發(fā)者可以用它預(yù)覽主題。這個(gè)程序由一個(gè)含有很多構(gòu)件的窗口組成,因此可以為主題提供一個(gè)完整的預(yù)覽。要安裝它,只需輸入命令 apt-get install gtk-chtheme。

          • GTK Theme Switch - 用戶可以使用它輕松地更換用戶主題。測(cè)試主題時(shí)確保打開了一些應(yīng)用,方便預(yù)覽效果。要安裝它,只需輸入命令 apt-get install gtk-theme-switch,然后在終端敲出 gtk-theme-switch2 即可運(yùn)行。

          • LXappearance - 它可以更換主題,圖標(biāo)以及字體。

          • PyWF - 這是基于 Python 開發(fā)的一個(gè) The Widget Factory 的替代品。可以在 http://gtk-apps.org/content/show.php/PyTWF?content=102024 獲取 PyWF。

          • The Widget Factory - 這是一個(gè)古老的 GTK 預(yù)覽器。要安裝它,只需輸入命令 apt-get install thewidgetfactory,然后在終端敲出 twf 即可運(yùn)行。

          主題下載

          • 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/

          延伸閱讀

          • Graphical User Interface (GUI) Reading Guide - http://www.linux.org/threads/gui-reading-guide.6471/

          • GTK - http://www.linux.org/threads/understanding-gtk.6291/

          • Introduction to Glade - http://www.linux.org/threads/introduction-to-glade.7142/

          • Desktop Environment vs Window Managers - http://www.linux.org/threads/desktop-environment-vs-window-managers.7802/

          • Official GTK+ 3 Reference Manual - https://developer.gnome.org/gtk3/stable/

          • GtkCssProvider - https://developer.gnome.org/gtk3/stable/GtkCssProvider.html


          via: http://www.linux.org/threads/installing-obtaining-and-making-gtk-themes.8463/

          作者:DevynCJohnson[1] 譯者:fuowang 校對(duì):wxy

          本文由 LCTT[2] 原創(chuàng)編譯,Linux中國(guó) 榮譽(yù)推出

          • [1]: DevynCJohnson - http://www.linux.org/members/devyncjohnson.4843/

          • [2]: LCTT - https://github.com/LCTT/TranslateProject


          主站蜘蛛池模板: 亚洲Av高清一区二区三区| 久久久精品人妻一区二区三区| 韩国女主播一区二区| 少妇一晚三次一区二区三区| 怡红院AV一区二区三区| 国产一区二区三区小向美奈子| 日韩熟女精品一区二区三区| 无码精品人妻一区二区三区免费 | 麻豆AV无码精品一区二区 | 无码人妻aⅴ一区二区三区有奶水| 国产熟女一区二区三区五月婷| 一区二区高清在线| 最美女人体内射精一区二区| 亚拍精品一区二区三区| 武侠古典一区二区三区中文| 美女福利视频一区| 无码人妻av一区二区三区蜜臀 | 黑人大战亚洲人精品一区| 日本免费电影一区二区| 激情无码亚洲一区二区三区| 亚洲A∨精品一区二区三区| 无码精品一区二区三区在线| 日本一区二区三区不卡在线视频| 中文字幕一区二区在线播放 | 国产av夜夜欢一区二区三区| 99精品国产高清一区二区三区| 日本一区二区三区不卡视频| 中文字幕在线无码一区| 久久中文字幕无码一区二区| 国产色情一区二区三区在线播放| 精品香蕉一区二区三区| 中文字幕久久亚洲一区| 手机福利视频一区二区| 无码人妻AV免费一区二区三区 | 亚洲美女高清一区二区三区 | 日本一区二区三区在线视频| 91一区二区视频| 大屁股熟女一区二区三区| 亚洲av无码一区二区三区四区 | 久久免费国产精品一区二区| 国产一区二区精品久久岳√ |