🌊
Unityシェーダー超入門⑨ 円を歪ませるアニメーション
今回は円を歪ませるアニメーションを作ります
今回辺りから余分なコードは省略していきます。
unlitshaderで作成さしてもらえれば問題ないです
ではコードを見ていきましょう。
09_CircleAnimation
float circle(float2 gv, float size)
{
return step(length(0.5 - gv), size);
}
fixed4 frag (v2f i) : SV_Target
{
i.uv.x += sin(_Time.y + i.uv.y * 20) *.05;
return(circle(i.uv,0.3));
}
ENDCG
}
}
}
円を作る
以下のコードで円を作っています。
09_CircleAnimation
float circle(float2 gv, float size)
{
return step(length(0.5 - gv), size);
}
circle関数は文字通り円を描く機能を持った関数です。
前回こちらの記事で円を作りましたね。
作り方としてはこのまま持ってきてもよかったのですが
今回はstep関数を用いて円を作ることにしました。
step関数はsmoothstepが理解出来ていればすぐに理解が出来ます。
step(a,x)関数は以下のようになります。
x < a の場合：0
x ≥ a の場合：1
stepとsmoothstepの違いを簡単に説明すると補間するかしないかです。
それによって作れる絵作りが変わるので、どちらが適切かを選べばいいだけです。
lengthは前回と同様の働きをしています。
引数0.3をここで指定しているので、中心から0.3までは1を返しているというだけです。
09_CircleAnimation
return(circle(i.uv,0.3));
さて、これで円が作れました。次は歪みのアニメーションです。
UVを歪ませる
以下のコードで歪みのアニメーションを加えています。
09_CircleAnimation
i.uv.x += sin(_Time.y + i.uv.y * 20) *.05;
やっていることはとても単純で
y座標の値をx座標に渡しています。
xに対してyの影響を渡すことで絵的には良いかなと思います。
とはいえ、正直ここは好みもあるのでxyの組合せは自由でいいかと
そして_Time.yによりアニメーションを加え
周期性の調整を20にし、最終調整に0.05の係数を掛けて完成です。
この歪ませる方法は色々と使えるのと応用が効くので
sin関数の中身を弄ったり複雑にすると面白い効果が得れます。
GLSLGrapherなどを使って面白い波形を作って反映してみるのも面白いと思います。
Discussion