Facebook ARカメラエフェクトが面白い

Last modified date

とある投稿がきっかけでFacebook ARカメラエフェクトに興味を惹かれて作り方を調べてみたところ、思ったよりも簡単に作れることがわかりました。


Facebook ARカメラエフェクト

Facebookが2017年にCamera Effectsプラットフォームとしてローンチした機能です。Facebookアプリ内のカメラを使って、インタラクティブなコンテンツをARのように楽しむことができます。

ARカメラエフェクトの例。顔を認識して3Dモデルを貼り付けています。
引用:Spark AR Player

これぐらいのARカメラエフェクトであればノンコーディングで簡単に作ることができますので、その作り方をまとめてみました。


Spark AR Studio

まずはARコンテンツの開発に必要なツール。

「Spark AR Studio」を下記サイトからダウンロードします。

https://www.sparkar.com/ar-studio/


起動すると表示されるチュートリアル選択画面。

・顔を認識してサングラスをかける

・床を認識してラジカセを置く

という基本的な2種類の使い方を、細かい操作方法まで含めて説明してくれます。

順を追って作り方を説明してくれる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」が追加されました。顔認識処理はこれだけで完了です。

Face Trackerを埋め込んだ状態。まだ見た目の変化はありません。
引用:Spark AR Studio

次に顔に貼り付ける3Dオブジェクトを追加します。先ほどと同様に「Insert」ボタンから「3D Object」を選択。顔に貼り付けたい3Dモデルファイルを選びましょう。

3Dモデルファイルは FBX / glTF2 / Collada(dae) / OBJ あたりが対応しているようです。

すまのべ!くんフェイスのfbxファイルをインポートしてみました。
引用:Spark AR Studio

3Dオブジェクトが追加されたら、先ほどの「facetracker0」の子要素になるようにドラッグ&ドロップ。すると顔の動きに合わせて3Dオブジェクトが動き出すはずです。あとは顔の位置に合わせて位置調整をすれば完成です。

すまのべ!くんフェイスは大きすぎたのでScaleも調整しました。
引用:Spark AR Studio

実機での確認

Spark AR Playerというアプリを使えば、実機(iPhone / Android)での動作検証も可能です。ここではiPhoneでやってみます。

まずSpark AR Playerインストール済みのiPhoneをUSBでMacに接続し、アプリを起動します。

あとは右上にある「Mirror」ボタンを押すだけです。

引用:Spark AR Studio

iPhone側のカメラに顔を写すと、Spark AR Studio内と同様に3Dオブジェクトが表示されることが確認できます。

iPhone 7での動作確認の様子。
引用:Spark AR Player

Facebook ARカメラエフェクトとして公開

Spark AR Playerで開発したエフェクトは、Facebook ARカメラエフェクトとして公開することができます。

右上にある「Export」ボタンを押し、表示されるダイアログ上にある各端末向けの容量を確認した上で、改めて「Export」を押します。すると[プロジェクト名].arexport というエフェクトファイルが保存されます。

ファイルサイズは20MB以下に収める必要があるようです。
引用: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を使えばノンコーディングでの実装も可能です。

Patch Editorを使えばGUIベースで複雑な処理の実装も。
引用:Spark AR Studio

Documentも充実

Spark AR Studioの「Learn」ページにはさらに詳しい作り方が載っているのでご参考までに。

https://www.sparkar.com/ar-studio/learn


Share