卡通渲染总结-原神达达利亚

ChuanXin

gif渣画质警告。7.多m的gif点这个链接
https://upload-images.jianshu.io/upload_images/28340786-c561331b1ebcd621.gif?imageMogr2/auto-orient/strip

惯例先上参考:

【Unity技术美术】 原神Shader渲染还原解析

原神角色渲染Shader分析还原

【01】Unity URP 卡通渲染 原神角色渲染记录-Diffuse: Ramp + AO + Double Shadow

【JTRP】屏幕空间深度边缘光 Screen Space Depth Rimlight

原神角色渲染Shader分析还原

我这程度挑战卡渲，还是太有勇气了……

时隔良久才来写文章，会简略很多。
贴图分析

当时漫天找资源，求爷爷告奶奶地要贴图，现在给像我一样懵逼不知道这些贴图哪来的小萌新指条明路，使用截帧软件NinjaRipper自己去游戏里拿。。

问题又出现了，大佬们的文章告诉我每个通道应该长得像最下面一排那样，但我找到的某些图是透明的。最后知道png图片自带透明度,而且不存在a通道里,贴图格式最好为tga(希望没说错)。

放到模型上

ramp


关于ramp每条功能，当时一直在凑参数，画了个图，现在快看不懂了……

half3 Cel_Ramp(half NdotL, half4 parameter)        {parameter.g = smoothstep(0.0,0.1,parameter.g) ;            half3 fixShadow = saturate(_fixShadowColor.rgb + parameter.g);           half halfLambert =  smoothstep(0.1,0.7,NdotL*0.2+0.3) * parameter.g * 2;//当没有分界线的时候，就是g不要乘2，要用step限制/*            Skin = 1.0 white            Silk = 0.7            Metal = 0.5            Soft = 0.3            Hard = 0.0 black coat            */            #if _SHADERENUM_HAIR                half v = -0.5 * _inNight + 0.95;            #elif _SHADERENUM_BASE                half v = parameter.a * 0.45 + -0.5 * _inNight + 0.55;            #else                half v = 0;            #endifreturn SAMPLE_TEXTURE2D(_rampMap, sampler_rampMap, half2(halfLambert, v)).rgb * fixShadow;        }
问题：亮面有ramp阴影，暗面没有,有时候双面都有

解决：clamp！！

问题：远处模糊方块近处没有

解决：mipmap关闭！！

lightmap，也就是g通道在0-0.5，但乘以2映射到0-1的做法是错的，怎么都取不出固定阴影。还有世界佬那个，用实时阴影与固定阴影相乘的，我得到的实时阴影很奇怪，干脆舍弃。

于是使用smoothstep函数，将0-0.1黑色部分留下，其余全部取1即取白。

固定阴影等于g通道乘以外部给出的固定阴影颜色，再截取到0-1，只影响黑色0-0.1的部分，给g里的阴影加上颜色。

接下来我的lambert很奇怪，是凑出来的结果，不要学。

为了肤色与脸色对上，为肤色单独创建一个材质，将这个颜色设为白色。

整体ramp预览

高光


对于头发的高光抄了最简单的，能用就行。
float3Cel_Specular(float3 NdotH,float3 NdotL,float3 baseColor,float4 var_ParamTex){#if _SHADERENUM_HAIRfloatspecularRadius=pow(NdotH,var_ParamTex.b*50);float3specularColor=var_ParamTex.b*baseColor;return_enableSpecular*smoothstep(0.3,0.4,specularRadius)*specularColor*lerp(_hairSpecularIntensity,1,step(0.9,var_ParamTex.b));#elif _SHADERENUM_BASEfloatspec=pow(saturate(NdotH),_shininess);floatw=0.4f;spec=lerp(0,1,smoothstep(-w,w,spec-1.1f+var_ParamTex.b));float3specularColor=_enableSpecular*_lightSpecColor*_specMulti*var_ParamTex.r*spec;//multi越小越黑return specularColor;#elsereturn0;#endif}
还花了两天把变体那块的文档看完了，必须为每个变体安排上，否则他就不编译。
高光-step函数

half spec = pow(saturate(dot(input.normalWS, halfViewLightWS)), _Shininess);spec = step(1.0f - LightMapColor.b, spec);half4 specularColor = _EnableSpecular * _LightSpecColor * _SpecMulti * LightMapColor.r * spec;from 雪羽

spec经step后，各像素有无（1 0）高光就知道了。作为高光控制参数。
金属度

float3 Cel_Metal(float3 nDir, float4 var_ParamTex, float3 baseColor)        {float2 mcCoord = float2(dot(normalize(UNITY_MATRIX_V[0].xyz), normalize(nDir)), dot(normalize(UNITY_MATRIX_V[1].xyz), normalize(nDir)));            float var_MatCap = SAMPLE_TEXTURE2D(_metalMap, sampler_metalMap, mcCoord * 0.5 + 0.5) * 2 + 0.3f;//金属图想要变白，增大值。漫反射色不变甚至变黑，减小值            return _enableMetalSpecular * var_MatCap * baseColor *  var_ParamTex.r;//取0.95到1的部分，即glossiness图白色金属部分            //金属色乘漫反射色得到高光色，要与光源做反应的话用光源色        }金属度笔记

r通道glossiness告诉你哪里是金属、高光强的地方，b通道specular告诉你金属长啥样

整体金属高光预览


参数调不好

神之眼自发光

half3 Cel_Emission(half4 baseColor, half4 var_ParamTex)        {            half bloomMask  = baseColor.a;            half3 emission = _enableEmission * bloomMask * _emissionIntensity * abs(_SinTime.w);//abs((frac(_Time.y * 0.5) - 0.5) * 2)            emission *= baseColor;            return emission;        }自发光预览

BaseColor汇合

half3 Cel_Base(half NdotL, half NdotH, half NdotV, half3 nDir, half4 baseColor, half4 var_ParamTex)        {            //baseColor = step(0.95, var_ParamTex.a) * baseColor * _skinWhite + (1-step(0.95, var_ParamTex.a))*baseColor;            //提亮肤色            //baseColor = lerp(baseColor, baseColor * _skinWhite, step(0.95, var_ParamTex.a));            half3 rampColor = Cel_Ramp(NdotL, var_ParamTex);                        //float3 albedo = baseColor * rampColor;            half3 albedo = lerp(baseColor, baseColor * rampColor, _rampDarkness);            half3 specular = Cel_Specular(NdotH, NdotL, baseColor, var_ParamTex);            half3 metal = Cel_Metal(nDir, var_ParamTex, baseColor);            half3 emission = Cel_Emission(baseColor, var_ParamTex);            half3 finalColor = albedo  + specular + metal ;//金属色与高光色相加            #if _SHADERENUM_BASE            return  finalColor + emission;            #else            return finalColor;            #endif        }SDF的脸

half3 Cel_Face(half3 baseColor, Light mainLight, float4 vuv){//https://zhuanlan.zhihu.com/p/552097741//左右阴影图     Sample flipped face light map    float2 rightFaceUV = float2(-vuv.z, vuv.w);    float4 faceShadowR = SAMPLE_TEXTURE2D(_paramTex, sampler_paramTex, rightFaceUV);    float4 faceShadowL = SAMPLE_TEXTURE2D(_paramTex, sampler_paramTex, float2(vuv.z, vuv.w)); //人物朝向 Get character orientation    float3 up = float3(0,1,0);      float3 front=TransformObjectToWorldDir(float4(0.0,0.0,1.0,1.0));     float3 right = cross(up, front);     float2 realLDir = normalize(mainLight.direction.xz);    float realFDotL = dot(normalize(front.xz), realLDir);//FaceShadowRange     float realRDotL = dot(normalize(right.xz), realLDir); //通过RdotL决定用哪张阴影图     float shadowTex = realRDotL < 0? faceShadowL: faceShadowR;//FaceShadow //获取当前像素的阴影阈值    float shadowMargin = shadowTex.r;//FaceShadow //判断是否在阴影中    float inShadow = -0.5 * realFDotL + 0.5 < shadowMargin;//小于marging，在阴影中    float2 shadowUV = float2(inShadow, -0.5 * _inNight + 1);//1day,0.5night    half3 faceShadowColor = SAMPLE_TEXTURE2D(_rampMap, sampler_rampMap, shadowUV) * baseColor;    faceShadowColor = lerp(baseColor, baseColor * faceShadowColor, _rampDarkness);    return faceShadowColor;}
先分别采样左右的脸，然后定义上右前方向，文章说灯光朝向和灯光vector不一致，逆时针转90，投影后要归一化，不然长度会小于1，我不乘那个矩阵才是对的……接下来注释都有。采了ramp里的肤色。由于与肤色的u值并不完全相同，脸色与肤色还是有一定差距，不过已经相当可以了。到时候写个脚本把几个材质的是否夜晚选项统一起来。

怎么样是对的呢，光照在0度左右，鼻子上的阴影左右动。

脸部预览

外描边

描边及修正，不知道抄的哪位的，实际上精要里的描边也够了，总之都会断裂。实际游戏里看剧情，镜头拉近的时候也看到了断裂的边，瞬间心理平衡了哈哈哈。

唯一看懂的真正实现描边的函数，由于我实在不会绘制顶点色（在3d max与blender都试过，无效。另外max导入文件一定不能直接拖进去，否则直接放大一百倍），又在草地里学了在顶点着色器采样贴图的方法，现在实践一下对脸部绘制遮罩贴图来去除嘴角、眼眶的描边。

未处理的脸部描边：

在脸的a通道画遮罩。

反复调整区域达到完美。

游戏截图：

上代码。
float3 TransformPositionWSToOutlinePositionWS(float FaceMask, float3 positionWS, float positionVS_Z, float3 normalWS)        {            float texAlpha;            #if !_SHADERENUM_FACE            texAlpha = 1;            #else            texAlpha = FaceMask;            #endif            float outlineExpandAmount = texAlpha * _outlineWidth * GetOutlineCameraFovAndDistanceFixMultiplier(positionVS_Z);            return positionWS + normalWS * outlineExpandAmount;        }        v2f OutlinePassVertex(a2v a)        {             v2f v = (v2f)0;             ZERO_INITIALIZE(v2f, v);                VertexNormalInputs vertexNormalInput = GetVertexNormalInputs(a.normalOS, a.tangentOS);v.normWS = vertexNormalInput.normalWS;//原始法线                            v.uv.xy = TRANSFORM_TEX(a.texcoord, _diffTex).xy;            v.posWS = TransformObjectToWorld(a.vertex);            v.posVS = TransformWorldToView(v.posWS);            float FaceMask = SAMPLE_TEXTURE2D_LOD(_diffTex, sampler_diffTex,v.uv.xy, 0).a;            v.posWS = TransformPositionWSToOutlinePositionWS(FaceMask, v.posWS, v.posVS.z, v.normWS);            v.posCS = TransformWorldToHClip(v.posWS);            //冯乐乐            // float4 posVS =  mul(UNITY_MATRIX_MV, a.vertex);            // float3 normalVS= mul((float3x3)UNITY_MATRIX_IT_MV, a.normalOS);//a.tangentOS            // normalVS.z = -0.5 ;            // posVS = posVS + float4(normalize(normalVS) , 0) * _outlineWidth ;            // v.posCS = mul(UNITY_MATRIX_P , posVS) ;            v.shadowCoord = TransformWorldToShadowCoord(v.posWS); // jave.lin : shadow recieve 将 世界坐标 转到 灯光坐标（阴影坐标）            return v;        }描边预览

边缘光

//================               //边缘光Rim: 屏幕空间深度边缘光               //如果我们把每个点的位置向着法线方向位移一段距离，再根据位移后的坐标采样相机深度图，把深度和自己的深度做对比，如果差值大于一个阈值，那么就是边缘。               //https://zhuanlan.zhihu.com/p/365339160               //一定要注意一点，要保持z分量不变，因为Homogeneous Clip Space中的w分量就是负的ViewSpace中的z分量，必须保持一致才能转换至正确的ViewPort（视口）坐标，否则采样的结果不对。                float3 offsetPosVS = float3(v.posVS.xy + v.normVS.xy * _rimWidth, v.posVS.z);                float4 offsetPosCS = TransformWViewToHClip(offsetPosVS);//在观察空间偏移后转裁剪空间                float4 offsetPosVP = TransformHClipToViewPortPos(offsetPosCS);//从裁剪空间转view port space，视口空间（也就是屏幕UV坐标空间），获得位移后视图                //float3 nonHomogeneousCoord = v.posCS.xyz / v.posCS.w;//裁剪空间进行齐次除法得NDC                //float2 screenUV = nonHomogeneousCoord.xy;                float2 screenUV = v.scrPos.xy/v.scrPos.w;                float depth = SAMPLE_TEXTURE2D_X(_CameraDepthTexture, sampler_CameraDepthTexture, screenUV).r; //获得原深度,链接文章中depth获取存疑                float linearEyeDepth = LinearEyeDepth(depth, _ZBufferParams); // 离相机越近越大(小？？？//解析深度为线性深度                float offsetDepth = SAMPLE_TEXTURE2D_X(_CameraDepthTexture, sampler_CameraDepthTexture, offsetPosVP).r;//获得位移后视图的深度值                float linearEyeOffsetDepth = LinearEyeDepth(offsetDepth, _ZBufferParams);                float depthDiff = linearEyeOffsetDepth - linearEyeDepth;                float rimMask = smoothstep(0, _rimThreshold, depthDiff);                //float rimMask = step(_rimThreshold, depthDiff);                float3 rim = _enableRim * saturate(rimMask - _rimRange);//_RimColor shadowColor step(0.1, lightMap.g)               //==================边缘光预览

此外还有阴影ShadowCaster Pass，描边片元着色器，获取深度图的pass，urp自带后处理，就不放了。欣赏最终效果：

晚上调参后

白天

下次再调，要先把夜晚参数记下