【Simple Shader】扫光效果

作者: 黒可乐 | 来源:发表于2018-01-23 22:58 被阅读161次

写在前面,学习shader有一段时间了,算是基本入门了吧,就来写一些简单效果的shader来练习一下呗。第一次我们来做一个扫光的效果,最为常见的效果。

效果

原理

原理很简单:移动扫光贴图的UV既可,怎么移动呢?我们在shader申明了一个贴图后,在控制面板中就可以看Tiling和Offset两个选项。tiling可以理解为在当前背景大小中此贴图可以平铺多少个,分为x轴和y轴的分布。offset就是偏移咯。

控制面板

这里指的注意的是我们需要把图片的格式设置成repeat,这样移动offset就是重复出现。

图片设置

然后我们就更改贴图的offset就可以了,在shader中一个_Time的参数吧,跟mono中的Time类差不多,这个移动代码我们放在顶点函数中,我们的计算公式:

//扫光贴图顶点颜色坐标 += 时间值 * 速度
OUT.texFlowLight.x+=_Time * _SpeedX;
OUT.texFlowLight.y+=_Time * _SpeedY;

代码

我们创建一个unlit shader,在属性中添加上我们扫光需要的一些属性:

// FlowLight
_FLowLightTex("Move Texture",2D)="white"{}//扫光贴图
_FLowLightColor("FlowLight Color",Color)=(0,0,0,1)//扫光颜色
_Power("Power",float)=1//扫光大小
_SpeedX("SpeedX",float)=1//X轴移动速度
_SpeedY("SpeedY",float)=0//Y轴移动速度

这里设置了一个Power变量来空中扫光的亮度,这个值会跟扫光贴图融合。然后我们设置标签与透明图设置。

Tags 
{ 
    "Queue"="Transparent"
    "IgnoreProjector"="True"
    "RenderType"="Transparent"
    "PreviewType"="Plane"
    "CanUseSpriteAtlas"="True"
}

Cull off
Lighting off
ZWrite off
Blend One OneMinusSrcAlpha

这里我们打开了混合透明的设置,如果我们不打开透明的话,画面中就是这样的:

关闭透明设置

这里背景就永远是黑色的,由于我们的logo一般是有透明的部分,这里我们就需要把那部分的颜色作为一个透明的。所以我们在这里是需要打开透明通道的,至于为什么这样设置可以看看这个文章。

然后我们在顶点函数添加移动:

// FlowLight
OUT.texFlowLight=TRANSFORM_TEX(IN.texcoord,_FLowLightTex);
OUT.texFlowLight.x+=_Time * _SpeedX;
OUT.texFlowLight.y+=_Time * _SpeedY;

最后在片元函数中做颜色的融合:

fixed4 col = tex2D(_MainTex, IN.texcoord);
        
// FlowLight
fixed4 cadd=tex2D(_FLowLightTex,IN.texFlowLight)*_Power*_FLowLightColor;
cadd.rgb*=col.rgb;
col.rgb +=cadd.rgb;

我们的做法是把原图的颜色与扫光图的颜色做了融合生成扫光贴图最终的颜色,然后再与主贴图的颜色相叠加。
然后就完成了,是不是觉得很简单呢,其实写下来的感受就是---道理我都懂,但是就是不会写。哈哈哈。今天就先这样咯。

完整及资源代码

相关文章

  • 【Simple Shader】扫光效果

    写在前面,学习shader有一段时间了,算是基本入门了吧,就来写一些简单效果的shader来练习一下呗。第一次我们...

  • shader扫光

    --UICommon.setSaoguang --扫光效果 示例 --[[ local preTable = { ...

  • 2020-09-27 Unity实现图片扫光

    打开Unity,新建一个空工程,导入中一张图片,具体如下图Unity Shader教程之 UGUI扫光效果的实现U...

  • 【Simple Shader】UGUI自带效果继承

    平时在ugui上添加上了材质后,你再改变图片的颜色就不会改变了,在自己的shader上改变颜色,所有使用这个sha...

  • Godot Shader特效:SpatialShader(即3D

    之前写过canvas_item类型即2d Shader的溶解效果,原文请见Godot Shader特效:溶解效果(...

  • shader 效果

    闪电https://blog.csdn.net/panda1234lee/article/details/5219...

  • shader积雪

    效果如图: 原理在代码注释中。 Shader代码: Shader"Custom/RealisticSnow"{ P...

  • CSS效果-文字扫光

    在网页中给文字加上一个扫光效果,是不是让页面看起来非常的酷炫。这个效果实现起来也非常简单,这个效果是怎么实现的呢?...

  • 制作“文字扫光效果”

    今天我在剪映中学习了“文字扫光效果”,步骤是这样的,先打开剪影制作,在素材库里面把黑色的那个素材导入,然后...

  • 制作“文字扫光效果”

    今天我在剪映中学习了“文字扫光效果”,步骤是这样的,先打开剪影制作,在素材库里面把黑色的那个素材导入,然后...

网友评论

    本文标题:【Simple Shader】扫光效果

    本文链接:https://www.haomeiwen.com/subject/dubraxtx.html