Spark AR Instagramのオリジナルフィルターを作ってみよう!

Spark AR トップ画

Spark ARはFacebookから無料提供されているARツールですが、InstagramやFacebookのストーリーに使えるオリジナルのフィルターを作ることができます。ソフトの言語はすべて英語ですが、シンプルなフィルターを作るには思ったより簡単に作ることができます。今回は顔の上にイラストなどが表示されるフィルターを作っていきます。ではやっていきましょう!

 

Spark AR をダウンロード

下のリンクのダウンロードページから「Download」をクリックしてダウンロードします。

Spark AR公式ダウンロードページ

 

メインページ

初めのページにはテンプレートが複数用意されているので触ってみるのもいいですね。テンプレートによっては画像を変えたりするだけで良いものもあったりするので活用してみましょう。

新しいプロジェクトの作成

左上のBlank Projectをクリックして新しいプロジェクトを作成します。

 

編集画面

簡単に各セクションを説明します。

Scene(シーン)

ここでObject(オブジェクト)を追加したりして画面上に映る要素を編集できます。例えばPlaneというオブジェクトを追加して、そこに画像を貼り付けたりすることができます。新しい要素を追加したい場合はここにオブジェクトを追加していくことになります。

Asset(アセット)

ここに画像や3Dオブジェクトをインポートすれば先程話したオブジェクトに追加することができます。今回作る顔の上に写る要素はここからインポートします。

中央画面

ここでオブジェクトの位置を確認したり、直接移動させることができます。

プレビュー画面

ここでフィルターの見た目を確認することができます。初めは黒人の方が写っていますが、一番左側のタブにある、ビデオのアイコンを押せば他の性別や肌色の方に変更することが可能です。パソコンに付いているカメラを使って自身の顔で試すことも可能です。

右側の欄

ここで各項目の数値などを変更することができます。

 

実際にフィルターを作ってみよう!

今回は最近個人的にハマっているMoney Heistのマスクを参考にダリのマスクのひげと眉毛が顔に写るフィルターを作っていきます。可愛いとはかけ離れていますが、もし自身で考えたデザインがあれば今回のやり方でやれば上手くいくと思うので試してみてください。

Face Assetsをダウンロード

Face Assetsは顔の要素の変形や、顔のどの位置に画像を配置するかの参考になります。Face Assetsは上の欄からダウンロードページに飛ぶことができます。一応ここにもリンクを張っておきますね。

Help > Download Face Assets

Face Assetsを参考にデザインを作る

Photoshopなどのソフトウェアを使ってデザインを作っていきます。先程ダウンロードしたファイルの中の「faceMeshTrackers.png」を使います。様々なファイルがありますが今回はこちらを使います。

Face Assets > Textures > faceMeshTrackers.png

画像自体は線と点できたフェイスマスクみたいですね。これを参考にデザインするとSpark AR内でも上手く顔に適応されます。例えば、口紅やチークなどの化粧のフィルターを作りたい方は線を参考にして作ることができます。

Adobeのフォトプランなら格安でPhotoshopを利用できます。おすすめです。

新しいレイヤーを作成してデザインを作成

今回はPhoshopを使って作成しますが、他のソフトウェアで作成可能です。新しいレイヤーにダリのデザインを簡単に作成しました。各部位のデザインを別々のレイヤーで作成すれば、Spark AR上で他のデザインと組み合わせたりできますね。

新しいレイヤーだけをPNGとして保存

参考にした画像のレイヤーは隠して、先程作成したデザインだけをPNGだけを保存します。

 

Spark ARにインポート

先程作成したファイルをSpark SRのアセットにインポートします。

 

Face Meshの追加

Add Objectをクリックして、「Face Mesh」を検索してInsertします。するとプレビュー画面に怖い顔が表示されます。オブジェクトは右クリックで名前を変更できるので自分のわかりやすい名前にしましょう。

Materials(マテリアル)の追加

後はデザインしたPNGを追加するためにマテリアルを追加します。先程追加したFace Meshのオブジェクトを選択しすと、右側のタブに「Materials +」という欄があるのでクリックします。すると更に顔が怖くなり、「material0」という要素がアセットに追加されます。これもわかりやすいように名前を変えておきましょう。後少しでフィルターの完成です。

 

Textures(テクスチャ)にデザインを追加

先程追加された「material0」をクリックすると、右側にTexturesの欄が見つけられると思うのでトランスペアレントのタブをクリックしてデザインを追加します。もし見つからなければ、右側の「Choose File…」からデザインをインポートできます。するとデザインが顔に適応されていると思います。

 

もし複数のデザインを顔に追加したい場合

例えば、頬に新たなデザインを追加したいとします。そしたら今までと同じ様に「Face Mesh」を追加していけば可能です。

 

自身のスマートフォンでテスト

左側の「Test on device」のアイコンから自身のスマートフォンでテスト確認することができます。

Spark ARのアプリで

スマートフォンにSpark ARのアプリをインストールして、パソコンと繋げば実際にテストすることができます。

FacebookやInstagramで

FacebookかInstagramのアプリをスマートフォンにインストールしていれば、スマートフォンをパソコンに繋がなくてもテストすることができます。実際に撮影できるので、そのままストーリーに上げるのもいいかもしれません。InstagramでテストするにはFacebookとInstagramのアカウントがリンクされている必要があります。僕のアカウントは接続しているのですが、なぜがリンクされていないと表示が常に表示されているのが困っているところです。

 

今回はここまでです。実際のアカウントのアップロードする方法は、僕自身が実際にできてからにしたいと思います。アカウントにアップロードしたフィルターは、フォロワーの方も使用することが可能になります。

僕自身もSpark ARは勉強中ですが、これからも少しずつSpark ARのチュートリアルもご紹介していけたらと思います。

ではまた!