インスタのフェイスフィルターをつくる方法【SparkAR】

インスタグラムのフェイスフィルターを自分でも作りたい！と思って調べたり聞いたりして実際作ってみたのでまとめました。

作業環境：Mac(Catalina), iPhone (iOS14.2)

※この記事は[SFC Advent Calendar 2020](https://qiita.com/advent-calendar/2020/sfc)の10日目の記事です。
#Spark ARをはじめる


##インストール
インスタのフェイスフィルター作成ができるソフトである、SparkAR Studioをインストールします。
このリンクからダウンロードできます
https://sparkar.facebook.com/ar-studio/download/

※Macの場合、外部のソフトなのでセキュリティに引っかかることがあります。
`設定`>`セキュリティとプライバシー`>`一般`　にある「ダウンロードしたアプリケーションの実行許可」からダウンロード許可してください

###ログイン
起動できたらFacebookアカウントでログインします。ので、アカウントを用意してください

##さっそく作り始めるよ
![スクリーンショット 2020-12-09 6.43.31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722227/431df95b-67ca-d519-b9d4-5b7846708078.png)

チュートリアルが始まったら、テキトーにぽちぽち押して、このホーム画面になるまで進めてね。

・ここから、`New Project`を選択します。

・次に、モード選択みたいなのが出るので、`Face Tracker`を選択。

![スクリーンショット 2020-12-09 6.46.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722227/56937f9f-6096-40be-d888-16174e390f0a.png)
するとプロジェクトが開きます。
・左の`Scene`タブにある、`faceTracker0`を選択した状態で、`+Add Object`を開き、
`Face Mesh`を選択して`Insert`を押します。

![スクリーンショット 2020-12-09 6.50.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722227/4cbcb9c0-1feb-f325-f313-a885567edce4.png)
・`Face Mesh`をクリックして右のタブを見てみましょう。

・その中に`Materials`があるのでクリック。すると、左下の`Assets`タブに`Material`が表示されます。
・さらにこれを選択して、右のタブを見てください。
![スクリーンショット 2020-12-09 6.55.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722227/da0e5714-7488-cd39-b743-10b889f8fe86.png)
`Color`で色を変えたり、`Texture`>`ChooseFile`で適当な画像を入れたりしてみてください。

白いマスクから変更できるのがわかったと思います。ここまでくれば、意外と簡単にフィルターが作れそうだなと思えてきませんか？
では、これから自分の作りたいフィルターの素材を用意していきましょう。


#素材づくり
###テンプレートをDLする
[SparkAR公式サイトのページ](https://sparkar.facebook.com/ar-studio/learn/articles/people-tracking/face-reference-assets/) へ飛んで、「Download the Face Reference Assets」というのをクリックしてダウンロードしましょう

###ペイントソフトなどで素材を作成
・ダウンロードしたファイルの、FaceAssets > Textures に顔のテンプレ画像が何種類か入っています。使いやすいのを選んで素材を作成していきます。

ペイントソフトは何でもいいですがレイヤーに分けて作業できるものにしましょう。
**イラレ**や**フォトショ**、フリーのものなら**FireAlpaca**や**アイビスペイント**など使いやすいもので作業してね

###作業例
![IMG_0373.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722227/352212d6-5390-b13e-cab9-0d8988987d8b.jpeg)
テンプレ画像と、実際にデザインをおくレイヤーを分けます。
![IMG_0374.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722227/5ac5c3ba-2dbb-7676-2eb3-1c5e779ad204.jpeg)
完成したら、テンプレ画像のレイヤーは削除して、デザインのレイヤーのみ透過して保存、pngなどに書き出します。

ちなみに私はiPadのアイビスペイントで作業しました。他のソフトでも全く同じ作業です

###Spark ARに素材を入れる
・今の画像を、Materialとして読み込みます。`Texture`>`ChooseFile`で画像を選択してください
![スクリーンショット 2020-12-09 7.25.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722227/ab471673-fe15-3f28-634c-a4eb05bc93ab.png)

わーーーできた！けど思ったよりも顔に対して大きかったので素材を修正しました。

・さらに、イラストをスタンプみたいに貼り付けたいのに影が入って暗くなってしまっていたので、右のタブの一番上にある`Shader Type`を、StandardからFlatに変更しました。


#実機テスト
自分の顔で確認したり、完成品を楽しむためにスマホに繋げます。

・スマホに「**Spark AR Player**」というアプリをインストールします。
アプリを起動させた状態にしておきましょう。

・スマホとPCをケーブルで接続します。

・PCのSpark ARに戻り、左下の方にあるスマホのアイコンをクリックし、自分のスマホを選択、`send`を押して送ります。少し時間がかかる場合もありますが、これでスマホからフィルターを使えます！

#インスタで使えるようにする
###ファイル書き出し
![スクリーンショット 2020-12-09 8.16.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722227/4305fa58-6710-384b-7571-10cec6c9f53c.png)
完成したら、`File` > `Upload and Export`を選択。
![スクリーンショット 2020-12-09 8.16.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722227/a36f91a4-2cdd-d3ca-3445-1c5dec7536d7.png)
確認して、（基本的には変更しなくて大丈夫です）左の`Export File`を押し、名前をつけて書き出し完了です。
これで申請のための**.arexport**の形式で用意できました。

###自分のインスタアカウントを用意
申請のために、Facebookアカウントに紐付けたインスタのアカウントが必要です。すでに持っているアカウントでも良いですが、**クリエイターアカウント**じゃなきゃだめなので、変更するか新しく作りましょう。やり方がわかんない人はググってね

###インスタ申請

以降のやり方は[こちらのQiita](https://qiita.com/suzu_prog/items/16387c8d11c7e34925c7)でとてもわかりやすくまとめられていたので見てみてください。
現在私も申請中です。割と簡単だったので、せっかく作ったら申請しちゃおう

これで終わり！
作例で私が書いていたキャラは**ぽんきち**というオリジナルキャラクターで、[グッズサイト](https://suzuri.jp/pon_k)や、[LINEスタンプ①](https://store.line.me/stickershop/product/1214004/ja)、[LINEスタンプ②](https://store.line.me/stickershop/product/1870522/ja?from=sticker)があるのでぜひぜひ見てね（宣伝）

![スクリーンショット 2020-12-09 8.27.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722227/c1e14334-dfee-fe99-271e-4eb4bcf692e4.png)