uv位移动画

本文实现了一个简单的uv位移动画， 并对其中的一些条件进行了探索。

实现步骤：

1. 实现一个 shader， 主要是根据时间做顶点偏移。
2. 创建一个 material， 添加 texture， texture 的 Wrapmode 为 Repeat。
3. 创建一个 Quad， 挂上刚刚创建的材质。

效果如下：

shader 主要实现如下：

v2f vert (appdata v)
{
    v2f o;
    o.vertex = mul(UNITY_MATRIX_MVP, v.vertex);
    o.uv = TRANSFORM_TEX(v.uv, _MainTex) + float2(_ScrollX, 0.0) * _Time.y;
    return o;
}           

fixed4 frag(v2f i) : SV_Target
{
    fixed4 col = tex2D(_MainTex, i.uv);
    return col;
}

---

texture 的 wrapMode 的一些研究

texture 参数的 wrapMode 为循环模式：
- Clamp：设置纹理充满拉伸使用
- Repeat：纹理重复平铺使用

也就是说， 如果采用Repeat，那么等于 uv.x >= 1.0 的情况就会用纹理图在右边在平铺一张图。

那么 Clamp呢，我们试试使用上面shader时设置texture为Clamp的效果：

可以看到，uv偏移后采样并不对。

我们知道 uv 值的范围是 0~1， 那么我们手动做范围约束， 可以在 Clamp 下做到uv循环吗？
在将 texture wrapMode设置为 Clamp的情况下 我们试试下面的shader。

v2f vert (appdata v)
{
    v2f o;
    o.vertex = mul(UNITY_MATRIX_MVP, v.vertex);
    o.uv = frac(TRANSFORM_TEX(v.uv, _MainTex) + float2(_ScrollX, 0.0) * _Time.y);
    return o;
}

fixed4 frag(v2f i) : SV_Target
{
    fixed4 col = tex2D(_MainTex, i.uv);
    return col;
}

效果如下：

采样完全不正确了， 这是什么原因呢。 因为我们在顶点着色器中， 手动frac，顶点着色器的插值就出问题了。我们试试在片元着色器中做这件事情。

将 frac放入到 片元着色器中：

v2f vert (appdata v)
{
    v2f o;
    o.vertex = mul(UNITY_MATRIX_MVP, v.vertex);
    o.uv = TRANSFORM_TEX(v.uv, _MainTex) + float2(_ScrollX, 0.0) * _Time.y;
    return o;
}

fixed4 frag(v2f i) : SV_Target
{
    fixed4 col = tex2D(_MainTex, frac(i.uv));
    return col;
}

效果如下：

位移动画也可以循环了。

但是仔细看有个瑕疵， 在拼接的地方有个竖线。关于这道竖线， 还在研究中。

---

如有错误，欢迎指出。

email：dxmdxm1992#gmail.com

blog: csdn magicdavid.top