Unity3d Shader篇（十四）

文章目录

前言
一、什么是卡通着色？
- 1. 卡通着色原理
- 2. 卡通着色优缺点
- - - 优点：
    - 缺点：
二、使用步骤
- 1. Shader 属性定义
- 2. SubShader 设置
- 3. 卡通轮廓 Pass
- 4. 卡通主 Pass
三、效果
四、总结

前言

卡通着色是一种常见的图形渲染效果，它将物体的光照和颜色处理成简单的、扁平的色块，以模拟漫画或动画中的风格。本篇博客将介绍如何在Unity中使用Shader实现卡通着色效果。

一、什么是卡通着色？

1. 卡通着色原理

简化光照：卡通着色将光照计算简化为基于表面法线和光源方向的漫反射模型，通常忽略了光源的阴影和反射等复杂效果，使得渲染结果更加扁平。
颜色平滑处理：卡通着色通过将颜色分段处理或应用简单的插值，使得颜色之间的过渡更加平滑，呈现出类似于印刷品的色彩效果。
轮廓加粗：为了突出物体的轮廓，卡通着色通常会在物体的边缘添加黑色或彩色的轮廓线，增强了整体的辨识度和艺术感。
卡通效果增强：通过调整卡通效果的参数，可以控制渲染结果的卡通程度，从而满足不同风格的需求。

2. 卡通着色优缺点

优点：

独特的艺术风格：卡通着色能够产生独特的艺术效果，使得场景或物体呈现出类似于漫画或动画的视觉风格，增加了趣味性和表现力。
渲染速度快：相比于传统的真实感渲染技术，卡通着色通常需要计算的光照和材质参数较少，因此渲染速度较快，适用于实时渲染和移动平台。
简单易用：实现卡通着色的技术和工具已经比较成熟，开发者可以通过使用现成的着色器或工具包，快速实现卡通效果，降低了开发成本。

缺点：

失去真实感：卡通着色通常会忽略真实世界中的光照、阴影和材质细节，因此渲染结果可能缺乏真实感，无法满足某些场景或项目的需求。
局限性较大：卡通着色的艺术风格和效果相对固定，适用范围较窄，无法满足所有类型的项目或用户需求。
易产生过度简化：为了追求卡通效果，有时候可能会过度简化场景或物体的细节，导致渲染结果显得过于平面化或单调。

二、使用步骤

1. Shader 属性定义

首先，我们定义Shader中所需的属性，包括主纹理贴图、渐变纹理贴图、漫反射颜色、轮廓大小、轮廓颜色、卡通效果步数、卡通效果强度、边缘光颜色和边缘光强度等。

// 定义属性
Shader "Unlit/ToonShader"
{
    Properties
    {
        _MainTex ("Main Texture", 2D) = "white" // 主纹理贴图
        _RampTex ("Ramp Texture", 2D) = "white" // 渐变纹理贴图
        _Diffuse("Diffuse Color",Color)=(1,1,1,1) // 漫反射颜色属性，默认白色
        _OutlineScale("Outline Scale",Range(0,1))=0.5 // 轮廓大小属性
        _OutlineColor("Outline Color",Color)=(0,0,0,1) // 轮廓颜色属性
        _Steps("Steps",Range(1,30))=1 // 卡通效果步数
        _ToonEffect("Toon Effect",Range(0,1))=0.5 // 卡通效果强度
        _RimColor("Rim Color",Color)=(1,1,1,1) // 边缘光颜色
        _RimPower("Rim Power",Range(0.001,3))=1 // 边缘光强度
    }

    // 其他SubShader和Pass部分省略
}

2. SubShader 设置

SubShader
{
    Tags
    {
        "Queue"="Geometry+1000"// 在其他不透明物体后面渲染
        "RenderType"="Opaque" // 渲染类型为Opaque
    }
    
    LOD 100 // 细节级别
}

3. 卡通轮廓 Pass

卡通着色常常伴随着黑色轮廓，我们首先实现轮廓效果。在Shader中，通过对顶点位置进行外扩，并在片元着色器中输出轮廓颜色来实现。

// 轮廓Pass
Pass
{
    Name "Outline" // Pass名称为Outline
    Cull Front // 剔除正面

    CGPROGRAM
    #pragma vertex vert // 顶点着色器函数声明
    #pragma fragment frag // 片元着色器函数声明
    #include "UnityCG.cginc" // 包含Unity宏

    float _OutlineScale; // 轮廓大小
    float4 _OutlineColor; // 轮廓颜色

    struct v2f
    {
        float4 vertex:SV_POSITION; // 顶点位置
    };

    // 顶点着色器
    v2f vert(appdata_base v)
    {
        v2f o;
        o.vertex = UnityObjectToClipPos(v.vertex); // 将顶点位置从对象空间转换到裁剪空间

        float3 normal = normalize(mul((float3x3)UNITY_MATRIX_IT_MV, v.normal)); // 计算变换后的法线
        float2 viewNormal = TransformViewToProjection(normal.xy); // 将法线转换到投影空间
        o.vertex.xy += viewNormal * _OutlineScale; // 根据轮廓大小调整顶点位置

        return o;
    }

    // 片元着色器
    fixed4 frag(v2f i):SV_Target
    {
        return _OutlineColor; // 输出轮廓颜色
    }
    ENDCG
}

剔除正面： 轮廓 Pass 会设置剔除正面（Cull Front），这意味着只有物体的背面会被渲染，而正面将被剔除。
顶点着色器处理： 顶点着色器会对物体的顶点进行处理，通常会通过一定的方式扩大或缩小顶点的位置，以产生轮廓效果。这可以通过将顶点从对象空间转换到裁剪空间后，根据一定的算法调整顶点的位置来实现。
片元着色器处理： 片元着色器负责输出轮廓的颜色。通常轮廓的颜色是黑色或者是与物体主色彩对比较大的颜色，以便与主 Pass 渲染的物体区分开来。

4. 卡通主 Pass

接下来，我们实现卡通着色的主要效果。在片元着色器中，根据光照和漫反射计算出最终颜色，并加入卡通效果和边缘光效果。

// 主Pass
Pass
{
    CGPROGRAM
    #pragma vertex vert // 顶点着色器函数声明
    #pragma fragment frag // 片元着色器函数声明
    #include "UnityCG.cginc" // 包含Unity宏
    #include "Lighting.cginc" // 包含光照宏

    struct v2f
    {
        float4 vertex : SV_POSITION; // 顶点位置
        float2 uv : TEXCOORD0; // 纹理坐标
        fixed3 worldNormal : TEXCOORD1; // 世界空间法线
        float3 worldPos : TEXTCOORD2; // 世界空间位置
    };

    sampler2D _MainTex; // 主纹理贴图
    sampler2D _RampTex; // 渐变纹理贴图
    float4 _MainTex_ST; // 主纹理贴图的缩放和偏移参数
    float4 _Diffuse; // 漫反射颜色
    float _Steps; // 卡通效果步数
    float _ToonEffect; // 卡通效果强度
    float4 _RimColor; // 边缘光颜色
    float _RimPower; // 边缘光强度

    // 顶点着色器
    v2f vert(appdata_base v)
    {
        v2f o;
        o.vertex = UnityObjectToClipPos(v.vertex); // 将顶点位置从对象空间转换到裁剪空间
        o.worldNormal = UnityObjectToWorldNormal(v.normal); // 将法线从对象空间转换到世界空间
        o.worldPos = mul(unity_ObjectToWorld, v.vertex); // 将顶点位置从对象空间转换到世界空间
        o.uv = TRANSFORM_TEX(v.texcoord, _MainTex); // 转换纹理坐标
        return o;
    }

    // 片元着色器
    fixed4 frag(v2f i) : SV_Target
    {
        fixed3 ambient = UNITY_LIGHTMODEL_AMBIENT.xyz; // 环境光
        fixed4 albedo = tex2D(_MainTex, i.uv); // 纹理采样
        fixed3 worldLightDir = UnityWorldSpaceLightDir(i.worldPos); // 光源方向
        fixed3 viewDir = normalize(UnityWorldSpaceViewDir(i.worldPos)); // 视角方向

        // 求半兰伯特模型
        float difLight = dot(worldLightDir, i.worldNormal) * 0.5 + 0.5; // 计算漫反射光强度

        // 卡通颜色处理
        difLight = smoothstep(0, 1, difLight); // 平滑过渡
        float toon = floor(difLight * _Steps) / _Steps; // 卡通效果
        difLight = lerp(difLight, toon, _ToonEffect); // 混合卡通效果

        // 边缘光计算
        float rim = 1 - dot(i.worldNormal, viewDir); // 边缘光强度
        fixed3 rimColor = _RimColor * pow(rim, 1 / _RimPower); // 边缘光颜色

        // 漫反射计算
        fixed3 diffuse = _LightColor0.rgb * albedo * _Diffuse.rgb * difLight; // 漫反射光颜色

        fixed3 color = diffuse + ambient + rimColor; // 最终颜色
        return fixed4(color, 1); // 输出最终颜色
    }
    ENDCG
}

顶点着色器处理：主 Pass 的顶点着色器会对物体的顶点进行一些必要的计算和变换，如将顶点从对象空间转换到裁剪空间、将法线从对象空间转换到世界空间等。
片元着色器处理：主 Pass 的片元着色器负责处理每个像素的渲染。这包括对物体表面的光照计算、纹理采样、漫反射计算、卡通效果处理、边缘光计算等。最终输出的颜色会结合光照、材质、纹理等信息，生成最终的渲染结果。
光照计算：主 Pass 会根据场景中的光源信息以及物体的法线等属性，计算每个像素的光照效果。这可以是简化的漫反射光照模型，也可以包括其他光照效果，如环境光、辐射光等。
卡通效果处理：主 Pass 也可能包含卡通效果的处理。这通常是通过调整颜色、平滑度等参数，使渲染结果呈现出卡通风格的效果。
边缘光计算：一些主 Pass 也会包含边缘光效果的计算。这是为了增强物体的轮廓，使得物体在渲染结果中更加清晰可辨。