2. 程式人生 > >Unity ShaderLab開發實戰（四）描邊

Unity ShaderLab開發實戰（四）描邊

阿新 • • 發佈：2018-12-12

      之前可能在面剔除中提到過，面剔除可以用來實現描邊效果。（以下效果圖來自Unity3D ShaderLab開發實戰詳解）

       原理：這是一個最簡單的描邊，使用面剔除：Cull指令，上圖中 ，最左邊的球使用的是Cull Front， 中間的使用Cull Back。最右邊的球第一個Pass使用了Cull Front並且將球體沿法線擠出一點點，第二個Pass使用Cull Back正常渲染，從而產生了描邊效果。下面開始講一下各種描邊。

1.最簡單的方式，一個pass講物體沿法線擠出，形成輪廓。

效果：

程式碼：

Shader "Tut/Shader/Toon/Outline_1" {
    Properties {
        _Outline("Outline",range(0,0.2))=0.02
    }
    SubShader {
        pass{
        Tags{"LightMode"="Always"}
        Cull Off
        ZWrite Off
        CGPROGRAM
        #pragma vertex vert
        #pragma fragment frag
        #include "UnityCG.cginc"
        float _Outline;
        struct v2f {
            float4 pos:SV_POSITION;
        };

        v2f vert (appdata_full v) {
            v2f o;
            v.vertex.xyz+=v.normal*_Outline;
            o.pos=mul(UNITY_MATRIX_MVP,v.vertex);
            return o;
        }
        float4 frag(v2f i):COLOR
        {
            float4 c=0;
            return c;
        }
        ENDCG
        }//end of pass
        pass{
        Tags{"LightMode"="ForwardBase"}
        CGPROGRAM
        #pragma vertex vert
        #pragma fragment frag
        #include "UnityCG.cginc"

        float4 _LightColor0;
        struct v2f {
            float4 pos:SV_POSITION;
            float3 lightDir:TEXCOORD0;
            float3 viewDir:TEXCOORD1;
            float3 normal:TEXCOORD2;
        };

        v2f vert (appdata_full v) {
            v2f o;
            o.pos=mul(UNITY_MATRIX_MVP,v.vertex);
            o.normal=v.normal;
            o.lightDir=ObjSpaceLightDir(v.vertex);
            o.viewDir=ObjSpaceViewDir(v.vertex);

            return o;
        }
        float4 frag(v2f i):COLOR
        {
            float4 c=1;
            float3 N=normalize(i.normal);
            float3 viewDir=normalize(i.viewDir);
            float diff=dot(N,i.lightDir);
            diff=(diff+1)/2;
            diff=smoothstep(diff/12,1,diff);
            c=_LightColor0*diff;
            return c;
        }
        ENDCG
        }
    } 
}

       這個方法有兩個問題：1.重疊物體區域沒有描邊，因為關閉了ZWrite，後面渲染的物體根據ZTest的結果將物體自己渲染輸出寫入，把輪廓擦掉了；2.輪廓的粗細和相機遠近有關，距離越遠，輪廓越細；3.有些地方輪廓是間斷的，比如上圖中cube，相鄰兩個面的法線方向是分離的，再沿法線擠出去後當然就被分開了。

2.先解決第一和第二個問題，開啟ZWrite，第一個問題就解決了，第二個問題我們希望最終的輸出是在螢幕上看到的那樣擠出來，而不是模型上，不希望考慮鏡頭的遠近，也就是在視空間下擠。

效果：

程式碼：

Shader "Tut/Shader/Toon/Outline_1x" {
    Properties {
        _Outline("Out line",range(0,0.1))=0.02
    }
    SubShader {
        pass{
        Tags{"LightMode"="Always"}
        Cull Front
        ZWrite On
        CGPROGRAM
        #pragma vertex vert
        #pragma fragment frag
        #include "UnityCG.cginc"
        float _Outline;
        struct v2f {
            float4 pos:SV_POSITION;
        };

        v2f vert (appdata_full v) {
            v2f o;
            o.pos=mul(UNITY_MATRIX_MVP,v.vertex);
            float3 norm   = mul ((float3x3)UNITY_MATRIX_IT_MV, v.normal);
            float2 offset = TransformViewToProjection(norm.xy);
            //offset=normalize(offset);
            o.pos.xy += offset * o.pos.z *_Outline;
            return o;
        }
        float4 frag(v2f i):COLOR
        {
            return 0;
        }
        ENDCG
        }//end of pass
        pass{
        Tags{"LightMode"="ForwardBase"}
        CGPROGRAM
        #pragma vertex vert
        #pragma fragment frag
        #include "UnityCG.cginc"
        float4 _LightColor0;
        sampler2D _MainTex;

        struct v2f {
            float4 pos:SV_POSITION;
            float3 lightDir:TEXCOORD0;
            float3 viewDir:TEXCOORD1;
            float3 normal:TEXCOORD2;
        };

        v2f vert (appdata_full v) {
            v2f o;
            o.pos=mul(UNITY_MATRIX_MVP,v.vertex);
            o.normal=v.normal;
            o.lightDir=ObjSpaceLightDir(v.vertex);
            o.viewDir=ObjSpaceViewDir(v.vertex);

            return o;
        }
        float4 frag(v2f i):COLOR
        {
            float4 c=1;
            float3 N=normalize(i.normal);
            float3 viewDir=normalize(i.viewDir);
            float diff=dot(N,i.lightDir);
            diff=(diff+1)/2;
            diff=smoothstep(diff/12,1,diff);
            c=_LightColor0*diff;
            return c;
        }
        ENDCG
        }
    } 
}
3.接下來解決間斷的問題：如果相鄰的面法線方向不太一致，擠出來後的方向就會產生斷裂。如果不把頂點資料當作位置，而當作是一個方向向量，則不管它被多少面共享，這些共享頂點的方向是唯一的。這樣交接處就不會因為往不同方向擠出而導致斷裂了。

效果：

程式碼：

Shader "Tut/Shader/Toon/Outline_2" {
    Properties {
        _Outline("Out line",range(0,0.1))=0.02
    }
    SubShader {
        pass{
        Tags{"LightMode"="Always"}
        Cull Front
        ZWrite On
        CGPROGRAM
        #pragma vertex vert
        #pragma fragment frag
        #include "UnityCG.cginc"
        float _Outline;
        struct v2f {
            float4 pos:SV_POSITION;
        };

        v2f vert (appdata_full v) {
            v2f o;
            o.pos=mul(UNITY_MATRIX_MVP,v.vertex);
            float3 dir=normalize(v.vertex.xyz);
            dir   = mul ((float3x3)UNITY_MATRIX_IT_MV, dir);
            
            float2 offset = TransformViewToProjection(dir.xy);
            //offset=normalize(offset);
            o.pos.xy += offset * o.pos.z *_Outline;
            return o;
        }
        float4 frag(v2f i):COLOR
        {
            return 0;
        }
        ENDCG
        }//end of pass
        pass{
        Tags{"LightMode"="ForwardBase"}
        CGPROGRAM
        #pragma vertex vert
        #pragma fragment frag
        #include "UnityCG.cginc"
        float4 _LightColor0;
        sampler2D _MainTex;

        struct v2f {
            float4 pos:SV_POSITION;
            float3 lightDir:TEXCOORD0;
            float3 viewDir:TEXCOORD1;
            float3 normal:TEXCOORD2;
        };

        v2f vert (appdata_full v) {
            v2f o;
            o.pos=mul(UNITY_MATRIX_MVP,v.vertex);
            o.normal=v.normal;
            o.lightDir=ObjSpaceLightDir(v.vertex);
            o.viewDir=ObjSpaceViewDir(v.vertex);

            return o;
        }
        float4 frag(v2f i):COLOR
        {
            float4 c=1;
            float3 N=normalize(i.normal);
            float3 viewDir=normalize(i.viewDir);
            float diff=dot(N,i.lightDir);
            diff=(diff+1)/2;
            diff=smoothstep(diff/12,1,diff);
            c=_LightColor0*diff;
            return c;
        }
        ENDCG
        }
    } 
}
4.上面對第三個問題的解決方法還有點小問題，當物體的模型空間的原點不在幾何中心時，就會出現某些地方沿頂點擠出的方向看不到，描邊會很不均勻（下圖），需要調和法線和頂點方向（其實就是頂點的方向和法線的方向相互拉一拉，靠攏一下）。

解決方法，簡單的，比如第一個Pass的頂點shader改為法線和頂點方向的調和：

v2f vert (appdata_full v) {
            v2f o;
            o.pos=mul(UNITY_MATRIX_MVP,v.vertex);
            float3 dir=normalize(v.vertex.xyz);
            float3 dir2=v.normal;
            dir=lerp(dir,dir2,_Factor);
            dir= mul ((float3x3)UNITY_MATRIX_IT_MV, dir);
            float2 offset = TransformViewToProjection(dir.xy);
            offset=normalize(offset);
            o.pos.xy += offset * o.pos.z *_Outline;
            return o;
        }

也可以通用一些，試用於複雜圖形。通過頂點方向和法線的點積為正或負來判斷是指向幾何中心還是背離幾何中心，並且可以得到指向或背離的程度。

效果：

程式碼：

Shader "Tut/Shader/Toon/Outline_3x" {
    Properties {
        _Outline("Out line",range(0,0.1))=0.02
        _Factor("Factor",range(1,100))=1
    }
    SubShader {
        pass{
        Tags{"LightMode"="Always"}
        Cull Front
        ZWrite On
        CGPROGRAM
        #pragma vertex vert
        #pragma fragment frag
        #include "UnityCG.cginc"
        float _Outline;
        float _Factor;
        struct v2f {
            float4 pos:SV_POSITION;
        };
        v2f vert (appdata_full v) {
            v2f o;
            o.pos=mul(UNITY_MATRIX_MVP,v.vertex);
            float3 dir=normalize(v.vertex.xyz);
            float3 dir2=v.normal;
            float D=dot(dir,dir2);
            D=(D/_Factor+1)/(1+1/_Factor);
            dir=lerp(dir2,dir,D);
            dir= mul ((float3x3)UNITY_MATRIX_IT_MV, dir);
            float2 offset = TransformViewToProjection(dir.xy);
            offset=normalize(offset);
            o.pos.xy += offset * o.pos.z *_Outline;
            return o;
        }
        float4 frag(v2f i):COLOR
        {
            return 0;
        }
        ENDCG
        }//end of pass
        pass{
        Tags{"LightMode"="ForwardBase"}
        CGPROGRAM
        #pragma vertex vert
        #pragma fragment frag
        #include "UnityCG.cginc"
        float4 _LightColor0;

        struct v2f {
            float4 pos:SV_POSITION;
            float3 lightDir:TEXCOORD0;
            float3 viewDir:TEXCOORD1;
            float3 normal:TEXCOORD2;
        };

        v2f vert (appdata_full v) {
            v2f o;
            o.pos=mul(UNITY_MATRIX_MVP,v.vertex);
            o.normal=v.normal;
            o.lightDir=ObjSpaceLightDir(v.vertex);
            o.viewDir=ObjSpaceViewDir(v.vertex);
            return o;
        }
        float4 frag(v2f i):COLOR
        {
            float4 c=1;
            float3 N=normalize(i.normal);
            float3 viewDir=normalize(i.viewDir);
            float diff=max(0,dot(N,i.lightDir));
            diff=(diff+1)/2;
            diff=smoothstep(0,1,diff);
            c=_LightColor0*diff;
            return c;
        }
        ENDCG
        }
    } 
}
5.上面的方法導致出現一個新問題，cube中間的稜沒描出來，解決方法：可以使用兩個Pass中和，第一個Pass沿法線方向擠出，這個時候有裂痕了，第二個Pass在裂痕的基礎上更多的向頂點方向擠出，這樣就在裂痕處形成描邊。

SubShader {
        pass{
        Tags{"LightMode"="Always"}
        Cull Back
        ZWrite On
        CGPROGRAM
        #pragma vertex vert
        #pragma fragment frag
        #include "UnityCG.cginc"
        float _Outline;
        float _Factor;
        struct v2f {
            float4 pos:SV_POSITION;
        };

        v2f vert (appdata_full v) {
            v2f o;
            o.pos=mul(UNITY_MATRIX_MVP,v.vertex);

            float3 dir=normalize(v.vertex.xyz);
            float3 dir2=v.normal;
            dir=lerp(dir,dir2,_Factor);
            dir= mul ((float3x3)UNITY_MATRIX_IT_MV, dir);
            float2 offset = TransformViewToProjection(dir.xy);
            offset=normalize(offset);
            o.pos.xy += offset * o.pos.z *_Outline;

            return o;
        }
        float4 frag(v2f i):COLOR
        {
            return float4(1,1,1,1);
        }
        ENDCG
        }//end of pass .1
        pass{
        Tags{"LightMode"="Always"}
        Cull Front
        ZWrite Off
        CGPROGRAM
        #pragma vertex vert
        #pragma fragment frag
        #include "UnityCG.cginc"
        float _Outline2;
        float _Factor2;
        struct v2f {
            float4 pos:SV_POSITION;
        };

        v2f vert (appdata_full v) {//.2
            v2f o;
            o.pos=mul(UNITY_MATRIX_MVP,v.vertex);

            float3 dir=normalize(v.vertex.xyz);
            float3 dir2=v.normal;
            dir=lerp(dir,dir2,_Factor2);
            dir= mul ((float3x3)UNITY_MATRIX_IT_MV, dir);
            float2 offset = TransformViewToProjection(dir.xy);
            offset=normalize(offset);
            o.pos.xy += offset * o.pos.z *_Outline2;
            return o;
        }
        float4 frag(v2f i):COLOR
        {
            return float4(0,0,0,0);
        }
        ENDCG
        }//end of pass .2
    } 

    _Factor2在第一個係數_Factor的結果上來調整描邊。但是現在還缺少一個光照上色的Pass，所以使用混合，最終效果（自行調整引數）：

程式碼：

Shader "Tut/Shader/Toon/Outline_4.1" {
    Properties {
        _Outline("Out line",range(0,0.1))=0.02
        _Outline2("Out line2",range(0,0.1))=0.02
        _Factor("Factor",range(0,1))=0.5
        _Factor2("Factor",range(0,1))=0.5
    }
    SubShader {
        pass{
        Tags{"LightMode"="Always"}
        Cull Back
        ZWrite On
        CGPROGRAM
        #pragma vertex vert
        #pragma fragment frag
        #include "UnityCG.cginc"
        float _Outline;
        float _Factor;
        struct v2f {
            float4 pos:SV_POSITION;
        };

        v2f vert (appdata_full v) {
            v2f o;
            o.pos=mul(UNITY_MATRIX_MVP,v.vertex);

            float3 dir=normalize(v.vertex.xyz);
            float3 dir2=v.normal;
            dir=lerp(dir,dir2,_Factor);
            dir= mul ((float3x3)UNITY_MATRIX_IT_MV, dir);
            float2 offset = TransformViewToProjection(dir.xy);
            offset=normalize(offset);
            o.pos.xy += offset * o.pos.z *_Outline;

            return o;
        }
        float4 frag(v2f i):COLOR
        {
            return float4(1,1,1,1);
        }
        ENDCG
        }//end of pass .1
        pass{
        Tags{"LightMode"="Always"}
        Cull Front
        ZWrite Off
        CGPROGRAM
        #pragma vertex vert
        #pragma fragment frag
        #include "UnityCG.cginc"
        float _Outline2;
        float _Factor2;
        struct v2f {
            float4 pos:SV_POSITION;
        };

        v2f vert (appdata_full v) {//.2
            v2f o;
            o.pos=mul(UNITY_MATRIX_MVP,v.vertex);

            float3 dir=normalize(v.vertex.xyz);
            float3 dir2=v.normal;
            dir=lerp(dir,dir2,_Factor2);
            dir= mul ((float3x3)UNITY_MATRIX_IT_MV, dir);
            float2 offset = TransformViewToProjection(dir.xy);
            offset=normalize(offset);
            o.pos.xy += offset * o.pos.z *_Outline2;
            return o;
        }
        float4 frag(v2f i):COLOR
        {
            return float4(0,0,0,0);
        }
        ENDCG
        }//end of pass .2
        pass{
        Tags{"LightMode"="ForwardBase"}
        Blend DstColor Zero
        CGPROGRAM
        #pragma vertex vert
        #pragma fragment frag
        #include "UnityCG.cginc"

        float4 _LightColor0;
        sampler2D _MainTex;
        float _Factor;
        float _Outline;

        struct v2f {
            float4 pos:SV_POSITION;
            float3 lightDir:TEXCOORD0;
            float3 viewDir:TEXCOORD1;
            float3 normal:TEXCOORD2;
        };

        v2f vert (appdata_full v) {
            v2f o;
            o.pos=mul(UNITY_MATRIX_MVP,v.vertex);

            float3 dir=normalize(v.vertex.xyz);
            float3 dir2=v.normal;
            dir=lerp(dir,dir2,_Factor);
            dir= mul ((float3x3)UNITY_MATRIX_IT_MV, dir);
            float2 offset = TransformViewToProjection(dir.xy);
            offset=normalize(offset);
            o.pos.xy += offset * o.pos.z *_Outline;

            o.normal=v.normal;
            o.lightDir=ObjSpaceLightDir(v.vertex);
            o.viewDir=ObjSpaceViewDir(v.vertex);

            return o;
        }
        float4 frag(v2f i):COLOR
        {
            float4 c=1;
            float3 N=normalize(i.normal);
            float3 viewDir=normalize(i.viewDir);
            float diff=max(0,dot(N,i.lightDir));
            diff=(diff+1)/2;
            diff=smoothstep(0,1,diff);
            c=_LightColor0*diff;
            return c;
        }
        ENDCG
        }
    } 
}

補充：通過視線和法線的夾角來判定是否是物體邊緣進行描邊不穩定，這個方法常用於Rim效果，下節講Rim。

相關推薦

Unity ShaderLab開發實戰（四）描邊

      之前可能在面剔除中提到過，面剔除可以用來實現描邊效果。（以下效果圖來自Unity3D ShaderLab開發實戰詳解）        原理：這是一個最簡單的描邊，使用面剔除：Cull指令，上圖中 ，

Unity ShaderLab開發實戰（三）Pass的通用指令開關

1. LOD：        通過給SubShader設定一個整型的Level of DetaiI，即LOD數值，可以在執行時根據硬體裝置能力來決定是否使用此Shader，以及使用哪一個層級的SubShader。 用法eg:   &nbs

Unity ShaderLab開發實戰（二）渲染路徑

       渲染路徑決定了光照如何應用在Shader中，需要為每個Pass指定要使用的渲染路徑，這樣光照計算才可以被正確進行。Unity--Edit--Project Setting--Player--Other Setting--Rendering Pat

Unity ShaderLab開發實戰（五）邊緣光RimColor

參考：https://blog.csdn.net/puppet_master/article/details/53548134 RimColor：邊緣發光效果。效果如下圖（圖片資源也是參考文章裡的）：         邊緣很簡單，法線和視線越垂直

微信小程式開發-從基礎到實戰（四）

LZ很沮喪，因為發現這個專案可能無法實現大部分預期的功能並且不會有太多人看這些文章，已經不太想寫編碼過程，但本著寫文章不僅是經驗分享還是對自己程式設計的記錄及自身知識的驗證，因此咬牙繼續寫完這個專案的相關文章。如果有看到文章的並有跟著學習的朋友要注意目前小程式僅支援https

WEB安全實戰（四）關於 Cookie

round url 主動 gin 加密 文章 日期 就會 dex 前言 這幾天中，一直再跟漏洞打交道，而在這些漏洞中，出現的最多的就是 Cookie 和 Session 了。這篇文章就簡單的介紹一些 Cookie 中最經常使用的四個屬性。也算是為興許的文章做一個

API開發實踐（四） 返回HTML

acea 指定 win filename static box 拖動地圖 ive let 分為兩個部分：生成HTML和返回HTML 生成HTML： 最終想要的時顯示地圖，不可避免的使用高德地圖的API。 【地圖API】地址錄入時如何獲得準確的經緯度？淘寶收貨地址詳解 改變幾

學習 MeteoInfo二次開發教程（四）

手動添加 map dem itl 數控 nas 字號 south title 教程四的問題不大。 1.private void AddMapFrame_ChinaSouthSea()、private void AddTitle()兩個函數和public Form1()函數並

J2SE核心開發實戰（二）——字符串與包裝類

刪除 i++ cnblogs amp 分支語句 核心 最大 用途 else 字符串與包裝類 一、實驗簡單介紹 在本章。我們將學習一些用於處理字符串的API以及包裝類的相關知識。 本章知識點 字符串API 包裝類及其應用 二、認識字符

Spring Boot 揭秘與實戰（四） 配置文件篇 - 有哪些很棒的特性

real randint 開發人員 hat mod 配置管理 bsp footer tar 文章目錄 1. 使用屬性文件2. YAML文件 1.1. 自定義屬性 1.2. 參數引用 1.3. 隨機數屬性 1.4. application-{profile}.proper

python機器學習實戰（四）

畫畫 import 測試數據 trac 1+n read dex 缺失值 類型 python機器學習實戰（四） 版權聲明：本文為博主原創文章，轉載請指明轉載地址

[讀書筆記] R語言實戰 （四） 基本數據管理

mean 圖片 數值 函數 nbsp 一個 img order 分享 1. 創建新的變量 mydata<-data.frame(x1=c(2,2,6,4),x2=c(3,4,2,8)) #方法一 mydata$sumx<-mydata$x1+mydat

ShaderLab學習小結（四）簡單產生陰影

vpd shade size fall text -o process 之前 image 在之前“ShaderLab學習小結（三）漫反射+高光+點光源請添加鏈接描述”中的場景加入一個plane，如下圖：被平行光和點光源照射的球體沒有產生陰影代碼方面很好解決，就是在原先的sh

Spring實戰（四）Spring高級裝配中的bean profile

優先 contex 如何 文件中 web.xml 多個 定義 blog 軟件 　　profile的原意為輪廓、剖面等，軟件開發中可以譯為“配置”。 　　在3.1版本中，Spring引入了bean profile的功能。要使用profile，首先要將所有不同的bean定義整理

Docker從入門到實戰（四）

Docker 虛擬化 一步一步走，寫小白都能看懂的文章，將持續更新中，敬請期待！ Docker從入門到實戰（四） Docker基礎 一：Docker基本操作 一般情況安裝Docker之後系統會自動創建一個Docker的用戶組，如果沒有創建可以手動創建groupadd docker把當前非root用戶加

Angular開發實踐（四）：組件之間的交互

lec previous call 私有 判斷 處理方法 數組 依然 處理 在Angular應用開發中，組件可以說是隨處可見的。本篇文章將介紹幾種常見的組件通訊場景，也就是讓兩個或多個組件之間交互的方法。 根據數據的傳遞方向，分為父組件向子組件傳遞、子組件向父組件傳遞及通過

MySQL數據庫從入門到實戰（四）

字符集 數據類型 主鍵 元數據 ——————————————————————第一部分：字符集——————————————————————show charset; ---查看mysql支持字符集1、服務器端(1)實例級別vim my.cnfcharacter-set-server=utf8

Android項目實戰（四）：ViewPager切換動畫（3.0版本以上有效果）

技術 code info utf-8 play draw pos support addview 原文:Android項目實戰（四）：ViewPager切換動畫（3.0版本以上有效果）學習內容來自“慕課網” 一般APP進去之後都會有幾張圖片來導航，

Qt與FFmpeg聯合開發指南（四）——編碼（2）：完善功能和基礎封裝

v_op buffer 目前 front from 幀率 inter 博客 int 上一章我用一個demo函數演示了基於Qt的音視頻采集到編碼的完整流程，最後經過測試我們也發現了代碼中存在的問題。本章我們就先處理幾個遺留問題，再對代碼進行完善，最後把編碼功能做基礎封裝。 一

LayIM.AspNetCore Middleware 開發日記（四）主角登場（LayIM介紹）

融雲 文檔 應該 步驟 end 想要 .sql 味道 asp.net 前言 　　在前幾篇中已經初步介紹了開發AspNetCore中間件的一些基礎知識，不過都沒有很深入的去研究，後續還是需要去看看源碼。本篇呢，終於有點開頭的味道了，就是要介紹LayIM了，其實標題寫的是主角，