SparkARでオブジェクトを消したり出現させたりする
こんにちは。たつぷりです。以前の投稿で顔を検出してそこにマスクをかぶせるだけのインスタグラムエフェクトを作成する手順について紹介しました。今回はそのエフェクトが少しアップグレードしたのでそれについてまとめます。
完成品のデモ映像はこちら。
一応エフェクトのリンクももう一度張っておきます。
というわけで今回はタップや、口を開くなどの操作に応答するエフェクトを作成する手順をまとめます。すべてやると長くなりそうなので特に今回はPatch Editorの使い方と、オブジェクトを消したり出現させたりするエフェクトにのみフォーカスします。その他は次回以降にまとめます。
目標
冒頭張り付けたリンクのデモ動画の構成要素を整理するとこのエフェクトは以下のような要素からなる。
- タップすると目の色が変わる
- 口を開けると片目がとれて目がむき出しになる
- 口を開けると背景が変わる
このようなインタラクティブなエフェクトを作成するにはPatch Editorを用いたノードベースのプログラミングを用いれば良い。シンプルなことはこれを用いることで非常に簡単に実装できる。
今回、Patch Editorについて参考にしたのは公式の以下のチュートリアルである。
Tutorial: Adding Touch Gestures with the Patch Editor
既に述べた通り、以下ではPatch Editorに関してとオブジェクトの消滅、出現を制御する方法のみを書く。
Patch Editor
まずPatch Editorは上のタブで、View>Select/Hide Patch Editorを押すことで開いたり閉じたりできる。ショートカットはCtrl+Alt+Pである。
実際に開いたPatch Editorは以下のように表示され、もしプロジェクトをテンプレートから始めている場合などは既に何かしらプログラムが組まれていることがある。
Patch Editorでの基本操作方法は、Ctrl＋マウスホイールで拡大・縮小。Alt+左クリックで平行移動。 また、なにもせずにホイールで上下平行移動。Alt押してホイールで左右平行移動。
さらに右クリックか左クリック2回、あるいは下のAddPatchで新しいPatchを追加することができる。 Patchにはジェスチャーの他にも関数や論理演算など多岐にわたって含まれている。現段階では筆者はその全てを使いこなせているわけではないので、今後少しずつ解説していく。
オブジェクトの情報（例えばVisibleやPosition）やマテリアルの情報をPatch Editorで使いたい、代入したいときなどはそのオブジェクトなどのインスペクターから該当するプロパティを選びその左にある矢印をクリックする。するとそのプロパティがPatchEditorに表示される。具体的には下の図を参照せよ。
Patchを削除したいときは、選択してDeleteキーで消去できる。
以上がPatch Editorの基本的な操作方法である。
オブジェクトを消す
次に今回のもう一つの目標である、口の開閉に応じてオブジェクトを消したり出現させたりする方法についてまとめる。
以下では具体的に筆者が作成したエフェクトを例にして開設する。このエフェクトで消したいオブジェクト、ここでは右目を選択する。この上でインスペクターを確認すると「Visible」というプロパティがあるので、これのPatchを作成する。VisibleというパラメーターはBool型で、オンになっているときオブジェクトは表示されオフの時消える挙動を示す。
よって、口が開いているときVisibleがFalse、それ以外でTrueになるようにPatchを組めばよいことになる。
ここで、口の開閉の状態はMouse Open Patchで取得することができる。 よってPatch EditorにMouse Open Patchを追加する（このPatchはInteractionカテゴリーの中にある）。このパッチはface tracerオブジェクトのfaceを引数にとり、Bool型の返り値を返す。口が開いていたらTrue、閉じていたらFalseである。このBool値を先ほど導入したVisibleのPatchに入力する。
しかしこのままノードをつなぐと、口を閉じているときに目が消え、開いているときに目が現れるというように希望する動作の逆の挙動をしてしまう。そこでMouseOpenから出力されたBool値を反転させる操作が必要である。これはNot Patchで実現することができる。よって、以下のようにPatchを組めば口を開いたときに右目が消えるという挙動を示す。
まとめ
今回紹介したようにSparkARではPatch Editorを用いて比較的簡単にインタラクティブなエフェクトの作成が可能である。今回は口の開閉に合わせて特定のオブジェクトが消えたり出現したりするエフェクトを構成した。
Blenderで法線マップをベイクしてSpark ARで使う方法
どうもたつぷりです。前回に引き続きSpark ARでエフェクトを作成していきます。 今回は前回の投稿、 tatsupuri.hatenablog.com
において作成したエフェクトのグラフィックスを少し改善することを考えます。具体的には、前回作成した段階では表面の凹凸の情報などを取り込んでいなかったので、Blenderで表面の凹凸情報を法線マップにベイクしてそれをSpark ARで利用するための一連の手順についてまとめます。
Blenderで法線マップをベイクする
Blenderのマテリアルの情報をUnityやSpark ARなどで用いるためには、Normal Map, Smoothness (Roughness) Mapなどに焼き直して読み込ませるのが良い。今回がこの一連の方法についてまとめる。
今回用いるのは以前作成したヘルメットである。傷やへこみ、質感などをマテリアルで設定している。
例えば、口の部分などは以下のようにマテリアルを設定している。
このモデルをこのままFBXとかに出力しても、質感などは反映されないので、表面の情報、特にこの場合は法線マップに凹凸の情報をベイクすることを考える。それには、法線マップをベイクするテクスチャを新しく作成する。つまり新しくImageTextureを追加し、そこでターゲットとなるテクスチャを設定すればよい。
これでマテリアル側の設定は完了した。次にRender PropertyでRender EngineをCyclesに設定しておく。さらに、今回は法線マップを作成するのでBake TypeはNormalに設定しておく。以上でベイクの準備できたので、「Bake」ボタンを押してベイクを開始する。
しばらく待つと、以下のようにベイクした結果が得られる。
以上でブレンダーのマテリアルから法線マップをベイクすることができた。
法線マップをSpark ARで利用する
次に上で作成した法線マップをSpark ARで利用する。今回はSpark ARのデフォルトマテリアルに法線マップを割り当てる。PBRマテリアルを用いた方法は本質的には何も変わらないが、今後の投稿で改めてまとめる。
法線マップをまずはAssetに取り込む。Add Assetで取り込む法線マップを選択してインポートする。
法線マップを適用したいマテリアルを選択し、インスペクターのNormal プロパティをアクティブにする。その上でテクスチャに先ほどインポートした法線マップを適用する。
上が法線マップ適用前、下が法線マップ適用後の見た目である。このように表面の傷を取り込むことができた。
Spark ARを用いてInstagram向けのエフェクトを作成する
こんにちは。たつぷりです。 最近話題のSpark ARを用いてInstagram向けのエフェクトを作成してみました。今回はその公開までの手順を紹介したいと思います。今回作成するのは、某ゲームに出てきそうなエージェントがかぶっているマスクを顔に追従させるエフェクトです。実際に公開された完成品は以下のようなものです。
公開されたエフェクトは
でダウンロードできます。ご興味のある方はお試しください。
では実際に手順を見ていきましょう。
上述のように、以下のようなエフェクトを作成する。
具体的にやっていることは顔をキャプチャーしてそこにマスクをかぶせるだけ。公開までの手順を簡単に紹介する。
モデリング
Blenderを用いてモデリングする。
この時、大まかにマテリアルの設定はしておく。またマテリアルの名前はSparkARで編集するときのことも考えて、わかりやすい名前にしておくのが良い。Blenderを用いてモデリングしたオブジェクトは以下である。
FBXで出力
このモデルをFBX形式でエクスポートする。ここで、不要なもの（例えばカメラとかライト）を出力しないように、それらは他のコレクションに移した上で非表示にしておくのが良い。もしくは、出力したい部分を選択状態にしておいて後で主力の際にSelectedObjectのチェックボックスを選択するなどする。File>Export>FBXの順に選択して行くと、以下の画面が開かれるので、オプションを選ぶなどしてから保存する。今回は特に何も設定はいじっていない。
またこの時、後で作業するときに楽なので親子構造などもきちんと整理しておくのが良い。
SparkAR導入
SparkARを導入する。https://sparkar.facebook.com/ar-studio/ からダウンロードし、Facebookのアカウントでログインする。初めての時はなんかチュートリアルが始まった。 起動時の画面はこんな感じ。CretateNewを選択すると、テンプレートを選べる。今回はFaceDetectionを使う。
SparkARにモデルをインポート
まずは、作業画面の見方についてまとめておく。
上述のとおり、UIがUnityに似ているのみならず基本的な手順もUnityとそこまで違わないなあ、と個人的には思っています。
さて、次に以下の図で説明しているようにして最初に作成した３Dモデルをインポートする。
次にインポートしたアセットを実際の画面に配置していく。今回はFaceDetectionのテンプレートから始めているので、最初からfaceTrackerというオブジェクトが存在している。このオブジェクトの子に配置すれば顔に追従するようになる。
最後に、位置の微調整を行う。
SparkARでマテリアルを設定
次にマテリアルの設定を行う。今のままではBlenderではせっかくマテリアルの設定を行ったにもかかわらず、その辺は全く反映されていない。今回は凝ったことはせず、必要最低限のことをする。 以下の図のようにマテリアルの設定ができる
色、Smoothness（Roughness）、Normal、Emissionなどの基本的なものを設定することができる。
しかし表面の詳細な情報をここで作ることはできないので、Blenderで出力するときに、法線マップやBaseColorのテクスチャを作成するのが良い。それによってより詳細な質感の情報を出すことができる。
デフォルトでは、DoubleSidedのオプションがオフになっている。このため、例えば、ヘルメットの内側などにマテリアルが設定されず、白くなってしまうことが起きる。これを回避するためにはDoubleSidedのオプションをオンにすればよい。
SparkARからインスタ向けに公開する
以上でEffectが完成したので、これを公開する。 まずは、実機テストを行う。左下のTest on Deviceのアイコンから実機テストを行う。実機に転送し、Spark AR playerで実機テストを行う。
