Spark AR 超入門

#Spark ARとは

Spark ARとは、2017年からFacebookが提供しているARツールです。
専用の開発環境を使用して制作したARエフェクトを、Facebook・Instagramアプリ内のカメラで使用できます。

Spark ARの主な機能は、顔やボディパーツ、表情などを認識できる技術を用いたARエフェクト制作です。
Spark AR Studioという開発環境を使用することで、好みのエフェクトを制作できます。
　
　写真にフォトフレームを貼りつける写真撮影アプリのようなもの
　人物に3DCGを重ねる立体的なものなど、制作できるARエフェクトはさまざまです。
　表情の違いを読み取ってエフェクトを変える表情認証
　複数の人物に物体やアクションを割り当てる複数顔認証

Spark AR Studioを使用すると、プログラミングの知識がなくても制作可能です。
特定のプログラミング言語を使用するのではなく、部品をつなぎ合わせるエディターを活用することで
エフェクトを視覚的に設計できます。

Instagramのストーリーズで使えるARエフェクトを制作し、公開してユーザーに使ってもらえます。
ユーザーはストーリーズ作成時に好みのARエフェクトを選択することで、写真や動画を印象的な作品に変えられます。

HPとアプリダウンロード（mac版のみ）
　→　https://sparkar.facebook.com/ar-studio/

#超入門チュートリアル
##①素材の用意
![キン肉マン.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/373045/b47e2871-d9c9-8b8c-9f6d-57db96281d72.jpeg)

おでこに「肉」の文字を入れてみる
![肉.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/373045/89c90795-7d80-7181-b226-7219e57878ce.png)

肉の漢字の画像を用意する（注意する点は２つ）
　①画像の形式がpngであること
　②文字の周辺を透過すること
　(透過の参考：https://qiita.com/na1412/items/90a9641d9644e1bfbb49)

##②SparkARを起動する
<img width="1078" alt="スクリーンショット 2020-02-22 0.44.07.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/373045/f28c5230-2a04-ea2e-25ab-e119525a325f.png">
　Blank Projectを選択する

##③エフェクト作成の準備
最初の画面
<img width="1440" alt="スクリーンショット 2020-02-22 0.48.06.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/373045/94315e03-2c91-d7ec-0a34-ec7939cf7baa.png">
左のカメラマークを押す
<img width="1440" alt="スクリーンショット 2020-02-22 0.49.21.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/373045/fad2c79a-e8d1-b237-ad5a-102fe863f8f2.png">
サンプルの人物の選択やFaceTimeを使えば自分の顔で編集できる
なるべく自分の顔でやったほうが良いかも

##④作成ステップ
①画像のインポートをする
<img width="1440" alt="スクリーンショット 2020-02-22 0.53.16.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/373045/abe0aae9-5dbf-27e3-8aeb-008c7270ba51.png">
左下 Assets の AddAsset から Import From Computer を選択して
先ほど作成した肉の画像を Assets に追加
<img width="1440" alt="スクリーンショット 2020-02-22 0.56.27.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/373045/5136fae3-b6a6-b7ce-c8a8-84979390d50c.png">

②フェイストラッカーを用意する
<img width="1438" alt="スクリーンショット 2020-02-22 0.58.10.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/373045/99d42d6d-dead-a40f-8248-72a89196ed3a.png">
左上 Scene の AddObject から Face Tracker を(insert)選択

③プレーンを追加
<img width="1440" alt="スクリーンショット 2020-02-22 1.01.11.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/373045/eb941ae2-e551-9ab8-b335-89989981c434.png">
左上 Scene の AddObject から Plane を(insert)選択
名前を追加したい素材と揃えると良いかも

④フェイストラッカーの下にプレーンを移動させる
<img width="1440" alt="スクリーンショット 2020-02-22 1.02.50.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/373045/92f40f2b-493f-f49b-b191-d222d0f6a21a.png">
FaceTracker０　の配下（フォルダ）に　plane０　を追加する

⑤マテリアルを追加する
<img width="1440" alt="スクリーンショット 2020-02-22 1.06.06.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/373045/ab7d40c0-ca7b-d792-832f-020493351b2a.png">
plane０　を選択して　左にある　Materials　の+ボタンを押す
Assets の　Materials　に　materials０　が生成される
ここも素材と同じ名前に変えておくと良い

⑥マテリアルにテクスチャーを追加する
<img width="1440" alt="スクリーンショット 2020-02-22 1.12.27.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/373045/cfaf36ed-94fa-3056-e3fc-4d346056c185.png">
materials０　を選択肢し、左にある　Texture を選択する
ここまでにミスがなければ肉　Texture　がある

⑦サイズと位置の調整
<img width="1440" alt="スクリーンショット 2020-02-22 1.15.36.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/373045/ab0c921e-c1f0-9b9c-f344-19d9dfbfc4b7.png">
素材の　plane　を選択してサイズ・位置などの調整をする
BOXで大体の位置を決めてから調整すると楽

動画：https://gyazo.com/a0390e28d1f205a1c982137581156dec

#⑤実際に試してみる
<img width="1439" alt="スクリーンショット 2020-02-22 1.27.43.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/373045/8bb2650b-1dae-597b-33f6-4c69fe7ad277.png">
左下のスマホボタンを押す、試す方法は３種類ある
　①スマホ側で試すプレビューアプリを取得する（アプリストアで　Spark AR　Playerと調べると出てくる）
　②フェイスブックで試す
　③インスタグラムで試す

フェイスブックとインスタグラムはアカウントの連携が必要
リンクを共有すると作ったエフェクトを友達などに使ってもらうことも可能
　→あくまでお試しである

https://www.facebook.com/sparkarhub/
に申請することで全世界にアップすることもできる（またQitaで投稿します！！）






 





#参考
Spark AR Studio は3Dオブジェクト売買のプラットフォームであるSketchfabと連携できるので、表示するオブジェクトを自作できなくてもARエフェクト制作が可能です。