Spark AR Studioで背景を抜く（Segmentation）

Spark AR Studioは、Facebookが提供しているARフィルター制作ツールです。
Spark AR Studioで制作したフィルターはFacebookやInstagramのフィルターとして配布することができます。

[Spark AR Studio](https://sparkar.facebook.com/ar-studio/)

今回は基本的な、背景から人物を切り抜く方法を解説します。


#画面レイアウト
アプリを起動すると左側にオブジェクトのツリー、真ん中に3Dエディタ、右側にプロパティインスペクタが表示されます。
基本的にはオブジェクトのツリーに3Dモデル等のオブジェクトを配置し、マテリアルを適用するなどして、右側のプロパティインスペクタをいじって開発をしていくことになります。
![1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/31194/44c3b637-46a5-2cf3-d68b-c2431564bed9.png)

#開発時、自分の姿で確認する
3Dエディタ上にはサンプルのお兄さんが居ますが、ウェブカムがつながっているPCであればリアルタイムの自分の姿を映しながら開発が可能です。
Windowsの場合はオブジェクトツリーの横にあるカメラアイコンをクリックすると表示される「HD WebCam」というボタンをクリックすれば自分の姿が映ります。

![2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/31194/f1ee6763-ec67-bf74-07ec-ac9eb36aff37.png)

#実装
###Canvasを配置
ツリーの中にある**Focal Distance**というオブジェクトを右クリックし**Add**から**Canvas**を選択してツリーに追加します。
Canvasは2Dオブジェクトを扱う場合に必要なオブジェクトです。

![3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/31194/15196438-749d-b89f-e60b-50673379b722.png)


###Rectangleを配置
先ほど追加したCanvasを右クリックしてAddから**Rectangle**を選択してツリーに配置します。
今回は人物用と背景用の2つのRectangleを配置し、それぞれ判別しやすいよう**fore**と**back**という風にリネームします。

![4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/31194/674f9fc1-938d-4f00-8010-0426ebf82c7e.png)


###Rectangleのサイズを変更
Rectangleはデフォルトで100x100のサイズになっているので、デバイスのサイズに合わせます。
Rectangleを選択した状態でプロパティインスペクタを確認します。
**Size**項目に2つのフィールドがありますがそれぞれ幅と高さです。
フィールドをクリックしてアクティブにすると**Fill Width**、**Fill Height**という項目が表示されるのでクリックして選択します。
そうすると3Dエディタ上でRectangleのサイズが変わるのがわかります。

![5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/31194/923f651b-f3ed-6046-cba5-f87edb885fb9.png)


###リアルタイム映像のテクスチャとマスク用のテクスチャを作成
ツリーの中から**Camera**を選択し画面右側のプロパティインスペクタを確認すると**Texture Extraction**と**Segmentation**という項目が確認できます。
それぞれの項目右側にある**+**マークをクリックするとリアルタイムカメラ映像用のテクスチャと、マスク用のテクスチャが自動で生成されます。

![6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/31194/ee795c2f-711c-81cf-f9a2-9ceaae7f73ef.png)


生成されたテクスチャはそれぞれ**cameraTexture0**と**personSegmentationMaskTexture0**という名前で左側のアセットブラウザに追加されています。

![7.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/31194/8823069c-ee6e-e417-1435-73b60f8d624d.png)


###マテリアルを作成
アセットブラウザの下にある**Add Asset**をクリックして出てくるメニューの中から**Material**を2つ追加し、それぞれ**fore**と**back**とリネームします。

まずは**fore**を選択した状態でプロパティインスペクタを確認します。
**Shader Type**をライティングの影響を受けない2D向きの**Flat**に変更します。
**Diffuse**の**Texture**項目にある選択アイコンをクリックし、先ほど生成した**cameraTexture0**を選択します。
次にその少し下にある**Alpha**にチェックを入れアクティブにします。
Diffuseと同様Texture項目の選択アイコンをクリックして、今度は**personSegmentationMaskTexture0**を選択します。

![8.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/31194/998556be-2b94-1910-b1a8-59af30cc9d2f.png)


次に**back**を選択しShader TypeをFlatにし、Diffuseの**Color**から好きな色を選択します。

###マテリアルを適用
先ほど配置したRectangleの**fore**を選択しプロパティインスペクタを確認します。
下の方にある**Material**の右側にある**+**ボタンをクリックするとマテリアルが選択できるので、先ほど作成した**fore**マテリアルを選択します。
**back**も同様にマテリアルを選択します。

![9.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/31194/9ecf490d-be5c-1156-ceff-a2c9cec6ffbe.png)


###レイヤーを設定
これまでの設定だとbackマテリアルの色べたの画面になっているかもしれませんが、Rectangleの重なり順によるものです。
オブジェクトツリーから**back**Rectangleを選択しプロパティインスペクタを確認します。
一番上に**Layer**という項目があるのでプルダウンを表示させ**Create New Layer**を選択するとマスクされた人物の絵が表示されます:smile:
※レイヤー順序はオブジェクトツリーの隣のLayerタブで順序を変更することができます。

![10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/31194/8be94af0-d08b-7357-4342-48035b7f3303.png)


#実機デバッグ
実機で確認したい場合は**Spark AR Player**というアプリを使えば実機での見え方が確認できます。
iOS、Androidともにストアにあるのでインストールし、実機とPCをUSBでつないで開発したアプリを転送すれば確認が可能です👍