ARKit+Unity ARKit PluginでFace Tracking


WWDC 2017で発表されiOS 11から利用可能になったARKitですが、iPhone XのTrueDepthカメラによるFace Trackingが可能になりました。
UnityからリリースされているUnity ARKit Pluginも、Face Trackingに対応したAPIが追加されたのでちょっと遊んでみました。

参考: [ARKit Face Tracking on iPhone X – Unity Blog](https://blogs.unity3d.com/jp/2017/11/03/arkit-face-tracking-on-iphone-x/)

## 準備

Unity ARKit Pluginの使用にはUnity 5.6.1p1以降、iOS 11以降、Xcode 9以降が必要です。また今回のFace TrackingにはiPhone Xが必要です。

Unity ARKit Pluginは[Asset Store](https://assetstore.unity.com/packages/essentials/tutorial-projects/unity-arkit-plugin-92515)から入手可能です ~~が、 Face Trackingに対応したバージョンはまだリリースされていません（11月6日現在）~~。[BitBucket](https://bitbucket.org/Unity-Technologies/unity-arkit-plugin)で公開されているdefaultブランチからダウンロードします。

ダウンロードして展開したフォルダはUnityプロジェクトになっているのでそのまま開いて使えます。また、必要な物は`Assets/UnityARKitPlugin`フォルダにまとまっているので、このフォルダを自分のプロジェクトの`Assets`以下にコピーすればOKです。

`UnityARKitPlugin/Examples/FaceTracking`フォルダには4つのサンプルシーンが含まれています。これらのシーンをビルドして実機で動かすと手軽にFace Trackingの動作を確認できます。

![unity-arkit-plugin-face-tracking.png](https://qiita-image-store.s3.amazonaws.com/0/9836/7dbdede0-36e2-d63c-0ff5-40849f9446d0.png "unity-arkit-plugin-face-tracking.png")


ビルド時の注意点はこんな感じです。

- Build SettingsのPlatformをiOSに変更する
  ![platform.png](https://qiita-image-store.s3.amazonaws.com/0/9836/ebe82cfa-2b3d-9cf5-215c-b40ebe876545.png "platform.png")


- Player SettingsのOther Settingsにある「Camera Usage Description」に、ユーザーにカメラの使用許可を求めるアラートに表示される文言を設定する（これを設定しないとクラッシュする）
  ![camera-usage-description.png](https://qiita-image-store.s3.amazonaws.com/0/9836/d7abd7f2-78ba-038b-a3b7-8fb778be6849.png "camera-usage-description.png")
- Player SettingsのOther Settingsにある「Automatic Signing Team ID」にApple DeveloperのTeam IDを設定しておくと何かと楽

## FaceAnchorScene

ARKitによって検出された`ARFaceAnchor`の位置にXYZの3軸を表示するサンプルです。顔の位置と向きをリアルタイムでトラッキングします。

## FaceMeshScene

ARKitによって検出された`ARFaceAnchor`の`geometry`プロパティ（`ARFaceGeometry`クラス）から、顔表面のジオメトリ（`vertices`、`triangleIndices`、`textureCoordinates`（UV））を取得できます。これを基にUnity側でメッシュを作り`ARFaceAnchor`の位置に表示することで、表情をリアルタイムにトラッキングするサンプルがこちらです。
サンプルの状態ではデフォルトのマテリアルのままなので、某スケキヨのようになっています…。

## FaceBlendshapeScene

こちらのサンプルシーンはFaceMeshSceneとほぼ同じですが、画面左になにやら表示されています。これは、`ARFaceAnchor`の`blendShapes`プロパティから取得したキーと値の一覧で、目をどれくらい開けているか、口をどのくらい尖らせているかといった情報を0.0〜1.0の数値化したものです。  
表示は`BlendshapePrinter.cs`でおこなわれているのですが、実機で実行すると、フォントが小さかったり、数値が激しく変わりすぎたり、上の方がiPhone Xのセンサーハウジング部分にかぶっていたりして非常に見づらいので、

- `GUI.skin.box.fontSize = 30;`のようにしてフォントサイズを大きくする
- `kvp.Value.ToString ("P0")`として、出力をパーセント表示	にする
- 適当に先頭に改行を入れてセンサーハウジング部分を避ける

などすると見やすくなります。

なお、どのキーがどういう状態を指すのかは、[Appleのドキュメント](https://developer.apple.com/documentation/arkit/arfaceanchor.blendshapelocation)に図入りで記載されています（が、それでもよく分からないものもある…）。

## FaceDirectionalLightEstimate

ARKitの`ARFrame`からLight estimation（シーンにおける推定の照明。環境光の強さや色温度）を取得することが可能で、このサンプルシーンでは取得した照明が顔にどのように当たるのか、顔の位置と6方向から見た様子を表示します。

## せっかくなので

Unityのチュートリアル[Roll-a-ball](https://unity3d.com/jp/learn/tutorials/s/roll-ball-tutorial)をFace Trackingで操作できるようにしてみました。  
基のRoll-a-ballはカーソルキーの上下左右でボールを上下左右に動かしますが、Face Trackingバージョンでは目の上目線で上に下目線で下に、左目をつぶると左に右目をつぶると右に移動するようにしてみました。  
プレイ動画はこちら！

<blockquote class="twitter-tweet" data-lang="en"><p lang="ja" dir="ltr">Roll-a-ballをiPhone XのFace Trackingで遊べるようにしてみた。 <a href="https://t.co/RhFdPUKXlO">https://t.co/RhFdPUKXlO</a></p>&mdash; Masayuki Iwai (@myb) <a href="https://twitter.com/myb/status/927605385485213696?ref_src=twsrc%5Etfw">November 6, 2017</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script> 

Roll-a-ballの完成プロジェクトは[Asset Store](https://assetstore.unity.com/packages/essentials/tutorial-projects/roll-a-ball-tutorial-complete-77198)からダウンロードできます。Roll-a-ballの完成プロジェクトにUnity ARKit Pluginを追加の上、[こちらのリポジトリ](https://github.com/miyabi/roll-a-ball-face-tracking)からFaceTrackingフォルダをインポートしてFaceTrackingシーンをビルドすれば、お手元でお試しいただけます。

## 2017/11/9追記

Face Trackingに対応した[Unity ARKit Plugin 1.0.11](https://assetstore.unity.com/packages/essentials/tutorial-projects/unity-arkit-plugin-92515)がリリースされました。