很多游戏Logo中可以看到这种流光效果，一般的实现方案就是对带有光条的图片uv根据时间进行移动，然后和原图就行叠加实现，不过实现过程中稍稍有点需要注意的地方。之前考虑过的实现方式，但是考虑到shader中太多的计算，还是放弃了。
Shader &UICustom/ImageFlashEffect2&
Properties
_MainTex (&Main Texture&, 2D) = &white& {}
_LightTex (&Light Texture&, 2D) = &white& {}
_LightColor(&Light Color&,Color) = (1,1,1,1)
_LightPower(&Light Power&,Range(0,5)) = 1
//每次持续时间，受Angle和Scale影响
_LightDuration(&Light Duration&,Range(0,10)) = 1
//时间间隔，受Angle和Scale影响
_LightInterval(&Light Interval&,Range(0,20)) = 3
&Queue&=&Transparent&
&IgnoreProjector&=&True&
&RenderType&=&Transparent&
Lighting Off
ZWrite Off
Fog { Mode Off }
Offset -1, -1
Blend SrcAlpha OneMinusSrcAlpha
AlphaTest Greater 0.1
#pragma vertex vert
#pragma fragment frag
#include &UnityCG.cginc&
struct appdata
float4 vertex : POSITION;
float2 uv : TEXCOORD0;
struct v2f
float2 uv : TEXCOORD0;
float4 vertex : SV_POSITION;
float2 lightuv : TEXCOORD1;
sampler2D _MainT
float4 _MainTex_ST;
sampler2D _LightT
_LightTex_ST;
half _LightI
half _LightD
half4 _LightC
half _LightP
half _LightOffSetX ;
half _LightOffSetY ;
v2f vert (appdata v)
o.vertex = mul(UNITY_MATRIX_MVP, v.vertex);
fixed currentTimePassed = fmod(_Time.y,_LightInterval);
//uv offset, Sprite wrap mode need &Clamp&
fixed offsetX = currentTimePassed / _LightD
fixed offsetY = currentTimePassed / _LightDuration；
offset.x = offsetX - 0.5f;
offset.y = offsetY - 0.5f;
o.lightuv = v.uv
= TRANSFORM_TEX(v.uv, _MainTex);
= TRANSFORM_TEX(o.lightuv, _LightTex);
fixed4 frag (v2f i) : SV_Target
fixed4 mainCol
= tex2D(_MainTex, i.uv);
fixed4 lightCol
= tex2D(_LightTex, i.lightuv);
lightCol *= _LightC
//need blend
//lightCol.rgb *= mainCol.
fixed4 fininalC
fininalCol.rgb
= mainCol.rgb +
lightCol.rgb * _LightP
fininalCol.a =
mainCol.a * lightCol.
return fininalC
需要注意的点：
时间间隔问题
fixed currentTimePassed = fmod(_Time.y,_LightInterval);
//uv offset, Sprite wrap mode need &Clamp&
fixed offsetX = currentTimePassed / _LightD
fixed offsetY = currentTimePassed / _LightDuration；
offsetX 、offsetY其实是0~_LightInterval的数值，需要设置图片为光线图片的Wrap模式为Clamp，才能实现时间间隔控制
Pixel着色器中frag()函数是通过原始颜色和光线颜色叠加的方式实现的，也有将光线颜色和原图混合后再叠加的做法，这个我觉得看实际应用。注意alpha的控制
1. 增加角度和大小控制
基本版本的实现中光线只能根据流光图片中亮线的宽度和方向决定实际的滚动方向和大小。有时候如果需要经常调节方向和大小，可以考虑加入相关因素。流光的Uv是通过原图当前Uv加上时间轴参数获得，可以考虑通过修改流光uv的计算方式来实现。如下面代码。不过这种方式增加了一定计算量，不需要的话则直接跳过。还有一点就是流光贴图必须是垂直或者水平。
float2 base = v.
base.x -= _LightOffSetX ;
base.y -= _LightOffSetX ;
base = base / _LightS
float2 base2 = v.
= base.x * cosInRad - base.y * sinInR
= base.y * cosInRad + base.x * sinInR
o.lightuv = base2 +
只是想不同的图片都是使用相同的材质，应该保证每个图片的效果都可以独立进行修改保存，可以考虑每张图片都创建一份材质，然后修改其参数。
void UpdateParam()
if (Material == null)
Debug.LogWarning(&Metarial is miss&);
if (mGraphic == null)
mGraphic = GetComponent&MaskableGraphic&();
if (mGraphic is Text)
Debug.LogError(&FlashEffec need component type of Image、RawImage&);
if (mDynaMaterial == null)
mDynaMaterial = new Material(Material);
mDynaMaterial.name = mDynaMaterial.name + &(Copy)&;
mDynaMaterial.hideFlags = HideFlags.DontSave | HideFlags.NotE
if (mDynaMaterial == null)
mDynaMaterial.mainTexture =
if (OverrideTexture != null)
mDynaMaterial.mainTexture = OverrideT
if (mGraphic is RawImage)
RawImage img = mGraphic as RawI
img.texture =
else if (mGraphic is Image)
Image img = mGraphic as I
img.sprite =
mDynaMaterial.mainTexture = mGraphic.mainT
if (Duration & Interval)
Debug.LogWarning(&ImageFlashEffect.UpdateParam:Duration need less Interval&);
Interval = Duration + 0.5f;
mDynaMaterial.SetColor(&_LightColor&, Color);
mDynaMaterial.SetFloat(&_LightPower&, Power);
mDynaMaterial.SetFloat(&_LightScale&, Scale);
mDynaMaterial.SetFloat(&_LightAngle&, Angle);
mDynaMaterial.SetFloat(&_LightDuration&, Duration);
mDynaMaterial.SetFloat(&_LightInterval&, Interval);
mDynaMaterial.SetFloat(&_LightOffSetX&, OffSet);
mGraphic.material = mDynaM
mGraphic.SetMaterialDirty();
阅读(...) 评论() 上传我的文档
 上传文档
 下载
 收藏
该文档贡献者很忙，什么也没留下。
 下载此文档
制作-unity中shader制作流光效果
下载积分：1000
内容提示：制作-unity中shader制作流光效果
文档格式：DOCX|
浏览次数：421|
上传日期： 21:46:46|
文档星级：
全文阅读已结束，如果下载本文需要使用
 1000 积分
下载此文档
该用户还上传了这些文档
制作-unity中shader制作流光效果
关注微信公众号等你发现时间是贼了，它早已偷光你的选择！
Unity3D开发（九）：Unity3d流光效果
游戏开发论坛：
游戏开发群：
之前曾经注意过中纹理的属性都有和，但没有深究过其用途，今天才知道竟然可以利用做动画，从而完成各种有趣的动画，比如流光效果！
流过效果即通常一条高光光在物体上划过，模拟高光移动照射物体的效果，之前是使用每帧传递一个值，修改高光纹理采样的，从而达到其效果。这样的敝处在于需要自己实现，简单的同一速度移动是很容易实现的，如果希望移动随度是变化的，则需要自己实现对速度曲线的解析（并传递给）达到此目的。
没想到一直用来作位移动作，骨骼动作的竟也有此功能！
下图中即为对于物体的渲染方面可以做的操作（Unity 4.3版本和略有不同）
在部分，有两张纹理，分别是底图和高光图，这里需要注意的是如果要移动，则必须声明其属性，这样才可以通过内置方法计算偏移了，如下
这里只使用了一种很简单的算法计算最终的颜色值，即将高光覆盖底图颜色增加高光倍，可根据需求设计计算方法！
在动画的关键帧中，根据美术需求设计曲线，如图
运行效果如图
注意此方法不能应用于，因为其组织顶点方式与普通物体不同！
没有更多推荐了，分享我的知识与见解投稿：8粉丝：54分享--dynmicweibozoneqqbaidu将视频贴到博客或论坛视频地址复制嵌入代码复制微信扫一扫分享收藏0硬币--稍后看马克一下~用手机看转移阵地~用或其他应用扫描二维码手机下视频请使用扫码若未安装客户端，可直接扫此码下载应用看过该视频的还喜欢正在加载...miniOFFUnity2018 Shader Graph 学习笔记（六） 流光效果的实现有问题，上知乎。知乎作为中文互联网最大的知识分享平台，以「知识连接一切」为愿景，致力于构建一个人人都可以便捷接入的知识分享网络，让人们便捷地与世界分享知识、经验和见解，发现更大的世界。流光效果是非常常见的游戏特效，不管是2D的UI和图片还是3D的模型在一些精致的特写镜头下，都会加入流光的效果。本篇文章将使用shadergraph来制作两种不同的流光效果。2D流光效果首先是我们为了创造流光效果所准备的图片。一张主要的贴图和一个流光的贴图。在这里我们仍然使用蒙娜丽莎作为主要贴图，流光贴图采用一个条状贴图。蒙娜丽莎贴图流光效果贴图最终实现的效果如下，流光贴图会在蒙娜丽莎上面进行移动。这个shader的实现也比较简单，我们发现流光贴图的UV和主要贴图的UV是重合的，也就是说我们使用主要贴图的UV坐标加上一个时间的变换，就可以实现流光贴图的UV的流动效果。其中时间的变换我们通过定义一个UV的移动速度来实现。流光的UV变化接下来，我们将变化的UV对流光贴图进行采样，并且叠加到原图上即可实现2D下的流光效果。流光贴图叠加原图最后完整的实现如下。2D流光完整graph2D流光效果的在3D中的问题那么3D模型的流光效果能不能用同样的方法实现呢？我们先看下直接应用的效果。我们发现并没有得到我们预期的流光效果。这是因为3D模型的UV坐标和流光贴图的坐标完全不对应导致的。在2D流光效果中，我们的模型是一个面片，他的UV坐标和流光贴图的UV坐标是对应起来的。为了实现正确的3D流光效果，我们需要根据模型生成正确的流光贴图UV坐标。3D流光效果的实现我们先来看下示例中所使用的流光贴图模型贴图以及最终的效果。流光贴图模型贴图正确的3D流光效果那么如何根据模型生成正确的流光贴图UV坐标呢？我们观察流光的特点，我们相当于把流光贴图的UV坐标和模型的XY坐标对应了起来。模型的Z并不影响流光贴图的坐标。根据模型的XY坐标生成流光贴图的UV坐标的方法如下：获得模型的模型空间的坐标（X, Y, Z），在这里我们是用Postion节点，其中坐标空间选择Object，取出XY坐标。根据模型的大小设定模型的X轴范围，例如（0.5， 0.5），Y轴范围，例如（0.0， 1.0），根据XY轴范围，将模型空间的坐标映射到0-1的UV坐标。将XY分别映射的坐标合并起来，就得到了流光贴图的UV坐标。得到了正确的流光贴图UV坐标，我们再将它进行UV动画移动起来，就实现了3D的流光效果。完整的graph如下3D流光效果6分享收藏文章被以下专栏收录使用ShaderGraph制作一些实例