/GenshinCelShaderURP

这是一个基于URP的开源仿原神卡通渲染项目

Primary LanguageHLSLMIT LicenseMIT

GenshinCelShaderURP

What's This?

这是一个基于Unity引擎URP管线的卡通渲染项目,经过一段时间修改后基本做成这样的集合式使用了,技术难度整体不大,主要是整合了各位大佬们的工程,进行了一段时间的效果调研,取其精华并整合封装到一套shader当中,目前shader依旧使用了unlit,预计未来会转lit,本着分享的开源精神还是决定将本项目分享给大家,也希望通过开源的方式提高代码质量,我们的目的是创建一套能还原原神角色卡通渲染方式的渲染库,在保证易用性的同时保持扩展性 ,同时兼顾PC端、移动端、主机端的兼容性、性能和效果。

Installation & Usage

只需将/Shaders/GenshinCelShaderURP/路径下解压对应版本的文件夹到你的Assets即可在材质球中看到添加的shader。 在开始之前,你至少需要准备如下的贴图,如果不知道如何获取他们,可以参考B站 @小二今天吃啥啊 的这个教程,链接

图片
图片

(1)RGBA通道的身体Base Map (2)RGBA通道的身体Light Map(ILM Map) (3)身体Shadow Ramp (4)面部Base Map (5)面部阴影SDF阈值图 (6)头发Base Map (7)RGBA通道的头发LightMap(ILM Map) (8)头发ShadowRamp (9)面部阴影Mask (10)金属光泽Map

贴图示例

  1. 身体部分:
    图片
    图片
    图片

  2. 脸部的特殊处理: 图片
    图片

Support

关于shader兼容性(通用性),目前仅限于工作在URP的Forward管线中,如果需要在延迟管线中使用请自行设置Render Objects

PS.不同游戏开发商对于ilm贴图处理方式稍有不同,可以根据自己需要修改与定制,理论上只要有ilm(表现物体阴影、高光及反射面)和脸部sdf阴影阈值图的都可以使用该shader,这里值得说明的是,《崩坏3》旧角色ilm贴图做法和新角色稍有不同,没有alpha通道控制ramp采样区域,效果会稍差点,这可能需要各位手动调色了。

For Sample Models

示例用的模型和贴图附在/Model路径下,模型来源:模之屋,链接可以用于结合我的shader进行测试,模型最终解释权归mihoyo所有,切勿商用。

For Generate Ramp Texture Tool

该配套工具是用于在Unity Editor中创建适用于该shader的ramp texture,即可根据自己需求定制ramp color,具体食用方法可参考此处

About Ramp Texture

让我们回归Cel Shading的本质——把色彩从多色阶降到低色阶,减少色阶的丰富程度,从而实现类似手工着色的效果,说人话的话也就是色阶化光照。Cel Shading有两种常见的做法,一种是计算光照强度后去采样一张Ramp贴图,另一种就是使用数学计算去拟合Ramp贴图。而采样Ramp贴图的方法提供了更多的可控性,且更加直观,而且开销并没有大多少。

图片

图为使用RampTexture后的阴影

图片

half3color = lerp(_ShadowColor, _Color, ramp );

该方法是Diffuse Warp(Warped Diffuse)方式,在这个方法中使用了Ramp贴图。

图片
贴图如上。

《军团要塞2》最先使用了该Shading方法,也颇具历史意义。不仅可表现鲜明的明暗,还能表现柔和的明暗表现。我也比较常用这个方法。

相关资料 - https://steamcdn-a.akamaihd.net..

大家可以结合上面的Ramp贴图和下方的实现效果一起看下,就能知道Ramp贴图是如何影响结果的。我们可以这样理解,采样RampTexture时,把HalfLambert值应用于UV上,HalfLambert值是暗的话,映射纹理的左边,亮的话映射纹理的右边。

除了横轴对应HalfLambert的方法之外,我们可以通过灵活处理纵轴,来得到不同的效果实现。For example,在不考虑性能开销的情况下使用多层“3DRamp”图来将阴影和高光采样三次,进行三层效果的叠加,并使用外部参数调整实时调整颜色,实时所见即所得。还可以将采样的Y值与各种参数相结合,比如以视角与法线的夹角值按Y轴采样,综合实现类似菲涅尔现象的卡通渲染。

图片

如在<崩坏3 MMD>中,利用顶点颜色绘制(Vertex color painting),把UV的Y轴移到顶点颜色值,直接调整软硬明暗效果。(MMDshader和游戏内shader的实现方式不同。)

在<军团DOTA2>中,额外使用了一张Diffuse Warp Mask纹理。

图片
被遮罩的部分,通过采样ramp图来实现明暗渐变。把采样坐标值存入顶点色中更助于优化。

图片

原神相比崩三(崩坏三第二部似乎也采用了类似的技术),在diffuse基础色上多了ramp阴影实现漫反射,在卡通渲染这类npr渲染当中,我们通常会通过冷暖色调分离、硬化阴影边缘等多重手段来使画面达到风格化的目的,例如《原神》这种利用ilm贴图配合ramp texture实现色调控制的方法,其实《原神》这种用ilm贴图配合ramp实现色调控制的方法,其实早在好几年前《GUILTY GEAR Xrd》就已经存在类似的实现了,《罪恶装备》和《崩坏三》同样是这种思路的延续,只不过放到原神这边是有一张单独的 ramp texture2D,原神里面角色Albedo的颜色本身并不依赖于任何光源(也有可能依靠后处理实现,不是特别确定),而是靠采样RampColor(漫反射的DarkSide部分,由 diffuse*RampColor 得到,BrightSide则为diffuse。根据LightMap.a通道的不同值域,选择Ramp图中的不同层。

图片

原神的Ramp使用了十行1维的Ramp,分别分成上下五组代表着暖色调阴影和冷色调阴影,对应着在游戏中的白天与黑夜分别使用两种Ramp,每五个之间通过Ramp Range贴图进行区分,以让不同材质的物体使用不同的Ramp贴图表现不同的材质。Ramp有两张,头发和身体各一张,共10层,分上下两部分,前5行为暖色调阴影,后5行为冷色调阴影,对应着夜晚与⽩天。)结合diffuse实现整个Albedo颜色。如下图。

图片

这种做法好处显而易见,一个是节省性能,因为漫反射的颜色部分不需要参与任何光照计算,亮部就是贴图颜色,阴影颜色已经以贴图形式预先绘制了,只需要后期根据光源方向控制阴影位置即可,其二是美术可更加灵活地控制阴影颜色,明暗过渡,便于实现更复杂的风格化的效果,坏处是对美工要求真的很高。

注:《原神》角色ramp图与常规Ramp贴图不同的地方就是——一般的Ramp明暗交界线在0.5的位置,但是这个在接近最右边的位置,去除了一些般变化不大的亮部部分,起到了节约带宽的同时保证美术的操作空间不被限制(压缩Ramp贴图降低采样)。

采样思路:以下是针对该贴图每一行作用的描述:
对于y轴,思路话是根据LightMap.a通道,结合光照模型(halflambert)的范围,分层采样ramp图赋予漫反射颜色。已知我们采样的像素分为冷暖两种色调,以适应白天和夜晚不同的光线环境,为了实现冷暖色调切换我们要做的就是通过shader_feature来进行采样的切换,直接if做个条方便inspector调整就行。

对于x轴,根据原来的lambert值,做smoothstep重映射,只保留0到一定数值的渐变,而大于这一数值的全部采样ramp最右边的颜色,这样一来就既可以保留阴影色的过渡,又可以形成硬边,将明暗很好的区分开来(形成硬边)。

最后补充一个关于原神内ilm贴图各通道作用:

LightMap.r :⾼光类型Layer,根据值域区分不同的⾼光ap.g :阴影AO ShadowAO光,以及matcap金属高光。

LightMap.g :阴影AO ShadowAOMask,可以理解为二级阴影,也就是不随光照方向变化的常驻阴影。

LightMap.b :BltMap.a :Raask SpecularIntensityMa制漫反射暗部颜色,htMap.a :Ramp类型Layer,根据值域选择不同的Ramp(控制漫反射暗部颜色,非常重要)

LightMap.a :Ramp类型Layer,根据值域选择不同的Ramp(控制漫反射暗部颜色,非常重要,待会介绍)

VertexColor.g :Ramp偏移值,值越⼤的区域 越容易"感光"(在⼀个特定的⾓度,偏移光照明暗)

VertexColor.a :描边粗细

Thanks

鸣谢以下大佬们提交的代码(排名不分先后):

1、Zzzzohar(Generate Ramp Texture Tool)
https://github.com/Zzzzohar/Ramp-Tools

2、ashyukiha(shader菲涅尔边缘光、sdf面部阴影、Emission、Bloom、AlphaClipping)
https://github.com/ashyukiha/GenshinCharacterShaderZhihuVer

3、ColinLeung-NiloCat(shader卡通描边outline)
https://github.com/ColinLeung-NiloCat/UnityURPToonLitShaderExample

4、YuiLu(shader ramp漫反射及tex采样、头发裁边视角高光、金属高光、屏幕空间深度等宽边缘光)
https://github.com/YuiLu/GenshinCharacterShading

5、T.yz(知乎)(v3版本diffuse模块,包括ramp采样,结合,光照模型,ao等)
https://zhuanlan.zhihu.com/p/547129280

Rules

为了规范项目的使用,你可以将其用于...
卡通渲染相关知识学习、了解HLSL基本语法结构、个人独立游戏开发(相关代码需要遵循MIT许可进行开源)、根据自己需求定制修改源码、MMD等影视制作(如要使用此shader时请在片尾或简介中署名Thanks名单中的名字(可以不写我的名字))

请不要用于...
1 禁止用此模型参与任何商业性质活动和内容制作
2 禁止用此模型参与18禁作品,极端宗教宣传,血腥恐怖猎奇作品,人身攻击视频、暴力、色情、反社会、政治的内容制作
3 禁止对此模型进行侮辱性或猎奇的改造
4 允许对shader的全部代码进行改造,但须始终保持署名(Thanks名单当中,使用哪些作者们代码请把他们署名)
5 禁止个人之间以任何形式的二次配布(即二次传播项目文件)
3 未获得原作者许可,禁止用于商业用途(交易售卖/商业广告类宣传视频等)
5 仅允许使用本场景制作MMD视频,禁止用于其他领域(VRCHAT/游戏MOD等)
6 其他违反GPL开源许可证的行为

在遵守第五则的前提下,允许对此shader二次配布,同须始终保持署名为Github/Gaolingx

Links

欲了解更多作者相关信息欢迎访问:
米游社@爱莉小跟班gaolxBilibili@galing2333

End

最后,希望大家玩得开心,这个项目任将持续进行更新,如果对我们的项目感兴趣记得给一个star,这便是对我们最好的鼓励与支持,由于本人仅仅是高三的学牲,敲代码水平有限qwq,如有不足之处希望谅解,如果你针对shader部分有任何好的想法,意见或建议欢迎在Issues中讨论或者提交你的PR哟。也可以通过邮箱联系我(gaolingxiang123@163.com),If you feel that my works are worthwhile, I would greatly appreciate it if you could sponsor me.