Unity的shader学习:实现物体边缘高亮

游戏里常出现的一种需求,就是鼠标触碰到角色或物体时高亮。正在学习unity的shader,看官方的shader示例,其中有一个就是Rim Lighting,但是官方示例那个模型并没有把这个效果凸显出来,然后查了下Rim Lighting,看到了这个例子,才明白是物体边缘高亮的效果,联想到玩的游戏,瞬间明白了。

这也算是个挺有用的效果,所以细心研究了下,而且发现官方示例和上面这个博客都没有提到为什么这么写就可以实现边缘高亮的效果,故记录+分享下。

前提

shader一开始的概念是从猫都能学会的Unity3D Shader入门指南(一)学习的,写的挺好,对shader有了基本的认识。而且没想到学unity竟然再次看到了王巍的博客。

shader的使用

通过新建一个材质(Metarial),把它的shader里修改为自己新建的shader就可以了。然后把这个材质使用到需要效果的物体上去,在render组件里把材质替换就好了。

边缘高亮效果

先来个效果图


WDWD~~~M`020R$4ORS2OHW1.png

再上代码:

Shader "Custom/RimLighting" {
    Properties {
        _MainColor ("MainColor", Color) = (1.0, 1.0, 1.0, 1.0)
        _MainTex ("Texture", 2D) = "white" {}
        _BumpMap ("Bumpmap", 2D) = "bump" {}
        _RimColor ("Rim Color", Color) = (0.26, 0.19, 0.16, 0)
        _RimPower ("Rim Power", Range(0.5,8.0)) = 3.0
    }
    SubShader {
        Tags { "RenderType"="Opaque" }
        LOD 200
        
        CGPROGRAM
        // Physically based Standard lighting model, and enable shadows on all light types
        #pragma surface surf Standard fullforwardshadows

        // Use shader model 3.0 target, to get nicer looking lighting
        #pragma target 3.0

        struct Input {
            float2 uv_MainTex;
            float2 uv_BumpMap;
            float3 viewDir;
        };

        sampler2D _MainTex;
        sampler2D _BumpMap;
        float4 _RimColor;
        float _RimPower;
        float4 _MainColor;

        void surf (Input IN, inout SurfaceOutputStandard o) {
            o.Albedo = tex2D(_MainTex, IN.uv_MainTex).rgb * _MainColor.rgb;
            o.Normal = UnpackNormal(tex2D(_BumpMap, IN.uv_BumpMap));

            //half rim = 1.0 - saturate( dot( normalize (IN.viewDir), 0.normal ));
            half rim = 1.0 - saturate(dot (normalize(IN.viewDir), o.Normal)); 
            o.Emission = _RimColor.rgb * pow(rim, _RimPower);

        }
        ENDCG
    }
    FallBack "Diffuse"
}

直接从void surf (Input IN, inout SurfaceOutputStandard o)这个方法看:

  • o.Albedo = tex2D(_MainTex, IN.uv_MainTex).rgb * _MainColor.rgb; 颜色使用我们传入的主纹理_MainTex和主色_MainColor结合。我上图的红色球是没有添加纹理,然后使用了纯红色作为主色。如果是普通的材质,就会是一个纯红的球。

  • o.Normal = UnpackNormal(tex2D(_BumpMap, IN.uv_BumpMap)); 这句是提取_BumpMap这个纹理的法线数据,说实话这个效果我不是很懂,但这个跟边缘高亮效果没有关系。

  • 重点是后面两句,第一句half rim = 1.0 - saturate(dot (normalize(IN.viewDir), o.Normal));
    (1) 首先viewDir是物体点到摄像机的方向,Normal是法线的方向,dot是点积,在几何里,向量A和B点积的意义是

    点积公式

因为cos的关系,所以对于一个球而言,边缘是90度夹角,正中心是0度夹角,这样dot 的值就是中心是1,边缘一圈是0,然后由中间向外侧单调递减。
(2) saturate函数只是把大小限制在0-1之间,小于0变为0,大于1变为1.然后加上1-的效果,rim的值变化就是中间为0,边缘为1,然后单调递增。

  • 最后Emission应该是自发光,o.Emission = _RimColor.rgb * pow(rim, _RimPower);是在边缘颜色_RimColor的基础上做了一个比例,而这个比例的值是怎么变化的呢?

首先rim的值在0-1之间,那么如果_RimPower是大于1的数,则_RimPower越大,pow之后的值就越小,也就是Emission 越小,那么就会越体现主色,而边缘色越少。所以原来是边缘色的地方,也会变成主色,在我的示例中,就是红色越来越多,而黄色越来越少。而最边缘,因为rim是1,它不受_RimPower的影响,一直是1,它会一直保持边缘色(其实是混色,因为主色也在)。当_RimPower大到一定程度,边缘色就会只存在于边缘很小的范围内,形成我们想要的边缘发光的效果。

再挂一张_RimPower为1的时候的样子:

很明显,相比_RimPower为3时候,黄色更多,而红色更少。

总结

  • 整个过程,我角色关键的是使用了viewDir,利用它和法线方向的变化来做文章;
  • 而使用pow幂函数,让变化变得陡峭,把一个简单的颜色渐变限制到特殊区域
  • Emission的使用,让值得变化变成了视觉上颜色的变化。如果不使用Emission,可以改成其他的,比如粗糙、油腻或者手绘效果这种,也就可以在边缘实现这些效果。

材质打了个包,放在git上了

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

推荐阅读更多精彩内容