Unityシェーダーお絵描き入門 - 円をアニメーションさせる
以前、フラグメントシェーダーで黒い円を描きました。
今回は黒い円をアニメーションさせたいと思います。参考記事はこちらです。
まずは黒い円を描くコードのおさらい。
float4 frag_test (v2f_img i) : SV_Target
{
float value = distance(float2(0.5, 0.5), i.uv);
return step(0.4, value);
}
この0.4を直接指定している箇所が円の大きさになります(0に近くにつれ円が小さくなる)
float4 frag_test (v2f_img i) : SV_Target
{
float value = distance(float2(0.5, 0.5), i.uv);
float a = abs(sin(_Time.y)) * 0.4;
return step(a, value);
}
今回はこの0.4と直接固定値を指定していたところを時間経過で値が変更されるようにすれば完成です。黒い円が小さくなっては大きくなるを繰り返します。
ここからはコードの解説。
まず _Time はUnityシェーダーの定義済みの値です。
マニュアルにも_Timeはシェーダーの中でアニメーションするのに使用とあります。
Name | Type | Value |
_Time | float4 | 時間 (t/20,t,t×2,t×3),シェーダの中でアニメーションするのに使用。 |
なお、_Time.y は時間 t が返ってきます。ちなみに _Time.x だと t/20 が返されます。
また、sin関数は-1〜1の値を返すので、absで絶対値を取ると abs(_sin(Time.y)) は0〜1の値になります。つまり、時間経過に応じて変数aの値は0〜0.4の値を往復するため、黒い円が小さくなったり大きくなったりするようになります。