【ShaderLab罪恶装备卡通角色_二次元风格_“Sol Badguy“_角色渲染(第二篇)】

角色初始效果：

基础渲染SimpleBas

Shader "SimpleBase"
{
    Properties
    {
        [Header(BaseColor)]
        _MainTex ("BaseTex", 2D) = "white" {}
        [Space(20)]
        [Header(ILM)]
        _ILMTex("ILMTex",2D) = "white"{}
        [Space(20)]
        [Header(SSS)]
        _SssTex("SssTex",2D) = "white"{}
        [Space(20)]
        [Header(Detail)]
        _DetailTex("DetailTex",2D) = "white"{}
    }
    SubShader
    {
        Tags { "RenderType"="Opaque" }
        LOD 100

        Pass
        {
            Tags{"LightMode"="ForwardBase"}
            CGPROGRAM
            #pragma vertex vert
            #pragma fragment frag
            #pragma multi_compile_fwdbase

            #include "UnityCG.cginc"
            #include "Lighting.cginc"
            #include "AutoLight.cginc"

            struct appdata
            {
                float4 vertex : POSITION;
                float2 uv0 : TEXCOORD0;
                float2 uv1 : TEXCOORD1;
                float4 tangent :TEXCOORD2;
                half3 normal : NORMAL;
                half4 color : COLOR;
            };

            struct v2f
            {
                float4 uv : TEXCOORD0;
                float4 pos : SV_POSITION;
                half4 vertexColor : TEXCOORD1;
                half3 worldNormal : TEXCOORD2;
                float3 worldPos : TEXCOORD3;
            };

            sampler2D _MainTex;
            float4 _MainTex_ST;
            sampler2D _ILMTex;
            sampler2D _SssTex;
            sampler2D _DetailTex;

            v2f vert (appdata v)
            {
                v2f o;
                o.pos = UnityObjectToClipPos(v.vertex);
                o.uv.xy = TRANSFORM_TEX(v.uv0, _MainTex);
                o.uv.zw = v.uv1;
                o.vertexColor = v.color;
                o.worldPos = mul(unity_ObjectToWorld,v.vertex).xyz;
                o.worldNormal = mul(v.normal,(float3x3)unity_WorldToObject);
                return o;
            }

            fixed4 frag (v2f i) : SV_Target
            {
                fixed4 ilm = tex2D(_ILMTex,i.uv.xy);
                fixed4 baseColor = tex2D(_MainTex, i.uv.xy);
                fixed4 sssColor = tex2D(_SssTex,i.uv.xy);
                fixed3 detail = tex2D(_DetailTex,i.uv.zw);
                half ao = saturate((i.vertexColor.r - 0.7) * 50);
                half3 worldNormal = normalize(i.worldNormal);
                half3 worldLightDir = normalize(UnityWorldSpaceLightDir(i.worldPos));
                half3 worldViewDir = normalize(UnityWorldSpaceViewDir(i.worldPos));
                half3 halfDir = normalize(worldLightDir + worldViewDir);
                half NdotH = saturate(dot(halfDir,worldNormal));
                half NdotL = dot(worldLightDir,worldNormal);
                half sssFactor = saturate((NdotL * 0.5 + 0.5 - i.vertexColor.b * 0.5) * 50) * ao;
                fixed4 finalColor = 1;
                finalColor.rgb = lerp(sssColor,baseColor,sssFactor) * detail * ilm.a;
                return finalColor;
            }
            ENDCG
        }
    }
}

资源分析

模型

顶点颜色：

模型的B通道灰色

贴图资源

SOL_base_基础色块效果：

其中SOL_base_A通道的效果：

• 其中A通道，是将人物身上的文字图案区域 描黑。

SOL_ilm：如下

SOL_ilm模型上区域分布

如下：

- 左到右，依次为RGBA。

• R通道：控制整体的高光强度。

• G通道：控制NdotL光照的偏移值，例如褶皱。

• B通道：控制高光的大小、范围或者形状。

• A通道：人物模型的内描线。

• 顶点颜色：

• R通道：AO，也是控制NdotL光照偏移。

SOL_Sss：如下

SOL_ilm在模型上的效果

SSSTexture的值与环境光的颜色相乘得到的颜色来决定阴影颜色。
明部主光颜色
暗部 环境光颜色

优化

优化前全身图

优化后全身图

面部对比图

腰带和手臂描边对比图

对比图

卡渲代码

Shader "SOL"
{
    Properties
    {
        [Header(BaseColor)]
        _MainTex ("BaseTex", 2D) = "white" {}
        [Space(20)]
        [Header(ILM)]
        _ILMTex("ILMTex",2D) = "gray"{}
        [Space(20)]
        [Header(SSS)]
        _SssTex("SssTex",2D) = "black"{}
        [Space(20)]
        [Header(Detail)]
        _DetailTex("DetailTex",2D) = "white"{}
        _ToonThreshold("ToonThreshold",Range(0,1)) = 0.5
        _ToonHardness("ToonHardness",Float) = 20.0
        _SpecColor("spec color", Color) = (1,1,1,1)
        _SpecSize("Spec Size",Range(0,1)) = 1
        [Space(20)]
        [Header(OutLine)]
        _OutlineColor("Outline Color", Color) = (0,0,0,0)
        _Outlinewidth("Outline Width",Range(0,1)) = 1
    }
    SubShader
    {
        Tags { "RenderType"="Opaque" }
        LOD 100
        Pass
        {
            Tags{"LightMode"="ForwardBase"}
            CGPROGRAM
            #pragma vertex vert
            #pragma fragment frag
            #pragma multi_compile_fwdbase

            #include "UnityCG.cginc"
            #include "Lighting.cginc"
            #include "AutoLight.cginc"

            struct appdata
            {
                float4 vertex : POSITION;
                float2 uv0 : TEXCOORD0;
                float2 uv1 : TEXCOORD1;
                half3 normal : NORMAL;
                half4 color : COLOR;
            };

            struct v2f
            {
                float4 uv : TEXCOORD0;
                float4 pos : SV_POSITION;
                half4 vertexColor : TEXCOORD1;
                half3 worldNormal : TEXCOORD2;
                float3 worldPos : TEXCOORD3;
            };

            sampler2D _MainTex;
            sampler2D _ILMTex;
            sampler2D _SssTex;
            sampler2D _DetailTex;

            half _ToonThreshold;
            half _ToonHardness;
            half _SpecSize;

            //没有定义"float4 _SpecColor" 是因为在#include "UnityLightingCommon.cginc"文件里已经被声明。
            // float4 _SpecColor;

            v2f vert (appdata v)
            {
                v2f o;
                o.pos = UnityObjectToClipPos(v.vertex);
                o.uv = float4 (v.uv0,v.uv1);
                o.vertexColor = v.color;
                o.worldPos = mul(unity_ObjectToWorld,v.vertex).xyz;
                o.worldNormal = mul(v.normal,(float3x3)unity_WorldToObject);
                return o;
            }

            fixed4 frag (v2f i) : SV_Target
            {
                half2 uv1 = i.uv.xy;
                half2 uv2 = i.uv.zw;
                //贴图采样、亮部和暗部的颜色、控制高光的强度
                fixed4 ilm = tex2D(_ILMTex,i.uv.xy);
                half spec_intensity = ilm.r;//控制高光强度
                half diffuse_control = ilm.g * 2.0 - 1.0;//光照偏移
                half spec_size = ilm.b;//控制高光形状
                half inner_line = ilm.a;//内描线
                fixed4 baseColor = tex2D(_MainTex, i.uv.xy);//亮部的颜色
                fixed4 sssColor = tex2D(_SssTex,i.uv.xy);//暗部的颜色
                fixed3 detail = tex2D(_DetailTex,i.uv.zw);//细节线条
                //顶点处理
                half ao = saturate((i.vertexColor.r - 0.7) * 50);
                //向量
                half3 worldNormal = normalize(i.worldNormal);
                half3 worldLightDir = normalize(UnityWorldSpaceLightDir(i.worldPos));
                half3 worldViewDir = normalize(UnityWorldSpaceViewDir(i.worldPos));
                //漫反射
                half NdotL = dot(worldLightDir,worldNormal);
                half halflambert = (NdotL + 1.0) * 0.5;
                half lambertterm = halflambert * ao + diffuse_control;
                half toondiffuse = saturate ((lambertterm - _ToonThreshold) * _ToonHardness);
                half3 finaldiffuse  = lerp(sssColor ,baseColor,toondiffuse);

                //高光
                float NdotV = (dot(worldNormal,worldViewDir) + 1.0) * 0.5;
                float spec_term = NdotV * ao + diffuse_control;
                spec_term = halflambert * 0.9 + spec_term * 0.1;
                half toon_spec = saturate((spec_term - (1.0 - spec_size * _SpecSize)) * 500);
                half3 speccolor = (_SpecColor.xyz + baseColor) * 0.5;
                half3 finaspec = toon_spec * speccolor * spec_intensity;

                //描线
                half3 inner_line_Color = lerp(baseColor * 0.2 , float3(1.0,1.0,1.0),inner_line);
                half3 ditailcolor = tex2D(_DetailTex , uv2);
                ditailcolor = lerp(baseColor * 0.2, float3(1.0,1.0,1.0),ditailcolor);
                half3 finalline = inner_line_Color * inner_line_Color * ditailcolor;

                fixed3 finalColor = (finaldiffuse + finaspec) * finalline;
                return float4(finalColor,1.0);
            }
            ENDCG
        }
        Pass
        {
            Cull Front
            CGPROGRAM
            #pragma vertex vert
            #pragma fragment frag
            #pragma multi_compile_fwdbase
            #include "UnityCG.cginc"
            struct appdata
            {
                float4 vertex : POSITION;
                float2 uv0 : TEXCOORD0;
                half3 normal : NORMAL;
                half4 color : COLOR;
            };
            struct v2f
            {
                float2 uv : TEXCOORD0;
                float4 pos : SV_POSITION;
                half4 vertexColor : TEXCOORD1;
                half3 worldNormal : TEXCOORD2;
                float3 worldPos : TEXCOORD3;
            };
            sampler2D _MainTex;
            float4 _OutlineColor;
            float _Outlinewidth;

            v2f vert (appdata v)
            {
                v2f o;
                float3 pos_VS = UnityObjectToViewPos(v.vertex);
                float3 normal_WS = UnityObjectToWorldNormal(v.normal);
                float3 outline_dir = normalize(mul((float3x3)UNITY_MATRIX_V,normal_WS));
                o.vertexColor = v.color;
                pos_VS += outline_dir * _Outlinewidth * 0.001 * v.color.a;
                o.pos = mul(UNITY_MATRIX_P,float4(pos_VS,1.0));
                o.uv = v.uv0;
                return o;
            }

            fixed4 frag (v2f i) : SV_Target
            {
                fixed3 baseColor = tex2D(_MainTex, i.uv.xy).xyz;
                half maxComponent = max(max(baseColor.r,baseColor.g),baseColor.b) - 0.004;
                half3 saturatedColor = step(maxComponent.rrr,baseColor) * baseColor;
                saturatedColor = lerp(baseColor.rgb,saturatedColor,0.6);
                half3 outlineColor = 0.8 * saturatedColor * baseColor * _OutlineColor.xyz;
                return float4(outlineColor,1.0);
            }
            ENDCG
        }
    }
}

卡渲参考链接：

西川善司：【纯卡通动画的实时3D图形】的秘密
【翻译】西川善司「实验做出的游戏图形」「GUILTY GEAR Xrd -SIGN-」中实现的「纯卡通动画的实时3D图形」的秘密，前篇（1）