简单的卡通渲染

前言

        这篇文章是我在2024.2.21便想写的文章。可是因为各种各样的原因，最终拖到了现在去写。但是我也不打算多写什么东西，因为有些东西我也不懂，有些地方我也觉得莫名其妙。所以这篇文章就当是一次尝试了的记录了。

代码

Shader "Unlit/CelShader"
{
    Properties
    {
        _MainTex ("Texture", 2D) = "white" {}
        _MainColor ("Main Color", Color) = (1,1,1,1)

        [HDR]
        _SpecularColor("Specular Color", Color) = (1,1,1,1)
        _Glossiness("Glossiness", Range(8,255)) = 32

        [Toggle(_NORMALMAP)]
        _EnableNormalMap("Enable Normal Map", Int) = 0
        [NoScaleOffset]_BumpMap("Normal Map", 2D) = "bump" {}
        _BumpScale("Bump Scale", Float) = 1.0

        [HDR]
        _RimColor("Rim Color", Color) = (1,1,1,1)

        _RimAmount("Rim Amount", Range(0, 1)) = 0.716
        _RimThreshold("Rim Threshold", Range(0, 1)) = 0.1

        _OutLine("OutLine",Float) = 1
        _OutLineColor("Color",Color) = (1,1,1,1)

        [Toggle(_CLIP)]
        _EnableClip("Enable Clip", Int) = 0
        _ClipLimit("Clip Limit",Range(0,1)) = 0.2
    }
    SubShader
    {
        Tags { "RenderType"="Opaque" }
        LOD 100

        HLSLINCLUDE

        #include "Packages/com.unity.render-pipelines.universal/ShaderLibrary/Core.hlsl"
        #include_with_pragmas "Packages/com.unity.render-pipelines.universal/ShaderLibrary/DOTS.hlsl"

        #include "Packages/com.unity.render-pipelines.universal/ShaderLibrary/Lighting.hlsl"
        #include "Packages/com.unity.render-pipelines.universal/Shaders/ShadowCasterPass.hlsl"
        #include "Packages/com.unity.render-pipelines.universal/ShaderLibrary/Input.hlsl"

        struct appdata
        {
            float4 vertex : POSITION;
            float4 normal : NORMAL;
            float4 tangent : TANGENT;
            float2 uv : TEXCOORD0;
        };

        struct v2f
        {
            float4 vertex : SV_POSITION;
            float2 uv : TEXCOORD0;
        };

        struct celV2F
        {
            float4 vertex : SV_POSITION;
            float2 uv : TEXCOORD0;
            float4 positionWS : TEXCOORD1;
            float4 tangentWS : TEXCOORD2;
            float4 normalWS : TEXCOORD3;
        };

        CBUFFER_START(UnityPerMaterial)
            sampler2D _MainTex;
            float4 _MainTex_ST;

            half4 _MainColor;

            float4 _SpecularColor;
            float _Glossiness;

            sampler2D _BumpMap;
            float _BumpScale;

            float4 _RimColor;
            half _RimAmount;
            half _RimThreshold;

            float _OutLine;
            float4 _OutLineColor;

            half _ClipLimit;
        CBUFFER_END

        v2f outLineVert (appdata v)
        {
            v2f o;
            float3 worldPos = TransformObjectToWorld(v.vertex.xyz);
            float3 viewPos = TransformWorldToView(worldPos);
            float3 viewNormal = TransformWorldToViewNormal(TransformObjectToWorldNormal(v.normal.xyz));
            viewNormal.z = -0.5;
            worldPos = TransformViewToWorld(viewPos + normalize(viewNormal) * _OutLine);
            o.vertex = TransformWorldToHClip(worldPos);
            o.uv = v.uv;
            return o;
        }

        half4 outLineFrag (v2f i) : SV_Target
        {
            half4 col = tex2D(_MainTex, i.uv);
            #ifdef _CLIP
                clip(col.a - _ClipLimit); 
            #endif
            return _OutLineColor;
        }

        v2f vert (appdata v)
        {
            v2f o;
            o.vertex = TransformObjectToHClip(v.vertex.xyz);
            o.uv = TRANSFORM_TEX(v.uv, _MainTex);
            return o;
        }

        half4 frag (v2f i) : SV_Target
        {
            // sample the texture
            half4 col = tex2D(_MainTex, i.uv);
            return col;
        }

        half4 shadow(v2f i) : SV_Target
        {
            return 0;
        }

        celV2F celVert(appdata v)
        {
            celV2F o;
            o.vertex = TransformObjectToHClip(v.vertex.xyz);
            o.uv = TRANSFORM_TEX(v.uv, _MainTex);
            VertexNormalInputs   nInput = GetVertexNormalInputs(v.normal, v.tangent);
            o.positionWS.xyz = TransformObjectToWorld(v.vertex.xyz);
            o.positionWS.w = 1;
            real sign = v.tangent.w * GetOddNegativeScale();
            o.tangentWS = half4(nInput.tangentWS,sign);
            o.normalWS.xyz = nInput.normalWS;
            return o;
        }

        half4 celFrag(celV2F i) : SV_TARGET
        {
            half4 col = tex2D(_MainTex, i.uv);
            #ifdef _CLIP
                clip(col.a - _ClipLimit);
            #endif

            float3 normal;

            #ifdef _NORMALMAP
                half4 normalCol = tex2D(_BumpMap,i.uv);
                #if BUMP_SCALE_NOT_SUPPORTED
                    normal = UnpackNormal(normalCol);
                #else
                    normal = UnpackNormalScale(normalCol, _BumpScale);
                #endif
                float3 bitangent = i.tangentWS.w * cross(i.normalWS.xyz, i.tangentWS.xyz);
                half3x3 tangentToWorld = half3x3(i.tangentWS.xyz, bitangent.xyz, i.normalWS.xyz);
                normal = TransformTangentToWorld(normal, tangentToWorld);
            #else
                normal = normalize(i.normalWS).xyz;
            #endif

            Light mainLight = GetMainLight(TransformWorldToShadowCoord(i.positionWS));

            float NdotL = saturate(dot(mainLight.direction, normal)) * 0.5 + 0.5;

            float shadow = smoothstep(0,0.1,mainLight.shadowAttenuation * mainLight.distanceAttenuation);

            // 漫反射
            //half4 diffuseCol = col * smoothstep(0,1,NdotL) * _MainColor;
            half4 diffuseCol = col * smoothstep(0.3,0.5,NdotL) * _MainColor;
            diffuseCol.a = 1;

            // 高光
            float3 viewDir = GetWorldSpaceNormalizeViewDir(i.positionWS.xyz);
            float3 halfVector = normalize(mainLight.direction + viewDir);
            float NdotH = dot(normal, halfVector);
            float specularIntensity = pow(NdotH, _Glossiness);
            float specularIntensitySmooth = smoothstep(0.005, 0.01, specularIntensity);
            float3 specular = specularIntensitySmooth * _SpecularColor.rgb;

            // 菲涅尔(边缘光)
            float rimDot = 1 - saturate(dot(viewDir, normal));
            float rimIntensity = rimDot * pow(NdotL, _RimThreshold);
            rimIntensity = smoothstep(_RimAmount - 0.01, _RimAmount + 0.01, rimIntensity);
            float3 rim = rimIntensity * _RimColor.rgb;

            diffuseCol.rgb = (diffuseCol.rgb + specular);

            diffuseCol.rgb *= saturate(mainLight.color.rgb);
            diffuseCol.rgb *= smoothstep(0,0.2,mainLight.shadowAttenuation);
            diffuseCol.rgb += rim;

            return diffuseCol;
        }

        ENDHLSL

        Pass
        {
            Tags{"LightMode"="OutLine"}

            Cull Front
            HLSLPROGRAM
            #pragma vertex outLineVert
            #pragma fragment outLineFrag

            #pragma shader_feature_local _CLIP

            ENDHLSL
        }

        Pass
        {
            Tags{"LightMode"="UniversalForward"}

            Blend SrcAlpha OneMinusSrcAlpha

            HLSLPROGRAM
            #pragma vertex celVert
            #pragma fragment celFrag

            #pragma shader_feature_local _NORMALMAP
            #pragma shader_feature_local _CLIP

            #pragma multi_compile _ _MAIN_LIGHT_SHADOWS _MAIN_LIGHT_SHADOWS_CASCADE

            #pragma multi_compile_fragment _ _SHADOWS_SOFT
            #pragma multi_compile_instancing

            ENDHLSL
        }

        pass
        {
            Tags{"LightMode"="ShadowCaster"}

            ZWrite On
            ZTest LEqual
            ColorMask 0

            HLSLPROGRAM
            #pragma vertex vert
            #pragma fragment shadow
            #pragma multi_compile_fragment _ LOD_FADE_CROSSFADE
            #pragma multi_compile_vertex _ _CASTING_PUNCTUAL_LIGHT_SHADOW

            ENDHLSL
        }
    }
}

本人疑惑的地方

        代码中的高光在实际项目上几乎没有，而且大多数情况下没有高光会更像是卡通风格。不过我参考文章中的展示却非常的像。

使用感悟

        我发现代码本身并不能成为卡通风格的决定要素，物体本身贴图与卡通风格更加接近。那么只要加上描边，这个物体就会像是卡通风格。即使你使用的是默认的Lit作为主渲染也有这样的感觉。

参考文章

https://roystan.net/articles/toon-shader/