Facebook AR Studioを使ってみた その① 〜基本と顔周りの処理〜

# AR Studioって？
AR StudioはFacebookから提供されているARコンテンツ制作ツールです。
SNOWのエフェクトみたいなものを自分で作れるモノと思えばイメージしやすいかと思います。

AR Studioで作ったものはFacebookで公開でき、Facebookカメラで使用することができます。
他の人が作ったものを使用することもできますし、審査に通れば自分が作ったものを使用してもらうことも可能です。

[公式サイト・ダウンロードはこちら](https://developers.facebook.com/products/ar-studio?locale=ja_JP)

# 早速使ってみる
ダウンロードしてARStudioを起動すると、最初にFacebookアカウントでのログインを求められるのでログインしましょう。
ログインが完了したらこの画面が表示されるはずです。

<img width="398" alt="title.jpg" src="https://qiita-image-store.s3.amazonaws.com/0/266579/eb36a157-3a58-cb25-9115-238dc743e185.jpeg">

**Example Projects**からサンプルを見ることができますが、
**いきなり完成したものを見ても何のこっちゃ分からん**って感じだったので右下の**Create New Project**を押して初めから作っていくことにします。

<img width="641" alt="newproject.jpg" src="https://qiita-image-store.s3.amazonaws.com/0/266579/0a94e275-6618-56bd-2ceb-64cf092c6318.jpeg">

見知らぬ女性が映し出されていれば大丈夫です。
チェンジを希望の方はウィンドウ上部にある**Video**から変更しましょう。

<img width="337" alt="videoselect.jpg" src="https://qiita-image-store.s3.amazonaws.com/0/266579/f7b019f8-008f-7c0b-6c02-cfc48209c917.jpeg">

**FaceTime HD Camera**（環境によって違うかも）を選択すると、PCに付いているカメラが使用されます。
**+**をクリックするとローカルファイルから動画を選択することができます。

画面中央の3D空間は、**commandを押しながらドラッグでカメラ回転、optionを押しながらドラッグでカメラ移動**です。

# お手軽実機確認
1.スマホに[AR Studio Playerをインストール](https://itunes.apple.com/jp/app/ar-studio-player/id1231451896?mt=8)
2.PCとスマホを接続
3.スマホ側でAR Studio Playerを起動しておく
4.AR Studioの右上にある**Mirror**ボタンをクリック
<img width="211" alt="mirror.jpg" src="https://qiita-image-store.s3.amazonaws.com/0/266579/aaeb68c0-741d-50e1-7960-945a52d415a9.jpeg">

これでスマホにミラーリングされます。
また、ミラーリングで実行される度にその時のプロジェクトデータを保存しておいてくれるので、いつでも前の状態に戻って確認することができます。

![app.jpg](https://qiita-image-store.s3.amazonaws.com/0/266579/668579a1-c9a6-f8b3-92a0-ff099b4b5577.jpeg)


# FaceMeshで顔にテクスチャを貼り付ける
まずは顔にテクスチャを貼ってみましょう。

## Face Trackerの追加
顔にテクスチャを貼るには顔を認識してもらう必要があります。
ウィンドウ左上の**Insert**から**Face Tracker**を選択し、右下の**Insertボタン**をクリックして追加しましょう。

<img width="345" alt="facetracker.jpg" src="https://qiita-image-store.s3.amazonaws.com/0/266579/534b2314-d5de-2135-821a-f6105d034777.jpeg">

**Face Tracker**は名前の通り顔を認識し、追跡して一緒に動いてくれるすごいやつです。
さすがFacebookというだけあってかなりの精度。


## Face Meshの追加
左側のパネルに**facetracker0**なるものが増えていると思うので、右クリックメニューから**Insert** → **Face Mesh**を選択。

<img width="255" alt="facemesh.jpg" src="https://qiita-image-store.s3.amazonaws.com/0/266579/f56b6604-e5e5-f314-e03a-1d73cae561bd.jpeg">

お姉さんの顔に仮面みたいなものが貼り付きました。

<img width="471" alt="facemeshresult.jpg" src="https://qiita-image-store.s3.amazonaws.com/0/266579/20ef5928-b3ee-9b94-6e91-b9dd99799de1.jpeg">

ここでもう１度左側のパネルに注目してみましょう。
**facetracker0**の中に**facemesh0**が含まれているのが分かります。

<img width="134" alt="facetrackertree.jpg" src="https://qiita-image-store.s3.amazonaws.com/0/266579/4c7be057-2e18-c4b5-89a2-8fb8055008cb.jpeg">

このように**Face Tracker**の中に含まれているオブジェクトは、親の**Face Tracker**が認識している顔に合わせて動いてくれます。便利！

## Face Meshにテクスチャを設定
ではこの**Face Mesh**にテクスチャを設定していくとしましょう。
**facemesh0**を選択して、右側のパネルの**Material**横にある**+**をクリックします。

<img width="238" alt="facemeshmaterial.jpg" src="https://qiita-image-store.s3.amazonaws.com/0/266579/81ed81a8-f2fa-165c-a588-b39b085d8114.jpeg">

すると左側のパネルの**Assets**の中に**Materials**が追加され、その中に**defaultMaterial0**が作られています。
お姉さんの顔に張り付いていた仮面もより仮面らしくなったと思います。

<img width="145" alt="assetsmaterials.jpg" src="https://qiita-image-store.s3.amazonaws.com/0/266579/1a466247-1e0d-5b16-5c27-2a0e7fc43cc8.jpeg">

**defaultmaterial0**を選択した状態の右側のパネルがこちら。

<img width="189" alt="materialproperty.jpg" src="https://qiita-image-store.s3.amazonaws.com/0/266579/40d0b2d1-65ce-7259-0276-90dc9c275102.jpeg">

ここからテクスチャの材質、光沢、発光等々が設定できます。
画像をテクスチャとして使用したい時は**Diffuse**の中の**Texture**から設定しましょう。
パネル一番上の**Shader Type**毎に色々と設定があり、一つ一つ紹介していると膨大な量になるので今回は割愛します。
公式ドキュメントを見ながら色々触ってみてください。
Adobe Dimension CCとか使ったことがある人なら**あ〜これか〜**ってなるものがあると思います。

# Face Mesh用テクスチャ画像の作り方
**Face Mesh**にテクスチャとして貼り付ける画像を作ろうと思っても**どう作ればいいんだ？**って感じの方が多いと思います。
そんな時は**Help**メニューから**Get Face Reference Assets ...**をクリック！
ここから**Face Mesh**に使用されている3Dオブジェクトとテクスチャ画像の見本が取得できます。

<img width="254" alt="getface.jpg" src="https://qiita-image-store.s3.amazonaws.com/0/266579/3ce7946b-6e22-adac-221f-044b40ccd6a6.jpeg">

中身はこんな感じのものが入ってます。

<img width="294" alt="meshsample.jpg" src="https://qiita-image-store.s3.amazonaws.com/0/266579/e059fb50-810c-57fb-c3b8-d0398ec93004.jpeg">

これを元に画像を作れば大丈夫そうです。

# オブジェクトを顔と一緒に動かす
これは先ほどの

> **Face Tracker**の中に含まれているオブジェクトは、親の**Face Tracker**が認識している顔に合わせて動いてくれます。

この原理で簡単に作ることができます。

例えばこの様に、**Face Tracker**の中にオブジェクトを入れてあげるだけで勝手に顔の位置・向きに合わせて動きます。

<img width="799" alt="mug.jpg" src="https://qiita-image-store.s3.amazonaws.com/0/266579/b2565d83-8da5-245f-1656-385cd26edfed.jpeg">

オブジェクトの位置は、オブジェクト選択時に表示される赤・青・緑の線をドラッグすることで移動することができます。

# 複数の顔を認識させる
**Face Tracker**は１つにつき１つの顔しか認識することができません。
複数の顔を認識させたい時はその数だけ**Face Tracker**を追加します。

例えば２つの顔を認識させたい時は**Face Tracker**を２つ用意し、
右側のパネルの**Tracked face**から追跡する顔をそれぞれ設定します。
ここの指定が同じになっていると、**Face Tracker**が複数あっても全て同じ顔を追跡してしまいます。

<img width="156" alt="manyface.jpg" src="https://qiita-image-store.s3.amazonaws.com/0/266579/dc9a6ac7-e484-2fd7-6e71-3fbc1f43ad54.jpeg">

後はそれぞれの**Face Tracker**の中にオブジェクトを入れていけば顔毎に個別の表現をすることができます。

# 表情に応じた動作
SNOWなんかにもある、**口を開けた時だけエフェクトが出たりするやつ**がAR Studioでもできます。

今回はとりあえず**口を開けた時だけオブジェクトを表示する**というのを作ってみたいと思います。

<img width="788" alt="mousedefault.jpg" src="https://qiita-image-store.s3.amazonaws.com/0/266579/82e49a6a-7447-ffbd-6a87-e68b88fd59c9.jpeg">

これがデフォルトの状態です。
**Face Tracker**の中にマグカップのオブジェクトが３つ入っていて、常に頭の上を浮いているので口を開けた時だけ表示するようにします。

## アクションの選択
**Face Tracker**を選択し、右側のパネルの**Actions**横にある**+**をクリック。
すると、ズラッと**Face Tracker**に対応したアクションのリストが表示されるのでその中から**Mouth Open**を選択。
（ご覧の通り他にもまばたきや笑顔などもあるので興味がある方は色々試してみるといいと思います。）

<img width="177" alt="actionselect.jpg" src="https://qiita-image-store.s3.amazonaws.com/0/266579/dda367aa-a1f7-abfd-bcc1-7e255c965cb5.jpeg">

## Patch Editorについて
選択すると**Patch Editor**パネルが開かれ、そこにこんなものが追加されていると思います。

<img width="615" alt="patcheditor.jpg" src="https://qiita-image-store.s3.amazonaws.com/0/266579/5a830665-a394-b07b-cd42-bd799b6f3ae5.jpeg">

この**Patch Editor**内ではビジュアルプログラミングを行うことができます。
AR Studioで表情に応じた処理を行ったり、動きをつけたりする際はJSかビジュアルプログラミングでやることになります。
複雑な処理になるとJSで書く必要が出てきますが、今回のように単純な処理であればビジュアルプログラミングの方が早いです。

## Mouse Openとvisibleの紐付け
ではここにマグカップの表示・非表示を制御する**visible**プロパティを追加しましょう。
マグカップのオブジェクトを選択して、右側のパネルの**visible**横にあるラジオボタンを押してください。

<img width="216" alt="visible.jpg" src="https://qiita-image-store.s3.amazonaws.com/0/266579/960dec3c-fc1f-6fe9-5012-0b54767e37e6.jpeg">

**Patch Editor**に追加されたと思います。

<img width="404" alt="mugvisible.jpg" src="https://qiita-image-store.s3.amazonaws.com/0/266579/89380f3d-e3e6-ce50-b03c-058aa29213ae.jpeg">

残りのマグカップの分も追加したら、**Mouth Open**イベントと繋げてあげます。
線はドラッグ＆ドロップで伸ばして繋げることができます。

<img width="463" alt="manymug.jpg" src="https://qiita-image-store.s3.amazonaws.com/0/266579/815e30a8-3e0d-a450-7da4-2be30f562b10.jpeg">

**Mouth Open**の値は口が開いていれば**true**、閉じていれば**false**で、それが線で繋がっている各マグカップの**visible**プロパティに反映されます。

JS・ビジュアルプログラミングで設定した処理は、**Run**ボタンを押して実行されている間だけしか適用されません。
ここまでの設定が完了して、**Run**ボタンを押したら口を開けている時だけオブジェクトが表示されているはずです。

<img width="409" alt="runbutton.jpg" src="https://qiita-image-store.s3.amazonaws.com/0/266579/dab4aeb9-9e71-63aa-6dde-6cf665875878.jpeg">

# 顔を変形させる
顔を変形させるには変形後の顔用の3Dデータを使用します。
今回はちゃちゃっと公式のサンプルデータから持ってきました。

<img width="199" alt="tinyface.jpg" src="https://qiita-image-store.s3.amazonaws.com/0/266579/596ae141-f3a9-e68b-27f2-ae8a1a13fa36.jpeg">

データを用意したら**Face Mesh**を追加して、右側のパネルの**Deformation**横にある**+**をクリックし、顔の変形に使用する3Dオブジェクトを選択します。

<img width="307" alt="deformation.jpg" src="https://qiita-image-store.s3.amazonaws.com/0/266579/458b8ec6-33fa-e7df-6350-af92f232f5e3.jpeg">

オブジェクトの読み込みが完了するとこんな感じに顔が変形しました。

<img width="408" alt="deformationresult.jpg" src="https://qiita-image-store.s3.amazonaws.com/0/266579/8f485531-9752-40a0-c885-4d6b6f790cbd.jpeg">

このままだと目と口が不自然に歪んでしまうので、目と口は形を保つようにしてあげようと思います。
右側のパネルの**Eyes**と**Mouth**のチェックを外してください。

<img width="180" alt="eyeandmouth.jpg" src="https://qiita-image-store.s3.amazonaws.com/0/266579/e5e37511-2db2-329c-8d7a-4e01003f543d.jpeg">

このチェックを外してあげることで、目と口が**Face Mesh**の適用外となります。

また、**Blend Shapes**から変形の度合いを調整することもできます。

<img width="471" alt="blendshape.jpg" src="https://qiita-image-store.s3.amazonaws.com/0/266579/6c2684e2-555a-c452-8ddf-8c7c91945d6c.jpeg">

# おまけ：アニメーション
ビジュアルプログラミングの部分をわりとさらっと書いてしまったので、こういうのも出来るよという例を載せておこうと思います。

![animation.gif](https://qiita-image-store.s3.amazonaws.com/0/266579/47fc7d4f-33eb-4e9b-7ae1-7b112a7c10b0.gif)

完成形としてはこんな感じです。口を開いている間オブジェクトが表示され、アニメーションがループします。
（コマ落ちしてしまって雪画像のアニメーションがちょっと変ですがくるくる回ってると思ってください）

## Patch Editorの全体図

<img width="591" alt="animationpatcheditor.jpg" src="https://qiita-image-store.s3.amazonaws.com/0/266579/aaeb1c78-29e8-57a4-9113-797a09a055b7.jpeg">

## visiblesグループの中
<img width="301" alt="visiblesgroup.jpg" src="https://qiita-image-store.s3.amazonaws.com/0/266579/a193bab4-acb0-e7b5-95d6-0c5652088441.jpeg">

これは先ほど紹介した通り、**Mouse Open**と各オブジェクトの**visible**プロパティを結びつけているだけです。

## snow_image_animationグループの中
<img width="494" alt="snowimagegroup.jpg" src="https://qiita-image-store.s3.amazonaws.com/0/266579/205f221a-a081-212c-b4ba-551f73ed918e.jpeg">

**Mouse Open**を**Loop Animation**の**Enable**に紐付けることによって、口が開いている間ループアニメーションを有効にしています。
**Duration**は１回のアニメーション時間。
**Mirrored**はチェックを入れるとループが再生→逆再生→再生→逆再生...になります。

**Loop Animation**と**Transition**の**Progress**同士を繋ぐと、**Transition**の値が**Start**から**End**へ、**Duration**で設定した時間をかけて変化します。
今回の場合**Duration**が1.5、**Start**がx0,y0,z0、**End**がx0,y0,z360なのでxとyの値は変わらず、zの値が0から360まで1.5秒かけて変化していくことになります。
変化していく過程の値は**Transition**の**Progress**に入るので、それとオブジェクトの**3D Rotation**プロパティを紐づけてあげれば回転します。**Curve**でイージングの種類を選択することもできます。

また、**Mouse Open**を**Pulse(※)**にも繋げ、**Turned Off**が実行される度に**Loop Animation**の**Reset**を実行しています。
**Reset**を実行しないと口を閉じてもアニメーションが一時停止されるだけなので、もう一度口を開いた時に途中からアニメーションが始まってしまいます。
**(※)Pulse**：値のtrue/falseの切り替わりを検知し、trueになった時に**Turned On**、falseになった時に**Turned Off**が実行される。

## text_animationグループの中
<img width="492" alt="textgroup.jpg" src="https://qiita-image-store.s3.amazonaws.com/0/266579/5510a649-fa68-9539-abd0-b2f997a437d6.jpeg">

**snow_image_animation**グループでやっていることと同じです。
文字の**3D Scale**プロパティを0から1へ変化させています。