眾里尋他千百度，驀然回首，那人卻在，燈火闌珊處。

當(dāng)歷史長(zhǎng)河的漣漪漫過(guò)時(shí)空壁壘，四道清麗的身影自青史煙云中款款走出：

魚兒羞赧沉入碧波，她的身影曾是浣紗溪畔的一抹驚鴻；大漠孤煙，長(zhǎng)河落日，一曲琵琶驚胡雁，她的身影化作決絕與鄉(xiāng)愁；明月也曾為她掩去光華，她的身影是亂世中最致命的劍光；未央宮前讓百花在羞慚中斂蕊，她的身影曾是盛唐風(fēng)華最濃烈的一筆。

隨著傾國(guó)傾城系列外觀的上線，西施、王昭君、貂蟬、楊玉環(huán)四大美人也跨越時(shí)空，來(lái)到了《永劫無(wú)間》的世界。這一次我們并不是簡(jiǎn)單地為四位女英雄設(shè)計(jì)了新的時(shí)裝，還專門為這套時(shí)裝開(kāi)發(fā)了全新的水墨渲染版本，讓外觀的表現(xiàn)更加貼合主題。再搭配上專屬的水墨背景和英雄姿勢(shì)，讓玩家能夠在水墨暈染間欣賞到絕代風(fēng)華的別樣演繹。

那么，我們是如何抓住四大美人的歷史典故和獨(dú)特氣質(zhì)，將其視覺(jué)化的？而在寫實(shí)游戲里開(kāi)發(fā)水墨渲染外觀，又會(huì)有哪些難點(diǎn)？一起來(lái)看看我們這次的復(fù)盤吧！

時(shí)裝設(shè)計(jì)思路

由于四大美人都有歷史原型，所以我們的整體設(shè)計(jì)思路就是從原型中提取她們的身份和時(shí)代信息，并結(jié)合典故的故事，將其中大家印象最深刻的亮點(diǎn)用在時(shí)裝的設(shè)計(jì)上。而且我們也會(huì)考慮到《永劫》本身英雄們的一些特質(zhì)，將歷史形象和游戲角色相結(jié)合，并融入一些現(xiàn)代化的設(shè)計(jì)和剪裁，以古風(fēng)外型為基礎(chǔ)，也同時(shí)滿足現(xiàn)代玩家們的審美。

傾國(guó)傾城·沉魚

首先是殷紫萍的西施主題時(shí)裝。我們的設(shè)計(jì)靈感就來(lái)自沉魚這個(gè)典故：相傳西施在河邊浣紗時(shí)，魚兒看到她美麗的倒影，甚至都忘記了游泳，慢慢地沉到了河底，從此西施“沉魚”的代稱就開(kāi)始流傳開(kāi)來(lái)。我們也正是取了這一意象，將時(shí)裝的整體色調(diào)定為藍(lán)色，結(jié)合傳統(tǒng)的曲裾形制，旨在展現(xiàn)出視覺(jué)層次感與水的靈動(dòng)之美，并且在裙擺上還設(shè)計(jì)了波光粼粼的效果，來(lái)模擬水面的漣漪。

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

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

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

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

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

傾國(guó)傾城·落雁

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

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

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

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

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

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

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

傾國(guó)傾城·閉月

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

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

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

傾國(guó)傾城·羞花

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

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

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

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

水墨風(fēng)格化的開(kāi)發(fā)

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

想在游戲里實(shí)現(xiàn)這樣的效果并不簡(jiǎn)單，《永劫無(wú)間》作為寫實(shí)風(fēng)格的競(jìng)技游戲，從一開(kāi)始整個(gè)渲染管線都是基于物理渲染設(shè)計(jì)的。將風(fēng)格化的東西融入寫實(shí)的管線中，要既保持水墨效果，又不能產(chǎn)生脫節(jié)或者突兀感，這就給TA的同學(xué)提出了不小的挑戰(zhàn)。

時(shí)裝風(fēng)格化

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

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

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

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

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

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

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

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

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

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

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

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

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

發(fā)型風(fēng)格化

而在發(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)。

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

局部挑染和至臻色示意

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

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

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

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

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

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

例：scatter term疊加水墨紋理的效果

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

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

衣服紋理流動(dòng)

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

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

結(jié)語(yǔ)

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

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