自從【傾國(guó)傾城】系列外觀上線后，就在英雄們中間激起了不小的波瀾——

　　劫寶不禁好奇，這套時(shí)裝為何能引來如此多的駐足與珍視？

　　是沉魚的羞赧，落雁的孤傲，閉月的凄美，還是羞花的華貴擊中了你們？大家的每一條反饋，都為我們揭示了答案：或許是那抹終于照進(jìn)實(shí)戰(zhàn)的，“活的”東方浪漫。

　　今天，就讓我們從這些熱愛出發(fā)，揭曉這份“心動(dòng)”的設(shè)計(jì)始末。

　　以東方美學(xué)，凝美人風(fēng)骨

　　殷紫萍【傾國(guó)傾城·沉魚】

　　清水芙蓉，魚沉碧波

　　秀色掩今古，荷花羞玉顏。

　　——唐·李白《西施 / 詠苧蘿山》

　　首先是殷紫萍的西施主題時(shí)裝。本款時(shí)裝的設(shè)計(jì)靈感源于西施“沉魚”之美的古老傳說：相傳西施在河邊浣紗時(shí)，魚兒看到她美麗的倒影，甚至都忘記了游泳，慢慢地沉到了河底，從此她“沉魚”的代稱就開始流傳開來。

　　我們也正是取了這一意象，將時(shí)裝的整體色調(diào)定為藍(lán)色，結(jié)合傳統(tǒng)的曲裾形制，旨在展現(xiàn)出視覺層次感與水的靈動(dòng)之美，并且在裙擺上還設(shè)計(jì)了波光粼粼的效果，來模擬水面的漣漪。

　　點(diǎn)擊下圖查看更多設(shè)計(jì)巧思

　　衣襟、袖口和裙擺等處，都采用了波浪形的曲線設(shè)計(jì)，展現(xiàn)出水流一般的動(dòng)態(tài)感與柔美的韻律。

　　裙身多處采用波浪形曲線設(shè)計(jì)

　　波光粼粼的裙擺凈顯靈動(dòng)

　　她胸口上的裝飾則是以竹編材質(zhì)的荷葉與荷花作為主要的視覺設(shè)計(jì)點(diǎn)，傳達(dá)出自然、清新的感受。

　　以竹編材質(zhì)的荷葉與荷花裝飾胸口

　　時(shí)裝袖口鑲嵌著細(xì)密的碎鉆，水滴狀的點(diǎn)綴設(shè)計(jì)，強(qiáng)化了水光閃爍的質(zhì)感，增添了一些華麗感。

　　袖口點(diǎn)綴水滴狀的細(xì)密碎鉆

　　而腰部運(yùn)用的捏褶工藝，則呈現(xiàn)出交織的漁網(wǎng)紋理，呼應(yīng)西施浣紗的本源身份。

　　腰部漁網(wǎng)紋理詮釋捏褶工藝

　　我們還在時(shí)裝的肩部設(shè)計(jì)了動(dòng)態(tài)的水流和魚群流動(dòng)的特效，進(jìn)一步去強(qiáng)化“沉魚”這一主題，也為時(shí)裝增添了很多靈動(dòng)感。

　　肩部動(dòng)態(tài)的水流和魚群呼應(yīng)主題

　　顧傾寒【傾國(guó)傾城·落雁】

　　風(fēng)華絕代，落雁驚鴻

　　畫圖省時(shí)春風(fēng)面，環(huán)佩空歸月夜魂。

　　——唐·杜甫《詠懷古跡五首·其三》

　　接下來是顧清寒的王昭君主題時(shí)裝。這一套的設(shè)計(jì)靈感取自歷史背景和民間傳說，突出其“落雁”之美與和親公主的傳奇色彩，將漢朝宮廷的華貴與北方草原的蒼茫結(jié)合，強(qiáng)調(diào)其清冷孤傲、堅(jiān)韌大氣的形象。

　　點(diǎn)擊下圖查看更多設(shè)計(jì)巧思

　　配色上，我們采用了深入人心的紅白經(jīng)典搭配，并結(jié)合顧清寒“冰雁”的形象，在白色衣裙的剪裁上使用了羽毛元素和漢式交領(lǐng)的寬袖設(shè)計(jì)。

　　裙身采用紅白經(jīng)典搭配

　　而時(shí)裝的專屬發(fā)型上，我們搭配了瑪瑙珠串流蘇，模仿漢宮步搖與草原頭帶的結(jié)合，來體現(xiàn)這個(gè)歷史人物特殊的身份：既有宮廷女子的優(yōu)雅，又有草原女子的活潑。

　　發(fā)型用漢宮步搖與草原頭帶相結(jié)合

　　后來我們?yōu)榱俗屨�體時(shí)裝看上去更有昭君出塞的感覺，還給這個(gè)時(shí)裝加上了一個(gè)紅色的兜帽。在游戲中，大家也可以自由選擇是否顯示兜帽以及披風(fēng)。

　　兜帽及披風(fēng)體現(xiàn)昭君出塞的民間傳說

　　顧清寒掛飾【傾國(guó)傾城·春風(fēng)面】

　　在不顯示披風(fēng)的情況下，可以完整地看到里面白裙的設(shè)計(jì)。在概念圖里，我們?cè)�本是做了長(zhǎng)袖的樣式，但是后來在制作的時(shí)候考慮到和披風(fēng)之間的穿模以及手感問題，就縮短了一些袖子的長(zhǎng)度。

　　不顯示兜帽及披風(fēng)的效果

　　恰到好處的袖長(zhǎng)

　　披上披風(fēng)之后，你會(huì)發(fā)現(xiàn)披風(fēng)上暗藏著雁群的暗紋，在光影下若隱若現(xiàn) ，呼應(yīng)“落雁”的典故。

　　暗藏雁群暗紋的披風(fēng)充滿華貴

　　而下半身裙擺層疊如塞外風(fēng)雪，動(dòng)靜結(jié)合，用霜花和風(fēng)雪特效體現(xiàn)出角色的孤傲氣質(zhì)。

　　裙尾增添霜花和風(fēng)雪特效凸顯人物孤傲

　　迦南【傾國(guó)傾城·閉月】

　　薄衣輕紗，花容月貌

　　一點(diǎn)櫻桃啟絳唇，兩行碎玉噴陽(yáng)春。

　　——明·朱權(quán)《【越調(diào)】白鶴子·詠貂蟬》

　　迦南的貂蟬主題時(shí)裝，它的設(shè)計(jì)靈感源自西漢著名文物“素紗襌衣”，以輕盈的薄紗為主體，疊加不同的華麗材質(zhì)，凸顯輕盈和柔美。一襲紫白霓裳，似貂蟬驚鴻落世。靈蝶繞衣，停在衣袂與青絲，輕紗流轉(zhuǎn)間，玉顏如黛。

　　點(diǎn)擊下圖查看更多設(shè)計(jì)巧思

　　在剪裁上，我們大膽地去凸顯“貂蟬”和“迦南”的性感，相較其他三位美人這套時(shí)裝有著相對(duì)更高的露膚度。整體的配色以黃色和紫色為主，傳達(dá)出在花園中賞月這一氣氛，緊扣“閉月”的典故：

　　整體傳達(dá)花中賞月氛圍

　　色彩精心調(diào)和的一襲薄紗

　　她胸口的淡黃色抹胸被動(dòng)態(tài)特效的蝴蝶遮蔽，也猶如蔭蔽的皎月一般，貼合“閉月”的主題。靈蝶繞衣的特效，也為這套時(shí)裝平添了一絲仙氣：

　　靈蝶繞衣的特效裝飾如同錦上添花

　　玉玲瓏【傾國(guó)傾城·羞花】

　　錦繡衣香，天姿國(guó)色

　　云想衣裳花想容，春風(fēng)拂檻露華濃。

　　——唐·李白《清平調(diào)·其一》

　　最后是玉玲瓏的楊玉環(huán)主題時(shí)裝。取海棠嫣然，承玉環(huán)風(fēng)華，紅白漸變的長(zhǎng)裙，以金線為絲，以海棠為飾，薄紗交疊，衣袂微動(dòng)間再現(xiàn)大唐的絕代風(fēng)華。

　　點(diǎn)擊下圖查看更多設(shè)計(jì)巧思

　　考慮到楊貴妃的歷史時(shí)期，我們以唐風(fēng)襦裙作為時(shí)裝的基礎(chǔ)版型，并融入了一字肩和低胸剪裁，希望能通過這種方式去體現(xiàn)她高貴嫵媚的氣質(zhì)，以及大唐的開放和繁華。

　　充滿時(shí)代色彩的襦裙

　　在配色上，我們使用了大膽的粉色作為主色調(diào)，點(diǎn)綴著淡紫和淡金色，豐富整體色彩，希望玩家能有不同以往的唐風(fēng)新感受。

　　配色在和諧統(tǒng)一中又不失豐富層次

　　抹胸融蘊(yùn)唐風(fēng)且凸顯高貴嫵媚氣質(zhì)

　　而背面袖子上的兩朵巖彩動(dòng)態(tài)綻放特效的“牡丹”作為點(diǎn)睛之筆，則呼應(yīng)著“羞花”這一主題。

　　動(dòng)態(tài)綻放的牡丹定格神韻

　　以水墨暈染，邂逅絕色傾城

　　為了能進(jìn)一步地貼合四大美人的古風(fēng)主題，并增強(qiáng)時(shí)裝的表現(xiàn)力，我們從一開始就定下了要開發(fā)水墨風(fēng)格化版本外觀的計(jì)劃。玩家們可以用琉璃晶解鎖這個(gè)特殊的形態(tài)，并且自由切換想要什么風(fēng)格的外觀表現(xiàn)。

　　在游戲內(nèi)實(shí)現(xiàn)令人滿意的水墨風(fēng)格效果絕非易事，《永劫無間》作為寫實(shí)風(fēng)格的競(jìng)技游戲，從一開始整個(gè)渲染管線都是基于物理渲染設(shè)計(jì)的。 水墨時(shí)裝核心難點(diǎn)在于：如何在寫實(shí)的管線中自然融入風(fēng)格化的內(nèi)容。這不僅是一個(gè)技術(shù)挑戰(zhàn)，更是一項(xiàng)藝術(shù)調(diào)和的難題——既要在視覺上準(zhǔn)確傳達(dá)出水墨的筆觸意蘊(yùn)與透明層次，又必須使其與寫實(shí)的管線“和諧共生”，避免產(chǎn)生視覺剝離或風(fēng)格沖突。

　　水墨風(fēng)外觀的探索之路

　　其實(shí)這也不是我們第一次在時(shí)裝上嘗試水墨風(fēng)格了，早在S13長(zhǎng)生賽季的時(shí)候，張起靈的神品時(shí)裝【守墨麒】，也是PBR和水墨風(fēng)格進(jìn)行切換，但當(dāng)時(shí)僅僅是在衣服上會(huì)有一些變化。

　　*PBR是一套遵循真實(shí)物理規(guī)律的光照和材質(zhì)模型，旨在讓計(jì)算機(jī)生成的圖像達(dá)到如照片般逼真的效果。

　　張起靈時(shí)裝【守墨麒】

　　之后我們還有一些其他風(fēng)格化的嘗試，比如和《女神異聞錄5》的聯(lián)動(dòng)，我們就探索了在PBR的基礎(chǔ)上融入卡通渲染的風(fēng)格。并且它不僅僅局限于衣服的變化，而是包含捏臉、妝容和頭發(fā)在內(nèi)，整個(gè)角色整體的風(fēng)格切換。

　　卡通渲染風(fēng)格

　　外觀風(fēng)格化功能的全新突破

　　解決模型描邊難題

　　此次水墨時(shí)裝的設(shè)計(jì)目標(biāo)和P5一致，也是要全套的角色功能切換，同時(shí)在材質(zhì)功能上也提出了新的需求。

　　首先是描邊的功能。張起靈紅皮和P5的卡通風(fēng)格所有的描邊主要有兩種：一種模型描邊，法線外擴(kuò)+CullFront，主要用于外部輪廓描邊。另外一種是固定描邊，直接繪制到專用貼圖通道，主要用于表現(xiàn)內(nèi)部結(jié)構(gòu)線。其它的描邊方案出于性能等因素的考量沒有采用。

　　*CullFront是一種在三維渲染中剔除物體正面，僅顯示其背面的技術(shù)。

　　此次水墨時(shí)裝的原畫設(shè)計(jì)大面積地使用了半透元素，并且水墨勾邊的顏色并不是單一的顏色，整體多以彩色水墨效果為主，水墨勾邊的也是帶有顏色偏向。

　　本次水墨時(shí)裝大面積使用半透元素

　　所以我們要在原來功能地基礎(chǔ)上加入一些新功能的支持：支持半透描邊、支持描邊顏色、支持描邊水墨飛白、軟硬、干濕等細(xì)節(jié)變化。

　　為此我們也做了很多嘗試，最終確定了目前的方案。對(duì)于半透的部分，外描邊即模型外擴(kuò)描邊，采用半透模型寫深度的方法，這樣就可以把描邊模型擋住形成描邊效果。但是這種方法也有一定的缺陷，對(duì)于過于透明的部分開啟深度寫入的話，會(huì)對(duì)后面的半透元素形成遮擋。為此只能避免過于透明的設(shè)計(jì)，或者通過手動(dòng)排序的方法盡量規(guī)避。

　　經(jīng)多次嘗試后確定的描邊效果

　　針對(duì)一些單片模型邊緣無法產(chǎn)生描邊的區(qū)域，仍然使用專用描邊通道進(jìn)行直接繪制。

　　使用專用描邊通道的效果

　　極致還原的手繪效果

　　重新定義水墨風(fēng)格化

　　而光照部分，由于我們?cè)�有的管線都是寫實(shí)風(fēng)格的，很難針對(duì)風(fēng)格化的東西單獨(dú)進(jìn)行調(diào)整，改動(dòng)過小又很難和PBR的版本拉開差距。為此我們重新設(shè)計(jì)了水墨風(fēng)格的光照模型，調(diào)整環(huán)境光和主要光源的貢獻(xiàn)占比，在一定程度上減少環(huán)境和光照對(duì)角色的影響，弱化PBR的表現(xiàn)同時(shí)，盡可能更多地體現(xiàn)手繪的效果。

　　同時(shí)為了達(dá)到更好的效果，我們?yōu)樗�墨版本專門繪制了一套風(fēng)格化的貼圖，其中顏色貼圖在制作的時(shí)候盡量貼近原畫的手繪水墨效果，法線等也都針對(duì)性地做一定風(fēng)格化處理，使得不同版本之間能拉開層次差距。

　　水墨版本風(fēng)格化貼圖

　　水墨的流動(dòng)，早期我們沒有增加暈染流動(dòng)的效果，導(dǎo)致整體表現(xiàn)缺乏靈動(dòng)。

　　沒有增加暈染流動(dòng)的效果

　　為解決這一問題，我們采用了Flowmap+特效插片的方式，并且對(duì)原有貼圖進(jìn)行了分層處理，將基礎(chǔ)顏色與暈染筆觸分離，以此來豐富水墨版皮膚的特色。

　　*Flowmap是一張指導(dǎo)液體或動(dòng)態(tài)表面，如何“流動(dòng)”的方向圖。

　　分層處理后的流動(dòng)效果

　　由于這一次需要支持捏臉和妝容，水墨風(fēng)格捏臉和妝容還是要遵循原有的資產(chǎn)規(guī)格，并且要兼容原有的捏臉資源。為此我們對(duì)這部分的材質(zhì)進(jìn)行了調(diào)整，首先將光照模型替換成統(tǒng)一的水墨風(fēng)格光照，其次著重處理了一下貼圖，將原本的皮膚貼圖處理得更偏風(fēng)格化一些，同時(shí)針對(duì)眼球的材質(zhì)增了類似卡通風(fēng)格的假高光。

　　眼球增加卡通風(fēng)格假高光

　　三大難點(diǎn)突破！首創(chuàng)發(fā)型水墨

　　風(fēng)格化并支持全部款式發(fā)型

　　而在發(fā)型方面，我們遇到的困難更大。本次不僅需要對(duì)四套時(shí)裝配套的發(fā)型進(jìn)行水墨風(fēng)格化渲染，在玩家穿著四套時(shí)裝時(shí)，所有可以切換的發(fā)型都需要支持該風(fēng)格化，且對(duì)應(yīng)的材質(zhì)、參數(shù)都不能發(fā)生變化。在有限的可變動(dòng)范圍內(nèi)做出接近水墨的效果，是本功能的主要難點(diǎn)。

　　《永劫無間》頭發(fā)部分玩家可自定義的功能較多，除了普通的全頭染色之外，還支持分區(qū)漸變?nèi)旧�；部分頭發(fā)還支持局部挑染，各分區(qū)還需要支持至臻色這類特殊質(zhì)感的效果。我們要在保留這些自定義模塊之外，配合時(shí)裝的效果進(jìn)行水墨風(fēng)格化。

　　局部挑染和至臻色示意

　　對(duì)于發(fā)型這部分來說，水墨風(fēng)格化的元素主要在于三點(diǎn)：描邊、筆觸紋理、流動(dòng)動(dòng)態(tài)。

　　難點(diǎn)一

　　關(guān)鍵元素：描邊

　　首先是描邊�？ㄍㄤ秩局谐Ｓ玫碾ppass繪制外輪廓的方案對(duì)于發(fā)片類型的模型在性能上和效果上都不會(huì)很合適，所以我們使用了貼圖自帶的alpha重映射的方式對(duì)面片內(nèi)部進(jìn)行了邊緣的提取。

　　發(fā)根和發(fā)梢采樣不同mip的alpha可以引入一些發(fā)根發(fā)梢邊緣粗細(xì)的區(qū)別。

　　*雙Pass是一種將同一個(gè)物體的渲染過程拆分為兩個(gè)獨(dú)立步驟的圖形學(xué)技術(shù)。

　　*Alpha通常指一個(gè)像素的透明度分量，它決定了該像素如何與背景進(jìn)行混合。

　　*Mip是一種紋理優(yōu)化技術(shù)，通過預(yù)先計(jì)算并存儲(chǔ)一系列逐漸縮小的紋理圖像，來提升渲染性能并減少遠(yuǎn)處物體的閃爍和鋸齒。

　　渲染描邊效果

　　為了體現(xiàn)水墨描邊的干濕效果，引入了噪聲使描邊的位置存在一定隨機(jī)性。

　　水墨描邊的干濕效果

　　難點(diǎn)二

　　水墨紋理的技術(shù)應(yīng)用

　　而在實(shí)體的頭發(fā)模型上體現(xiàn)水墨筆觸，最容易想到的辦法就是將水墨的紋理類似使用ps內(nèi)的疊加或者正片疊底的方式直接疊在最后的計(jì)算結(jié)果上。但實(shí)際上這種方法會(huì)非常生硬，人物和環(huán)境無法融合，效果也不理想。而且光照計(jì)算后的結(jié)果通常都不會(huì)線性地均勻局限在0-1范圍內(nèi)，這也會(huì)使疊加效果不可控。

　　因此我們選擇在計(jì)算光照的中間結(jié)果應(yīng)用水墨紋理，比如計(jì)算陰影和漫反射的過程中，以及散射的線性部分都使用到了該紋理。在計(jì)算直接光和環(huán)境光時(shí)也使用到了該技術(shù)。

　　scatter term疊加水墨紋理的效果

　　*Scatter Term是描述光線在進(jìn)入半透明材質(zhì)內(nèi)部后，被微小粒子多次反射、折射后最終射出并被人眼所看到的光照分量。

　　難點(diǎn)三

　　既要又要的流動(dòng)效果問題的解決

　　為配合衣服的流動(dòng)效果，頭發(fā)也需要有一定的流動(dòng)效果，但紋理又不能像衣服那么明顯，仍然需要像頭發(fā)。

　　發(fā)片通常模型徑向拉伸會(huì)比較明顯，因此直接使用uv滾動(dòng)會(huì)導(dǎo)致流動(dòng)效果比較碎。這里我們使用的近似屏幕空間的uv流動(dòng)配合法線distortion對(duì)紋理進(jìn)行了些偏移。

　　*UV是將3D模型表面的每個(gè)點(diǎn)，與2D紋理圖片上的具體像素進(jìn)行精確對(duì)應(yīng)的一套坐標(biāo)系統(tǒng)。

　　*Distortion是一種通過偏移或變形物體紋理或頂點(diǎn)坐標(biāo)，來模擬導(dǎo)致視覺扭曲的特效技術(shù)。

　　衣服紋理流動(dòng)

　　頭發(fā)紋理流動(dòng)

　　至此，水墨版本的開發(fā)難點(diǎn)就算全部攻克了，我們也成功把這個(gè)效果實(shí)裝到了游戲里。

　　劫寶小tips

　　這套系列時(shí)裝的誕生，不僅僅是為了呈現(xiàn)視覺上的美感，也體現(xiàn)了我們?cè)谌齻�(gè)維度上的努力：一個(gè)是堅(jiān)持深入挖掘中國(guó)傳統(tǒng)文化，并為其注入當(dāng)代的理解與活力；二是運(yùn)用前沿的技術(shù)去提升表現(xiàn)的張力；還有就是秉持精益求精的態(tài)度，去打磨每一處細(xì)節(jié)。

　　我們也希望大家能夠喜歡這次的嘗試。在未來，我們也會(huì)繼續(xù)去探索更多的題材與風(fēng)格化效果，努力為大家?guī)�來更多能夠突破現(xiàn)有框架，超越行業(yè)標(biāo)準(zhǔn)的美術(shù)內(nèi)容。