查看: 3837|回复: 4
打印 上一主题 下一主题

[Shaders] 给LOGO加光带效果的Shader

[复制链接]

9903

主题

126

听众

7万

积分

首席设计师

Rank: 8Rank: 8

纳金币
53488
精华
316

最佳新人 热心会员 灌水之王 活跃会员 突出贡献 荣誉管理 论坛元老

跳转到指定楼层
楼主
发表于 2016-4-22 04:53:45 |只看该作者 |倒序浏览
经常在项目中我们会把游戏的LOGO加上一条光带,实现一种动态的感觉,下面就贴上一份不错的光带算法:
  1. Shader "czm/logo" {
  2.     Properties {
  3.         _MainTex ("Texture", 2D) = "white" { }
  4.     }
  5.     SubShader
  6.     {
  7.             Cull Off
  8.                 Lighting Off
  9.                 ZWrite Off
  10.                 Fog { Mode Off }
  11.                Blend SrcAlpha OneMinusSrcAlpha
  12.                        
  13.                                Tags
  14.                 {
  15.                         "Queue" = "Transparent"
  16.                         "IgnoreProjector" = "True"
  17.                         "RenderType" = "Transparent"
  18.                 }
  19.                
  20.         pass
  21.         {
  22.             CGPROGRAM
  23.             #pragma vertex vert
  24.             #pragma fragment frag
  25.             #include "UnityCG.cginc"
  26.       
  27.             sampler2D _MainTex;
  28.             float4 _MainTex_ST;
  29.            
  30.             struct v2f {
  31.                 float4  pos : SV_POSITION;
  32.                 float2  uv : TEXCOORD0;
  33.             };
  34.             v2f vert (appdata_base v)
  35.             {
  36.                 v2f o;
  37.                    o.pos = mul(UNITY_MATRIX_MVP,v.vertex);
  38.                 o.uv =    TRANSFORM_TEX(v.texcoord,_MainTex);
  39.                 return o;
  40.             }
  41.            
  42.             //计算函数
  43.             //核心:计算函数,角度,uv,光带的x长度,间隔,开始时间,偏移,单次循环时间
  44.             float inFlash(float angle,float2 uv,float xLength,int interval,int beginTime, float offX, float loopTime )
  45.             {
  46.                 //亮度值
  47.                 float brightness =0;
  48.                
  49.                 //倾斜角
  50.                 float angleInRad = 0.0174444 * angle;
  51.                
  52.                 //当前时间
  53.                 float currentTime = _Time.y;
  54.            
  55.                 //获取本次光照的起始时间
  56.                 int currentTimeInt = _Time.y/interval;
  57.                 currentTimeInt *=interval;
  58.                
  59.                 //获取本次光照的流逝时间 = 当前时间 - 起始时间
  60.                 float currentTimePassed = currentTime -currentTimeInt;
  61.                 if(currentTimePassed >beginTime)
  62.                 {
  63.                     //底部左边界和右边界
  64.                     float xBottomLeftBound;
  65.                     float xBottomRightBound;

  66.                     //此点边界
  67.                     float xPointLeftBound;
  68.                     float xPointRightBound;
  69.                   
  70.                     float x0 = currentTimePassed-beginTime;
  71.                     x0 /= loopTime;
  72.            
  73.                     //设置右边界
  74.                     xBottomRightBound = x0;
  75.                   
  76.                     //设置左边界
  77.                     xBottomLeftBound = x0 - xLength;
  78.                   
  79.                     //投影至x的长度 = y/ tan(angle)
  80.                     float xProjL;
  81.                     xProjL= (uv.y)/tan(angleInRad);

  82.                     //此点的左边界 = 底部左边界 - 投影至x的长度
  83.                     xPointLeftBound = xBottomLeftBound - xProjL;
  84.                     //此点的右边界 = 底部右边界 - 投影至x的长度
  85.                     xPointRightBound = xBottomRightBound - xProjL;
  86.                   
  87.                     //边界加上一个偏移
  88.                     xPointLeftBound += offX;
  89.                     xPointRightBound += offX;
  90.                   
  91.                     //如果该点在区域内
  92.                     if(uv.x > xPointLeftBound && uv.x < xPointRightBound)
  93.                     {
  94.                         //得到发光区域的中心点
  95.                         float midness = (xPointLeftBound + xPointRightBound)/2;
  96.                        
  97.                         //趋近中心点的程度,0表示位于边缘,1表示位于中心点
  98.                         float rate= (xLength -2*abs(uv.x - midness))/ (xLength);
  99.                         brightness = rate;
  100.                     }
  101.                 }
  102.                 brightness= max(brightness,0);
  103.                 return brightness;
  104.             }
  105.            
  106.             float4 frag (v2f i) : COLOR
  107.             {
  108.                  float4 outp;
  109.                  outp =float4(0,0,0,0);
  110.                 float4 texCol = tex2D(_MainTex,i.uv);
  111.                 //得到亮度值
  112.                 float tmpBrightness;
  113.                 tmpBrightness =inFlash(75,i.uv,0.15f,5f,2f,0.15,0.7f);
  114.                 //图像区域,判定设置为 颜色的A > 0.5,输出为材质颜色+光亮值
  115.                 if(texCol.w >0.5)
  116.                         outp  =texCol+float4(1,1,1,0)*tmpBrightness;
  117.                 //空白区域,判定设置为 颜色的A <=0.5,输出空白
  118.                                 else
  119.                                  outp  =texCol;

  120.                 return outp;
  121.             }
  122.             ENDCG
  123.         }
  124.     }
  125. }
复制代码
分享到: QQ好友和群QQ好友和群 腾讯微博腾讯微博 腾讯朋友腾讯朋友 微信微信
转播转播0 分享淘帖0 收藏收藏2 支持支持0 反对反对0
回复

使用道具 举报

1

主题

5

听众

706

积分

初级设计师

Rank: 3Rank: 3

纳金币
0
精华
0

最佳新人 活跃会员 热心会员 灌水之王 突出贡献

沙发
发表于 2016-6-25 14:21:28 |只看该作者
不错,学习了!很棒的源码
回复

使用道具 举报

0

主题

3

听众

453

积分

设计实习生

Rank: 2

纳金币
1
精华
0

最佳新人

板凳
发表于 2016-7-18 15:36:19 |只看该作者
效果不错,在需要的时候可以用,谢谢!
回复

使用道具 举报

0

主题

1

听众

387

积分

设计实习生

Rank: 2

纳金币
143
精华
0
地板
发表于 2016-9-7 16:14:25 |只看该作者
回复支持一下顺便记录
回复

使用道具 举报

0

主题

1

听众

324

积分

设计实习生

Rank: 2

纳金币
0
精华
0
5#
发表于 2018-1-17 10:42:01 |只看该作者
不错,学习了!很棒的源码
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

手机版|纳金网 ( 闽ICP备2021016425号-2/3

GMT+8, 2024-11-14 12:49 , Processed in 0.092281 second(s), 32 queries .

Powered by Discuz!-创意设计 X2.5

© 2008-2019 Narkii Inc.

回顶部