百人计划2800笔记，与同为uv动画的庄懂老师的幽灵小人效果结合思考放在这里方便对比学习。

Flowmap的原理

通过偏移uv后，采样达到流动的效果

制作FlowMap的简单小工具：flowmap painter

这个工具可以制作四方连续的flow效果，它推荐的是png格式直接导出，因为他导出就是在线性空间下，所以在unity里取消sRGB的勾选，同时记得将压缩改为无或者高质量。

贴一张我用这个工具画的从上往下流动效果的贴图：

Flowmap效果实现

对flowmap采样，引入一个变量_FlowSpeed控制流动速度

                //从FlowMap中获取流动方向并且转换到-1到1的范围
                float3 flowDir = tex2D(_FlowMap, i.uv) * 2.0 - 1.0;
                //通过FlowSpeed调整流动速度
                flowDir *= _FlowSpeed; 

偏移UV

将偏移缩放与maintex关联而不仅仅只与模型uv关联

float2 tilling_uv = i.uv * _MainTex_ST.xy + _MainTex_ST.zw;

随时间变化

引入_Time达到随着时间流动的效果

                float phase0 = frac(_Time * 0.1 * _TimeSpeed + 0.5);
                float phase1 = frac(_Time * 0.1 * _TimeSpeed + 1.0);

这里利用frac取余，使phase永远大于等于0小于1，构造周期相同，相位相差半个周期的波形函数

将两个周期利用lerp函数混合达到无缝衔接的流动效果

                float flowLerp = abs((0.5 - phase0)/0.5);
                float4 color1 = tex2D(_MainTex, tilling_uv + flowDir.xy * phase0);
                float4 color2 = tex2D(_MainTex, tilling_uv + flowDir.xy * phase1);
                float4 color  = lerp(color1, color2, flowLerp);
                return color;

流动效果

幽灵小人效果实现

小人效果如下

这里实现了两个效果，一个是基于maintTex的透贴效果，一个是用噪声图实现的流动效果

流动效果利用uv在y方向上的偏移实现，这里没有使用两个周期混合但是流动的效果在小人身上是连续的，猜测是因为只有y方向上的流动配合四方连续的噪声图？不确定原因如有大佬指正万分感谢。

o.uv1.y = o.uv1.y + frac(-_Time.y * _FlowSpeed);// frac 取小数部分

用偏移后的uv1对噪声图采样

         half var_NoiseTex = tex2D(_NoiseTex, i.uv1).r;

参考：

百人计划ppt：2800flow map