【SparkAR】インスタグラムやフェイスブックで使用できるARエフェクトを作成する方法

インスタグラムで使用するフェイスフィルターを作成したいと思いSparkARを始めました。
プログラミングに触れたことがなかった初心者ですが、３０分程で楽しく簡単に作成することができました。
是非沢山の方に触れていただきたいと思い今回記事を作成致しましたので、参考にしていただけましたら幸いです。


# 概要
SparkARを使用してARエフェクトを作成する方法について記述しています。

# 目次
- SparkARとは
- 実行環境
- [Spark AR Studio]のインストール
- エフェクトの作成
- 実機テスト
- 申請の準備

# SparkARとは
SparkARは、2017年に旧Facebook社が提供をスタートしたAR機能になります。
「Spark AR Studio」という専用の開発環境を使用することで、誰でも簡単にオリジナルのARエフェクトを作成可能です。
また作成したARエフェクトをFacebookやInstagram上で公開することで、作成したエフェクトをさまざまなユーザに使用していただくことができます。

# 実行環境
OSバージョン : macOS Monterey version 12.4
Spark AR Studioバージョン : v135.0.0.14.216

# [Spark AR Studio]のインストール
SparkAR Studioを下記リンクからインストールします。
https://sparkar.facebook.com/ar-studio/download/

※インストール後ログインが求められますので、Facebookのアカウントの作成をしておきましょう！

# エフェクトの作成
インストールが終わったら、早速ARエフェクトの作成をしていきます。
今回作成するARエフェクトは、フェイストラッカー、フェイスメッシュ、マテリアルなどを使用したフェイストラッキングエフェクトになります。

![スクリーンショット 2022-07-20 19.38.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2730388/86626591-6e3c-88da-e487-02af4a348e48.png)

・ホーム画面にある`「Blank Project」`を選択します。
※インストール後にチュートリアルが出てきているかと思いますので、上記のホーム画面まで進んでください。
　
![スクリーンショット 2022-07-21 0.04.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2730388/5d50e97c-a874-a084-e516-c615fbd6ffce.png)

・次に画面青枠の`Scene`を右クリックし、`AddObject`の`FaceTracker`を追加します。

![スクリーンショット 2022-07-21 0.06.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2730388/2872beb7-dc07-abe1-5725-41cdd8e0d243.png)

・`FaceTracker`を追加することで、エフェクトを使用する人物の顔の位置と向きを検出することができます。`Scene` に表示された`FaceTracker0`をクリックするとビューポート（赤枠内）のモデルに移動する矢印が表示され、顔の向きを検出しているのがわかるかと思います。

![スクリーンショット 2022-07-21 10.11.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2730388/185ca6d3-1732-20d2-2717-349697895220.png)

・`FaceTracker0`を右クリックし、`AddObject`の`Face Mesh`を追加します。

![スクリーンショット 2022-07-21 10.27.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2730388/aad32ab5-1449-59c7-38c4-9723c3a744f3.png)

・`Face Mesh`を選択すると右のタブ（インスペクター）が表示されます。
・その中にある`Materials`の`+`をクリックして`Materials`　を追加します。

![スクリーンショット 2022-07-21 10.35.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2730388/82808b5d-9aab-0603-b85c-4f960421dc1a.png)
 
・`Materials`　を追加すると右のタブの`Assets`の`Materials`に`material0`として追加されたのがわかるかと思います。

![スクリーンショット 2022-07-21 11.04.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2730388/68078526-038c-75fb-9b0f-c620df252c05.png)

・追加した`Materials`の名前を今後作業をしやすくするために名前を変更しておきましょう。
・`material0`を右クリックし`Rename`を選択し、`「faceFilter」`に名前を変更します。

![スクリーンショット 2022-07-21 11.11.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2730388/db7d51ac-221e-58d4-55c3-3276f40216f9.png)

・`Assets`の`Materials`のある`faceFilter`を選択すると右のタブ（インスペクター）が表示されます。
・その中にある`Shader Type`を`Flat`に変更してあげます。
`Shader Type`の種類によって、Materialsの見た目などが変化します。
今回は使用するテクスチャー（マテリアルにつける素材）に影響を及ぼしたくなかったため、`Flat`を選びました。

![face_flower.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2730388/75a91fde-a64e-18df-4a74-6cd16302b704.png)
・作成した`faceFilter`Materialsにテクスチャーを追加してエフェクトを仕上げていきます。
・まずこちらのテクスチャー素材をダウンロードしてください。

![スクリーンショット 2022-07-21 11.20.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2730388/1df76d46-2497-029d-d35d-1ca1f413d303.png)


・右のタブの中にある`Texture`をクリックし`NewTexture`を選択します。
・先ほど保存した`face_flower.png`を選択し追加します。

![スクリーンショット 2022-07-21 11.22.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2730388/30b2b088-c1c1-51a3-d58e-7d51834148cb.png)

・モデルの顔に先ほど追加した素材が追加されているのがわかるかと思います。

# 実機テスト

エフェクトの作成ができたので実機を使ってテストをしていきましょう。
実機につなげることで自分の顔でエフェクトを試したり、撮影することが可能です。

・スマホに`「Spark AR Player」`というアプリをインストールします。
・アプリを起動させます。
・スマホとPCをUSBケーブルなどで繋げます。

![スクリーンショット 2022-07-21 11.42.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2730388/e1235864-eb55-5713-2255-e2db1bbf49ad.png)

・PCの`SparkAR`に戻り左下のスマホのアイコンをクリックします。
・PCと接続したスマホの`Send`を選択しエフェクトを端末に送ります。
・送るとエフェクトがスマホで確認できたかと思います。
　
# 申請の準備

エフェクトの確認が行えたら、申請のための準備をします。

### 1.ファイルの書き出し

![スクリーンショット 2022-07-21 11.49.53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2730388/3f48bb9b-2674-bd8d-722a-aef99cbe3e72.png)

・左下の`↑`マークの`publish`を選択すると上記の画像のように　`Publish Your Effect`が表示されているかと思います。
・`publish new effect`のみ選択し右下の　`Export`を押し名前をつけて書き出しを行います。
これで申請に必要な**.arexport形式のデータが作成できたかと思います。

### 2.クリエイターアカウントの準備
申請のためにはFacebookアカウントに紐付いたインスタグラムのアカウントが必要になります。
また、クリエイターアカウントでないといけないため変更や新規で作成を行うなどしましょう。
やり方がわからない方は下記リンクから設定してみてください。
https://www.facebook.com/business/learn/lessons/set-up-instagram-creator-account

### 3.申請
申請のやり方は[こちらのQiita](https://qiita.com/suzu_prog/items/16387c8d11c7e34925c7)でわかりやすく紹介されておりましたので記事を参考に申請まで行ってみましょう！

# まとめ
今回紹介したフェイストラッキングエフェクト以外にも、SparkARではさまざまなARエフェクトを作成することが可能です。
SparkARは世界中の方に自分の作成したエフェクトを使用していただくことができるのも魅力です。
この記事をきっかけにSparkARのエフェクト作成に興味を持っていただけたら嬉しいです。