Unityシェーダーお絵描き入門 - 円をアニメーションさせる

以前、フラグメントシェーダーで黒い円を描きました。

game-graphics.hatenablog.com


 

今回は黒い円をアニメーションさせたいと思います。参考記事はこちらです。

docs.google.com

 

まずは黒い円を描くコードのおさらい。

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と直接固定値を指定していたところを時間経過で値が変更されるようにすれば完成です。黒い円が小さくなっては大きくなるを繰り返します。

 f:id:ninagreen:20190607035857g:plain

 

ここからはコードの解説。

まず _Time はUnityシェーダーの定義済みの値です。

docs.unity3d.com

 

マニュアルにも_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の値を往復するため、黒い円が小さくなったり大きくなったりするようになります。