Facebook ARカメラエフェクトが面白い
とある投稿がきっかけでFacebook ARカメラエフェクトに興味を惹かれて作り方を調べてみたところ、思ったよりも簡単に作れることがわかりました。
Facebook ARカメラエフェクト
Facebookが2017年にCamera Effectsプラットフォームとしてローンチした機能です。Facebookアプリ内のカメラを使って、インタラクティブなコンテンツをARのように楽しむことができます。
引用:Spark AR Player
これぐらいのARカメラエフェクトであればノンコーディングで簡単に作ることができますので、その作り方をまとめてみました。
Spark AR Studio
まずはARコンテンツの開発に必要なツール。
「Spark AR Studio」を下記サイトからダウンロードします。
https://www.sparkar.com/ar-studio/
起動すると表示されるチュートリアル選択画面。
・顔を認識してサングラスをかける
・床を認識してラジカセを置く
という基本的な2種類の使い方を、細かい操作方法まで含めて説明してくれます。
引用:Spark AR Studio
おそらくこれを見るだけで、オリジナルのARカメラエフェクトをノンコーディングで作れるようになると思います。
またSamplesタブには、さらに複数パターンの完成済みサンプルが用意されているので、チュートリアルを一通り試した上で、まずはこのサンプルの改造から始めてみるのも良さそうです。
引用:Spark AR Studio
実際に作ってみる
では実際にSpark AR Studio上で作っていってみましょう。
上記のチュートリアルやサンプルと重複してしまいますが、やはり最初は一番シンプルな顔認識＆3Dオブジェクトの貼り付けを。
File > New Project
で新規プロジェクトを立ち上げると、こんな感じの画面になります。
引用:Spark AR Studio
次々に表情や顔の角度を変える女性の顔が映し出されるので、この顔をベースとして開発を進めることができます。ちなみに表示される顔は画面上にある「Video」から変えられます。あらかじめ用意された顔だけではなく、カメラを通じて自分の顔で試すことも可能です。
顔を認識するためには「Face Tracker」を使います。画面左上にある「Insert」ボタンから「Face Tracker」を選択。Sceneウィンドウの中に「facetracker0」が追加されました。顔認識処理はこれだけで完了です。
引用:Spark AR Studio
次に顔に貼り付ける3Dオブジェクトを追加します。先ほどと同様に「Insert」ボタンから「3D Object」を選択。顔に貼り付けたい3Dモデルファイルを選びましょう。
3Dモデルファイルは FBX / glTF2 / Collada(dae) / OBJ あたりが対応しているようです。
引用:Spark AR Studio
3Dオブジェクトが追加されたら、先ほどの「facetracker0」の子要素になるようにドラッグ＆ドロップ。すると顔の動きに合わせて3Dオブジェクトが動き出すはずです。あとは顔の位置に合わせて位置調整をすれば完成です。
引用:Spark AR Studio
実機での確認
Spark AR Playerというアプリを使えば、実機(iPhone / Android)での動作検証も可能です。ここではiPhoneでやってみます。
まずSpark AR Playerインストール済みのiPhoneをUSBでMacに接続し、アプリを起動します。
あとは右上にある「Mirror」ボタンを押すだけです。
iPhone側のカメラに顔を写すと、Spark AR Studio内と同様に3Dオブジェクトが表示されることが確認できます。
引用:Spark AR Player
Facebook ARカメラエフェクトとして公開
Spark AR Playerで開発したエフェクトは、Facebook ARカメラエフェクトとして公開することができます。
右上にある「Export」ボタンを押し、表示されるダイアログ上にある各端末向けの容量を確認した上で、改めて「Export」を押します。すると[プロジェクト名].arexport というエフェクトファイルが保存されます。
引用:Spark AR Studio
続いてFacebook上にあるSpark AR Hubにアクセス。
https://www.facebook.com/sparkarhub/
「エフェクトをアップロード」から先ほど保存したエフェクトファイルをアップロードし、必要な情報を入力していきます。
公開には審査と承認が必要となりますが、承認前でも1日200件までならプレビューリンクを使ってテストとして使用できます。
問題なければ審査を申請。早ければ1営業日で結果が出るようです。
他にもこんな機能が
今回は顔を認識して3Dオブジェクトを貼り付ける、という最もシンプルなエフェクトを作りましたが、Spark AR Studioには他にもいろいろな機能があります。代表的なものをいくつかご紹介。
手を認識する
顔の代わりに手を認識します。手のひらの開閉の認識はできないようですね。
床を認識する
床を認識するAR KitやAR Coreのように平面を認識し、そこにモノを置くかのように3Dオブジェクトを配置することができます。
背景を除去する
顔や手などを認識した上で、それ以外をマスク＝背景を除去することができます。逆に顔や手にだけマスクをかける、といった使い方もできます。
顔の動きを取る
「Face Tracker」はただ顔を認識するだけではなく、目や口、眉毛の動きなどを認識することもできます。
Face Mesh
自分の顔をそのまま3Dモデルとして扱えます。
パーティクルを表示する
3D空間での演出には欠かせないパーティクル表示の機能もあります。
Script / Patch Editor
より複雑な処理を実装するためにJavaScirptベースのスクリプトも用意されています。またPath Editorを使えばノンコーディングでの実装も可能です。
引用:Spark AR Studio
Documentも充実
Spark AR Studioの「Learn」ページにはさらに詳しい作り方が載っているのでご参考までに。
https://www.sparkar.com/ar-studio/learn
