Unity Shader 素描效果

Unity Shader系列文章:Unity Shader目录-初级篇

Unity Shader系列文章:Unity Shader目录-中级篇

效果:
素描风格的渲染效果
原理:

使用6张素描纹理进行渲染。在渲染阶段,首先在顶点着色阶段计算逐顶点的光照,根据光照结果来决定6张纹理的混合权重,并传递给片元着色器。然后,在片元着色器中根据这些权重来混合6张纹理的采样结果。

6张素描纹理:


hatch_0.jpg
hatch_1.jpg
hatch_2.jpg
hatch_3.jpg
hatch_4.jpg
hatch_5.jpg

shader代码:

// 素描风格效果
Shader "Custom/Hatching"
{
    Properties
    {
        _Color ("Color Tint", Color) = (1, 1, 1, 1)
        _TileFactor ("Tile Factor", Float) = 1 // 纹理的平铺系数,越大则素描线条越密
        _Outline ("Outline", Range(0, 1)) = 0.1 // 描边宽度
        _Hatch0 ("Hatch 0", 2D) = "white" { }// 6张素描纹理
        _Hatch1 ("Hatch 1", 2D) = "white" { }
        _Hatch2 ("Hatch 2", 2D) = "white" { }
        _Hatch3 ("Hatch 3", 2D) = "white" { }
        _Hatch4 ("Hatch 4", 2D) = "white" { }
        _Hatch5 ("Hatch 5", 2D) = "white" { }
    }

    SubShader
    {
        Tags { "RenderType" = "Opaque" "Queue" = "Geometry" }

        // 通过UsePass语义,指明调用之前写好的Pass渲染轮廓线(Pass代码详见之前文章《Unity Shader 卡通渲染效果》)
        UsePass "Custom/ToonShading/OUTLINE"

        // Base Pass 计算平行光、环境光
        Pass
        {
            Tags { "LightMode" = "ForwardBase" }

            CGPROGRAM

            // 编译指令,保证在pass中得到Pass中得到正确的光照变量
            #pragma multi_compele_fwdbase

            #pragma vertex vert
            #pragma fragment frag

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

            fixed4 _Color;
            float _TileFactor;
            sampler2D _Hatch0;
            sampler2D _Hatch1;
            sampler2D _Hatch2;
            sampler2D _Hatch3;
            sampler2D _Hatch4;
            sampler2D _Hatch5;

            // 应用传递给定点着色器的数据
            struct a2v
            {
                float4 vertex: POSITION; // 语义: 顶点坐标
                float3 normal: NORMAL; // 语义: 法线
                float4 texcoord: TEXCOORD0; // 语义: 纹理坐标
                float4 tangent: TANGENT; // 语义: 切线
            };

            // 顶点着色器传递给片元着色器的数据
            struct v2f
            {
                float4 pos: SV_POSITION; // 语义: 裁剪空间的顶点坐标
                float2 uv: TEXCOORD0;
                fixed3 hatchWeights0: TEXCOORD1; // 存储6张纹理的权重
                fixed3 hatchWeights1: TEXCOORD2; // 存储6张纹理的权重
                float3 worldPos: TEXCOORD3;
                SHADOW_COORDS(4) // 内置宏:声明一个用于对阴影纹理采样的坐标 (这个宏参数需要是下一个可用的插值寄存器的索引值,这里是4)
            };

            // 顶点着色器
            v2f vert(a2v v)
            {
                v2f o;
                
                // 将顶点坐标从模型空间变换到裁剪空间
                // 等价于o.pos = mul(UNITY_MATRIX_MVP, v.vertex);
                o.pos = UnityObjectToClipPos(v.vertex);
                
                o.uv = v.texcoord.xy * _TileFactor;
                
                fixed3 worldLightDir = normalize(WorldSpaceLightDir(v.vertex));
                fixed3 worldNormal = UnityObjectToWorldNormal(v.normal);
                // 计算漫反射系数
                fixed diff = max(0, dot(worldLightDir, worldNormal));
                
                o.hatchWeights0 = fixed3(0, 0, 0);
                o.hatchWeights1 = fixed3(0, 0, 0);

                //  将漫反射系数diff缩放到[O, 7] 范围
                // 们把[O, 7] 区间均匀划分为7个子区间 ,通过判断 hatchFactor 所处的子区间来计算对应的纹理混合权重。
                float hatchFactor = diff * 7;
                if (hatchFactor > 6)
                {
                    // 纯白色,什么也不做
                }
                else if (hatchFactor > 5)
                {
                    o.hatchWeights0.x = hatchFactor - 5;
                }
                else if (hatchFactor > 4)
                {
                    o.hatchWeights0.x = hatchFactor - 4;
                    o.hatchWeights0.y = 1 - o.hatchWeights0.x;
                }
                else if (hatchFactor > 3)
                {
                    o.hatchWeights0.y = hatchFactor - 3;
                    o.hatchWeights0.z = 1 - o.hatchWeights0.y;
                }
                else if (hatchFactor > 2)
                {
                    o.hatchWeights0.z = hatchFactor - 2;
                    o.hatchWeights1.x = 1 - o.hatchWeights0.z;
                }
                else if (hatchFactor > 1)
                {
                    o.hatchWeights1.y = hatchFactor;
                    o.hatchWeights1.z = 1 - o.hatchWeights1.y;
                }
                else
                {
                    o.hatchWeights1.y = hatchFactor;
                    o.hatchWeights1.z = 1.0 - o.hatchWeights1.y;
                }

                o.worldPos = mul(unity_ObjectToWorld, v.vertex).xyz;

                // 内置宏:用于计算声明的阴影纹理坐标
                TRANSFER_SHADOW(o);

                return o;
            }

            // 片元着色器
            fixed4 frag(v2f i): SV_TARGET
            {
                // 采样素描纹理,并和它们对应的权重值相乘得到每张纹理的采样颜色
                fixed4 hatchTex0 = tex2D(_Hatch0, i.uv) * i.hatchWeights0.x;
                fixed4 hatchTex1 = tex2D(_Hatch1, i.uv) * i.hatchWeights0.y;
                fixed4 hatchTex2 = tex2D(_Hatch2, i.uv) * i.hatchWeights0.z;
                fixed4 hatchTex3 = tex2D(_Hatch3, i.uv) * i.hatchWeights1.x;
                fixed4 hatchTex4 = tex2D(_Hatch4, i.uv) * i.hatchWeights1.y;
                fixed4 hatchTex5 = tex2D(_Hatch5, i.uv) * i.hatchWeights1.z;

                // 计算纯白在渲染中的贡献度,通过从1中减去所有6纹理的权重来得到的。
                // 是因为素描中往往有留白的部分,一般在最后的渲染中光照最亮的部分是纯白色的
                fixed4 whiteColor = fixed4(1, 1, 1, 1) * (1 - i.hatchWeights0.x - i.hatchWeights0.y - i.hatchWeights0.z -
                i.hatchWeights1.x - i.hatchWeights1.y - i.hatchWeights1.z);

                fixed4 hatchColor = hatchTex0 + hatchTex1 + hatchTex2 + hatchTex3 + hatchTex4 + hatchTex5 + whiteColor;

                // 计算阴影值和光照衰减
                UNITY_LIGHT_ATTENUATION(atten, i, i.worldPos);

                return fixed4(hatchColor.rgb * _Color.rgb * atten, 1);
            }

            ENDCG

        }
    }
    FallBack "Diffuse"
}

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 217,542评论 6 504
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,822评论 3 394
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 163,912评论 0 354
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,449评论 1 293
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,500评论 6 392
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,370评论 1 302
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,193评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,074评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,505评论 1 314
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,722评论 3 335
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,841评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,569评论 5 345
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,168评论 3 328
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,783评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,918评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,962评论 2 370
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,781评论 2 354

推荐阅读更多精彩内容