Unity shader之Flowmap贴图的原理

一、FlowMap的原理

流动贴图，为了实现一个流动的效果，然而它存储的信息是顶点的移动向量信息，只占用RG通道，将一个归一化二维向量保存到像素中，所以我们看到的flowmap都是如下颜色的(0.5, 0.5, 0)；

它的实现思路是借鉴了向量场的概念，可以看一下参考中的向量场相关介绍；

在shader的实现中，它利用了uv动画的原理，也就是我们需要根据flowmap中的信息做uv偏移，然后通过时间来改变偏移大小，从而产生一个流动效果；但是，我们不能允许uv的偏移量过大，因为随着时间叠加后，如果偏移量过大，肯定会导致采样错误，所以我们需要将时间来控制到0,1的一个循环中，这样就可以保证不会出现采样的异常了；

片元着色器如下所示，

            fixed4 frag (v2f i) : SV_Target
            {
                float3 flowDir = tex2D(_FlowMapTex, i.uv) * 2.0f - 1.0f;
                flowDir *= _Speed;

                float phase0 = abs(fmod(_Time.y, 2) - 1);

                half3 tex0 = tex2D(_MainTex, i.uv + flowDir.xy * phase0);
                return fixed4(tex0, 1);
            }

但是上述这种实现方式会在一个周期之后有跳变的效果；

为了解决这个跳变的效果，采用的解决方案是采样两次，然后在这两次采样之间做一个插值，然后做一个插值；注意插值系数也是要动态改变的，而且插值系数采用了绝对值的计算，也就是它是循环的（从0到1，再从1到0，而不会从1跳变到0）

            fixed4 frag (v2f i) : SV_Target
            {
                float3 flowDir = tex2D(_FlowMapTex, i.uv) * 2.0f - 1.0f;
                flowDir *= _Speed;

                float phase0 = abs(fmod(_Time.y, 2) - 1);
                float phase1 = frac(_Time.y  + 0.5f);

                half3 tex0 = tex2D(_MainTex, i.uv + flowDir.xy * phase0);
                half3 tex1 = tex2D(_MainTex, i.uv + flowDir.xy * phase1);

                float flowLerp = abs((phase0 - 0.5f) / 0.5f);
                half3 finalColor = lerp(tex0, tex1, flowLerp);

                return fixed4(finalColor, 1);
            }

二、参考

知乎 简单了解flowmap的使用（UE4）-https://zhuanlan.zhihu.com/p/33288033

知乎-向量场的介绍：https://zhuanlan.zhihu.com/p/46362611

Medium-FlowMap着色器教程（UE4）：https://medium.com/@thelouishong/shader-tutorial-flow-map-4410af832a8d

Github-Unity Flow Map Shader代码：https://gist.github.com/TarasOsiris/e0e6e6c3b8fdb0d8074b

http://alex.vlachos.com/graphics/Vlachos-SIGGRAPH10-WaterFlow.pdf