永劫无间 化不可能为可能！历时一年打磨出的水墨渲染到底有多牛？

　　自从【倾国倾城】系列外观上线后，就在英雄们中间激起了不小的波澜——

　　劫宝不禁好奇，这套时装为何能引来如此多的驻足与珍视？

　　是沉鱼的羞赧，落雁的孤傲，闭月的凄美，还是羞花的华贵击中了你们？大家的每一条反馈，都为我们揭示了答案：或许是那抹终于照进实战的，“活的”东方浪漫。

　　今天，就让我们从这些热爱出发，揭晓这份“心动”的设计始末。

　　以东方美学，凝美人风骨

　　殷紫萍【倾国倾城·沉鱼】

　　清水芙蓉，鱼沉碧波

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

　　——唐·李白《西施 / 咏苎萝山》

　　首先是殷紫萍的西施主题时装。本款时装的设计灵感源于西施“沉鱼”之美的古老传说：相传西施在河边浣纱时，鱼儿看到她美丽的倒影，甚至都忘记了游泳，慢慢地沉到了河底，从此她“沉鱼”的代称就开始流传开来。

　　我们也正是取了这一意象，将时装的整体色调定为蓝色，结合传统的曲裾形制，旨在展现出视觉层次感与水的灵动之美，并且在裙摆上还设计了波光粼粼的效果，来模拟水面的涟漪。

　　点击下图查看更多设计巧思

　　衣襟、袖口和裙摆等处，都采用了波浪形的曲线设计，展现出水流一般的动态感与柔美的韵律。

　　裙身多处采用波浪形曲线设计

　　波光粼粼的裙摆净显灵动

　　她胸口上的装饰则是以竹编材质的荷叶与荷花作为主要的视觉设计点，传达出自然、清新的感受。

　　以竹编材质的荷叶与荷花装饰胸口

　　时装袖口镶嵌着细密的碎钻，水滴状的点缀设计，强化了水光闪烁的质感，增添了一些华丽感。

　　袖口点缀水滴状的细密碎钻

　　而腰部运用的捏褶工艺，则呈现出交织的渔网纹理，呼应西施浣纱的本源身份。

　　腰部渔网纹理诠释捏褶工艺

　　我们还在时装的肩部设计了动态的水流和鱼群流动的特效，进一步去强化“沉鱼”这一主题，也为时装增添了很多灵动感。

　　肩部动态的水流和鱼群呼应主题

　　顾倾寒【倾国倾城·落雁】

　　风华绝代，落雁惊鸿

　　画图省时春风面，环佩空归月夜魂。

　　——唐·杜甫《咏怀古迹五首·其三》

　　接下来是顾清寒的王昭君主题时装。这一套的设计灵感取自历史背景和民间传说，突出其“落雁”之美与和亲公主的传奇色彩，将汉朝宫廷的华贵与北方草原的苍茫结合，强调其清冷孤傲、坚韧大气的形象。

　　点击下图查看更多设计巧思

　　配色上，我们采用了深入人心的红白经典搭配，并结合顾清寒“冰雁”的形象，在白色衣裙的剪裁上使用了羽毛元素和汉式交领的宽袖设计。

　　裙身采用红白经典搭配

　　而时装的专属发型上，我们搭配了玛瑙珠串流苏，模仿汉宫步摇与草原头带的结合，来体现这个历史人物特殊的身份：既有宫廷女子的优雅，又有草原女子的活泼。

　　发型用汉宫步摇与草原头带相结合

　　后来我们为了让整体时装看上去更有昭君出塞的感觉，还给这个时装加上了一个红色的兜帽。在游戏中，大家也可以自由选择是否显示兜帽以及披风。

　　兜帽及披风体现昭君出塞的民间传说

　　顾清寒挂饰【倾国倾城·春风面】

　　在不显示披风的情况下，可以完整地看到里面白裙的设计。在概念图里，我们原本是做了长袖的样式，但是后来在制作的时候考虑到和披风之间的穿模以及手感问题，就缩短了一些袖子的长度。

　　不显示兜帽及披风的效果

　　恰到好处的袖长

　　披上披风之后，你会发现披风上暗藏着雁群的暗纹，在光影下若隐若现 ，呼应“落雁”的典故。

　　暗藏雁群暗纹的披风充满华贵

　　而下半身裙摆层叠如塞外风雪，动静结合，用霜花和风雪特效体现出角色的孤傲气质。

　　裙尾增添霜花和风雪特效凸显人物孤傲

　　迦南【倾国倾城·闭月】

　　薄衣轻纱，花容月貌

　　一点樱桃启绛唇，两行碎玉喷阳春。

　　——明·朱权《【越调】白鹤子·咏貂蝉》

　　迦南的貂蝉主题时装，它的设计灵感源自西汉著名文物“素纱襌衣”，以轻盈的薄纱为主体，叠加不同的华丽材质，凸显轻盈和柔美。一袭紫白霓裳，似貂蝉惊鸿落世。灵蝶绕衣，停在衣袂与青丝，轻纱流转间，玉颜如黛。

　　点击下图查看更多设计巧思

　　在剪裁上，我们大胆地去凸显“貂蝉”和“迦南”的性感，相较其他三位美人这套时装有着相对更高的露肤度。整体的配色以黄色和紫色为主，传达出在花园中赏月这一气氛，紧扣“闭月”的典故：

　　整体传达花中赏月氛围

　　色彩精心调和的一袭薄纱

　　她胸口的淡黄色抹胸被动态特效的蝴蝶遮蔽，也犹如荫蔽的皎月一般，贴合“闭月”的主题。灵蝶绕衣的特效，也为这套时装平添了一丝仙气：

　　灵蝶绕衣的特效装饰如同锦上添花

　　玉玲珑【倾国倾城·羞花】

　　锦绣衣香，天姿国色

　　云想衣裳花想容，春风拂槛露华浓。

　　——唐·李白《清平调·其一》

　　最后是玉玲珑的杨玉环主题时装。取海棠嫣然，承玉环风华，红白渐变的长裙，以金线为丝，以海棠为饰，薄纱交叠，衣袂微动间再现大唐的绝代风华。

　　点击下图查看更多设计巧思

　　考虑到杨贵妃的历史时期，我们以唐风襦裙作为时装的基础版型，并融入了一字肩和低胸剪裁，希望能通过这种方式去体现她高贵妩媚的气质，以及大唐的开放和繁华。

　　充满时代色彩的襦裙

　　在配色上，我们使用了大胆的粉色作为主色调，点缀着淡紫和淡金色，丰富整体色彩，希望玩家能有不同以往的唐风新感受。

　　配色在和谐统一中又不失丰富层次

　　抹胸融蕴唐风且凸显高贵妩媚气质

　　而背面袖子上的两朵岩彩动态绽放特效的“牡丹”作为点睛之笔，则呼应着“羞花”这一主题。

　　动态绽放的牡丹定格神韵

　　以水墨晕染，邂逅绝色倾城

　　为了能进一步地贴合四大美人的古风主题，并增强时装的表现力，我们从一开始就定下了要开发水墨风格化版本外观的计划。玩家们可以用琉璃晶解锁这个特殊的形态，并且自由切换想要什么风格的外观表现。

　　在游戏内实现令人满意的水墨风格效果绝非易事，《永劫无间》作为写实风格的竞技游戏，从一开始整个渲染管线都是基于物理渲染设计的。 水墨时装核心难点在于：如何在写实的管线中自然融入风格化的内容。这不仅是一个技术挑战，更是一项艺术调和的难题——既要在视觉上准确传达出水墨的笔触意蕴与透明层次，又必须使其与写实的管线“和谐共生”，避免产生视觉剥离或风格冲突。

　　水墨风外观的探索之路

　　其实这也不是我们第一次在时装上尝试水墨风格了，早在S13长生赛季的时候，张起灵的神品时装【守墨麒】，也是PBR和水墨风格进行切换，但当时仅仅是在衣服上会有一些变化。

　　*PBR是一套遵循真实物理规律的光照和材质模型，旨在让计算机生成的图像达到如照片般逼真的效果。

　　张起灵时装【守墨麒】

　　之后我们还有一些其他风格化的尝试，比如和《女神异闻录5》的联动，我们就探索了在PBR的基础上融入卡通渲染的风格。并且它不仅仅局限于衣服的变化，而是包含捏脸、妆容和头发在内，整个角色整体的风格切换。

　　卡通渲染风格

　　外观风格化功能的全新突破

　　解决模型描边难题

　　此次水墨时装的设计目标和P5一致，也是要全套的角色功能切换，同时在材质功能上也提出了新的需求。

　　首先是描边的功能。张起灵红皮和P5的卡通风格所有的描边主要有两种：一种模型描边，法线外扩+CullFront，主要用于外部轮廓描边。另外一种是固定描边，直接绘制到专用贴图通道，主要用于表现内部结构线。其它的描边方案出于性能等因素的考量没有采用。

　　*CullFront是一种在三维渲染中剔除物体正面，仅显示其背面的技术。

　　此次水墨时装的原画设计大面积地使用了半透元素，并且水墨勾边的颜色并不是单一的颜色，整体多以彩色水墨效果为主，水墨勾边的也是带有颜色偏向。

　　本次水墨时装大面积使用半透元素

　　所以我们要在原来功能地基础上加入一些新功能的支持：支持半透描边、支持描边颜色、支持描边水墨飞白、软硬、干湿等细节变化。

　　为此我们也做了很多尝试，最终确定了目前的方案。对于半透的部分，外描边即模型外扩描边，采用半透模型写深度的方法，这样就可以把描边模型挡住形成描边效果。但是这种方法也有一定的缺陷，对于过于透明的部分开启深度写入的话，会对后面的半透元素形成遮挡。为此只能避免过于透明的设计，或者通过手动排序的方法尽量规避。

　　经多次尝试后确定的描边效果

　　针对一些单片模型边缘无法产生描边的区域，仍然使用专用描边通道进行直接绘制。

　　使用专用描边通道的效果

　　极致还原的手绘效果

　　重新定义水墨风格化

　　而光照部分，由于我们原有的管线都是写实风格的，很难针对风格化的东西单独进行调整，改动过小又很难和PBR的版本拉开差距。为此我们重新设计了水墨风格的光照模型，调整环境光和主要光源的贡献占比，在一定程度上减少环境和光照对角色的影响，弱化PBR的表现同时，尽可能更多地体现手绘的效果。

　　同时为了达到更好的效果，我们为水墨版本专门绘制了一套风格化的贴图，其中颜色贴图在制作的时候尽量贴近原画的手绘水墨效果，法线等也都针对性地做一定风格化处理，使得不同版本之间能拉开层次差距。

　　水墨版本风格化贴图

　　水墨的流动，早期我们没有增加晕染流动的效果，导致整体表现缺乏灵动。

　　没有增加晕染流动的效果

　　为解决这一问题，我们采用了Flowmap+特效插片的方式，并且对原有贴图进行了分层处理，将基础颜色与晕染笔触分离，以此来丰富水墨版皮肤的特色。

　　*Flowmap是一张指导液体或动态表面，如何“流动”的方向图。

　　分层处理后的流动效果

　　由于这一次需要支持捏脸和妆容，水墨风格捏脸和妆容还是要遵循原有的资产规格，并且要兼容原有的捏脸资源。为此我们对这部分的材质进行了调整，首先将光照模型替换成统一的水墨风格光照，其次着重处理了一下贴图，将原本的皮肤贴图处理得更偏风格化一些，同时针对眼球的材质增了类似卡通风格的假高光。

　　眼球增加卡通风格假高光

　　三大难点突破！首创发型水墨

　　风格化并支持全部款式发型

　　而在发型方面，我们遇到的困难更大。本次不仅需要对四套时装配套的发型进行水墨风格化渲染，在玩家穿着四套时装时，所有可以切换的发型都需要支持该风格化，且对应的材质、参数都不能发生变化。在有限的可变动范围内做出接近水墨的效果，是本功能的主要难点。

　　《永劫无间》头发部分玩家可自定义的功能较多，除了普通的全头染色之外，还支持分区渐变染色；部分头发还支持局部挑染，各分区还需要支持至臻色这类特殊质感的效果。我们要在保留这些自定义模块之外，配合时装的效果进行水墨风格化。

　　局部挑染和至臻色示意

　　对于发型这部分来说，水墨风格化的元素主要在于三点：描边、笔触纹理、流动动态。

　　难点一

　　关键元素：描边

　　首先是描边。卡通渲染中常用的双pass绘制外轮廓的方案对于发片类型的模型在性能上和效果上都不会很合适，所以我们使用了贴图自带的alpha重映射的方式对面片内部进行了边缘的提取。

　　发根和发梢采样不同mip的alpha可以引入一些发根发梢边缘粗细的区别。

　　*双Pass是一种将同一个物体的渲染过程拆分为两个独立步骤的图形学技术。

　　*Alpha通常指一个像素的透明度分量，它决定了该像素如何与背景进行混合。

　　*Mip是一种纹理优化技术，通过预先计算并存储一系列逐渐缩小的纹理图像，来提升渲染性能并减少远处物体的闪烁和锯齿。

　　渲染描边效果

　　为了体现水墨描边的干湿效果，引入了噪声使描边的位置存在一定随机性。

　　水墨描边的干湿效果

　　难点二

　　水墨纹理的技术应用

　　而在实体的头发模型上体现水墨笔触，最容易想到的办法就是将水墨的纹理类似使用ps内的叠加或者正片叠底的方式直接叠在最后的计算结果上。但实际上这种方法会非常生硬，人物和环境无法融合，效果也不理想。而且光照计算后的结果通常都不会线性地均匀局限在0-1范围内，这也会使叠加效果不可控。

　　因此我们选择在计算光照的中间结果应用水墨纹理，比如计算阴影和漫反射的过程中，以及散射的线性部分都使用到了该纹理。在计算直接光和环境光时也使用到了该技术。

　　scatter term叠加水墨纹理的效果

　　*Scatter Term是描述光线在进入半透明材质内部后，被微小粒子多次反射、折射后最终射出并被人眼所看到的光照分量。

　　难点三

　　既要又要的流动效果问题的解决

　　为配合衣服的流动效果，头发也需要有一定的流动效果，但纹理又不能像衣服那么明显，仍然需要像头发。

　　发片通常模型径向拉伸会比较明显，因此直接使用uv滚动会导致流动效果比较碎。这里我们使用的近似屏幕空间的uv流动配合法线distortion对纹理进行了些偏移。

　　*UV是将3D模型表面的每个点，与2D纹理图片上的具体像素进行精确对应的一套坐标系统。

　　*Distortion是一种通过偏移或变形物体纹理或顶点坐标，来模拟导致视觉扭曲的特效技术。

　　衣服纹理流动

　　头发纹理流动

　　至此，水墨版本的开发难点就算全部攻克了，我们也成功把这个效果实装到了游戏里。

　　劫宝小tips

　　这套系列时装的诞生，不仅仅是为了呈现视觉上的美感，也体现了我们在三个维度上的努力：一个是坚持深入挖掘中国传统文化，并为其注入当代的理解与活力；二是运用前沿的技术去提升表现的张力；还有就是秉持精益求精的态度，去打磨每一处细节。

　　我们也希望大家能够喜欢这次的尝试。在未来，我们也会继续去探索更多的题材与风格化效果，努力为大家带来更多能够突破现有框架，超越行业标准的美术内容。