揺らめく旗に動的に画像を乗っけるシェーダーとスクリプトとか
環境
Unity2018.2.14f1
概要
よく旗が揺らめくシェーダーの実装例などはありますが、その旗に他のグラフィック素材も乗っけて一緒に揺らせないか、という要望があったので大雑把に実装してみました。
実装方法
方法論としてはいくつかあるとは思います。
１）meshを自作し、旗の画像と乗っける画像の頂点情報をuv0,uv1などに保持し、シェーダーで描画
２）乗っける画像をRenderTexture化し、シェーダー内でどちらも描画
３）mesh２枚で座標軸をずらす。2Dプロジェクトなら可能か？
（３）に関しては書いてみただけです。実際問題としては実現はどうかな、と思います。
（１）は乗っける画像が複数になってくると、uvの数など多くなってきそうです。
なので、今回は（２）の手法で実装したいと思います。
実装手順
まずは旗が揺らぐshaderを用意します。
これはVertexShaderで各頂点を時間に応じてsinカーブなどで揺らすことで実現できます。
数値は適当です。いい感じに調整してください。
また、計算式にuvを使用していますが、ここら辺はvertexなどを使用してもいいかもしれません。
なお、各頂点を移動することで揺らぎを生じさせているので、頂点数の少ないQuadなどは利用できません。
Planeを使用するか、meshを自作する必要があります。
次にRenderTextureを用意します。
Cameraを適当に作成し、ClearFlagsをSolidColorにして、BackGroundColorを#000000FFにします。
また、TargetTextureにProjectViewで作成したRenderTextureを割り当てます。
RenderTexture自体を描画する際にアルファを使用する場合は、Cameraで表示するオブジェクトに対して、特殊なシェーダーを割り当てる必要があります。
詳しくは下記の記事をどうぞ。
ikoans.hatenablog.com
これでRenderTextureの準備ができました。
上に書いた通り、RenderTextureを描画する際にアルファを使用しないのであれば、２枚のテクスチャをうまいこと描画するシェーダーを自作すればいいのですが、今回はRenderTexture内でアルファを使用しています。ここが結構厄介でした。
旗自身のテクスチャは通常描画すればいいのですが、RenderTexture自身は特殊な描画が必要です。
結論から言えば、blendの仕方が異なるため、仕方なく２Pass使用することになりました。
このShaderを揺れる旗のmesh renderer のmaterial に使用し、_MainTexに旗自身のテクスチャを。_RenderTexにRenderTextureをセットすれば、、、できました！！
まとめ
RenderTextureのアルファ部分についての認識と通常描画する旗の部分の上にどうRenderTextureを表示するかで思った以上に時間がかかってしまいました。
よくよく考えると旗のテクスチャと数字とをひとまとめにRenderTexture化した方が早いんじゃないかと気づきましたが、まぁ勉強できたということで。
