【Unity-Shader】#09 UV座標を使って絵を歪ませる

Unity

docs.google.com

今回の記事は上記の「歪み」部分を参考にさせて頂きました。

簡単な図形を歪ませる

絵を歪ませる前に、_Time を使って時間経過で円を歪ませてみます。

f:id:snoopopo:20200910100846g:plain

fixed4 frag(v2f i) : SV_Target
{
    i.uv.x += sin(i.uv.y * _Time.y * 10) * 0.05;　//歪み
    return step(0.3, distance(0.5, i.uv)); //円
}

UV座標をずらすことで歪ませることができる！

絵を歪ませる

円で使った歪みの式をそのまま使います。

f:id:snoopopo:20200910101350g:plain

fixed4 frag(v2f i) : SV_Target
{
    i.uv.x += sin(i.uv.y * _Time.y * 10) * 0.05;

    if (i.uv.x < 0 || 1 < i.uv.x) {
        discard;
    }

    fixed4 color = tex2D(_MainTex, i.uv);

    if (color.a <= 0) {
        discard;
    }
                
    return color;
}

tex2Dに歪んだUV座標を渡すことでいいかんじになりました。

   if (i.uv.x < 0 || 1 < i.uv.x) {
        discard;
    }

コード内の上の部分ですが、歪ませて右にはみ出た（みきれた）部分が左側に表示されて不自然だったので、discardしています。

f:id:snoopopo:20200910101813p:plain
▲このコードがないとこんな風になっちゃってた