インタラクティブに背景を変えるInstagram向けのエフェクトを作成する
今回も引き続きSpark ARでインタラクティブなInstagram向けエフェクトを作成する方法に関してです。 詳しくは以下のリンクを見てただきたいですが、 tatsupuri.hatenablog.com
今回もまずは本稿の位置づけを整理します。筆者が以前作成したエフェクト(デモ画像)を構成する要素は以下からなっていました。
- タップすると目の色が変わる
- 口を開けると片目がとれて目がむき出しになる
- 口を開けると背景が変わる
今回は最後の「口を開けると背景が変わる」方法についてまとめます。このエフェクトの本稿執筆時点のバージョンに関しての解説はこれで最終回になります。
目標
最終的に作成するエフェクトは以下のようなものである。 つまり、口を開いた時に画面に背景が変わるようなエフェクトである。
つまり今回目標になるのは画面全体にかけるエフェクトである。画面全体に対してのエフェクトの例として、カラーフィルターを作成する手順が公式のチュートリアルにあった。
このチュートリアルで紹介されていたのは以下のような手順である。まずCanvas上にRectangleを配置し、そこにカメラからのキャプチャー画像をテクスチャとして貼り付けて、そのマテリアルを編集することでカラーフィルターの効果を得る。
しかしこの方法だと、今回筆者が構成したようなエフェクトのように3Dモデルを用いている場合はRectangleはCanvas上に配置されるので3Dオブジェクトとぶつかってしまう場合がある。実際、この方法でエフェクトを作成しようとすると筆者のエフェクトでは3Dモデルが半分に切られたような感じになって立体感を失っていまった。
この問題を解決するために様々な方法を考えることができるが、今回は簡単に以下のような手順をとることにする。それは配置した3Dオブジェクトよりも後ろに平面を配置し、そこにテクスチャを貼る方法である。
つまり今回するべきことは、
- 3Dオブジェクトよりも後ろに平面を配置する
- 平面にテクスチャを張り付ける
- 口の開閉に合わせて平面を消したり出現させるパッチを構成する
の手順である。
平面の追加
SceneパネルからPlaneを追加する。
この時、3DオブジェクトとPlaneが重ならないように3Dオブジェクトよりも後ろにPlaneを配置する。今回は以下のように配置した。
マテリアルの設定
今回用いる以下のテクスチャはBlenderのTextureペイントで作成した。Blenderでテクスチャを作成する方法はこちらのリンクを参照せよ。
この後の便宜上、このテクスチャをタイリングできるようにしておく。テクスチャをタイリングできるようにするには次のようにすれば良い。 該当のテクスチャをAssetから選択し、インスペクターでTiling ModeをRepeatに設定する。今回はU,Vどちらの方向にもタイリングすることを想定しどちらもRepeatにした。
このテクスチャをPlaneのマテリアルに割り当てる。まずPlaneにマテリアルを追加する。そのマテリアルのインスペクターでShader Properties>DiffuseにあるTextureプロパティに上のテクスチャを割り当てる。この上で同じところにあるColor プロパティを変更する。例えば今回は青に設定した。これは元のテクスチャは白黒の絵なのでこれに紫色の一様なテクスチャをブレンドさせて実際に出力されるテクスチャに色を付けるためである。
なお、この時テクスチャの位置やスケールの調整はインスペクターのTiling Optionで調整することができる。
パッチの構成
以上でマテリアルの設定は完了したので、口の開閉に応じてPlaneを消したり出現させたりするパッチを構成する。この方法は以前の投稿にまとめているので、必要があればそちらを参照してほしい。 Spark AR用いてタップで色を変えるエフェクトを作成する - たつぷりの調査報告書
今回もそれと同様で、PlaneのVisibleプロパティのパッチを作成し、これをMouse Openパッチとつなぐ。
これによって目標通り、口を開いたときに背景が変わるエフェクトを構成することができた。
まとめ
筆者が最近作成したインスタグラム向けのエフェクトをテーマにして、3回にわたってSpark ARの解説を行った。今回まででまとめたのは非常に簡単にできる入門的な部分だけである。レファレンスなどを見ていると、より高度なエフェクトを作ることは可能であると考えられる(実際存在している)。今後引き続きSpark ARについては勉強を続けまた知識がたまったら記事にして投稿する予定である。