12
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

SFCAdvent Calendar 2020

Day 10

インスタのフェイスフィルターをつくる方法【SparkAR】

Last updated at Posted at 2020-12-09

インスタグラムのフェイスフィルターを自分でも作りたい!と思って調べたり聞いたりして実際作ってみたのでまとめました。

作業環境:Mac(Catalina), iPhone (iOS14.2)

※この記事はSFC Advent Calendar 2020の10日目の記事です。
#Spark ARをはじめる

##インストール
インスタのフェイスフィルター作成ができるソフトである、SparkAR Studioをインストールします。
このリンクからダウンロードできます
https://sparkar.facebook.com/ar-studio/download/

※Macの場合、外部のソフトなのでセキュリティに引っかかることがあります。
設定>セキュリティとプライバシー>一般 にある「ダウンロードしたアプリケーションの実行許可」からダウンロード許可してください

###ログイン
起動できたらFacebookアカウントでログインします。ので、アカウントを用意してください

##さっそく作り始めるよ
スクリーンショット 2020-12-09 6.43.31.png

チュートリアルが始まったら、テキトーにぽちぽち押して、このホーム画面になるまで進めてね。

・ここから、New Projectを選択します。

・次に、モード選択みたいなのが出るので、Face Trackerを選択。

スクリーンショット 2020-12-09 6.46.42.png
するとプロジェクトが開きます。
・左のSceneタブにある、faceTracker0を選択した状態で、+Add Objectを開き、
Face Meshを選択してInsertを押します。

スクリーンショット 2020-12-09 6.50.45.png
Face Meshをクリックして右のタブを見てみましょう。

・その中にMaterialsがあるのでクリック。すると、左下のAssetsタブにMaterialが表示されます。
・さらにこれを選択して、右のタブを見てください。
スクリーンショット 2020-12-09 6.55.54.png
Colorで色を変えたり、Texture>ChooseFileで適当な画像を入れたりしてみてください。

白いマスクから変更できるのがわかったと思います。ここまでくれば、意外と簡単にフィルターが作れそうだなと思えてきませんか?
では、これから自分の作りたいフィルターの素材を用意していきましょう。

#素材づくり
###テンプレートをDLする
SparkAR公式サイトのページ へ飛んで、「Download the Face Reference Assets」というのをクリックしてダウンロードしましょう

###ペイントソフトなどで素材を作成
・ダウンロードしたファイルの、FaceAssets > Textures に顔のテンプレ画像が何種類か入っています。使いやすいのを選んで素材を作成していきます。

ペイントソフトは何でもいいですがレイヤーに分けて作業できるものにしましょう。
イラレフォトショ、フリーのものならFireAlpacaアイビスペイントなど使いやすいもので作業してね

###作業例
IMG_0373.jpg
テンプレ画像と、実際にデザインをおくレイヤーを分けます。
IMG_0374.jpg
完成したら、テンプレ画像のレイヤーは削除して、デザインのレイヤーのみ透過して保存、pngなどに書き出します。

ちなみに私はiPadのアイビスペイントで作業しました。他のソフトでも全く同じ作業です

###Spark ARに素材を入れる
・今の画像を、Materialとして読み込みます。Texture>ChooseFileで画像を選択してください
スクリーンショット 2020-12-09 7.25.24.png

わーーーできた!けど思ったよりも顔に対して大きかったので素材を修正しました。

・さらに、イラストをスタンプみたいに貼り付けたいのに影が入って暗くなってしまっていたので、右のタブの一番上にあるShader Typeを、StandardからFlatに変更しました。

#実機テスト
自分の顔で確認したり、完成品を楽しむためにスマホに繋げます。

・スマホに「Spark AR Player」というアプリをインストールします。
アプリを起動させた状態にしておきましょう。

・スマホとPCをケーブルで接続します。

・PCのSpark ARに戻り、左下の方にあるスマホのアイコンをクリックし、自分のスマホを選択、sendを押して送ります。少し時間がかかる場合もありますが、これでスマホからフィルターを使えます!

#インスタで使えるようにする
###ファイル書き出し
スクリーンショット 2020-12-09 8.16.24.png
完成したら、File > Upload and Exportを選択。
スクリーンショット 2020-12-09 8.16.42.png
確認して、(基本的には変更しなくて大丈夫です)左のExport Fileを押し、名前をつけて書き出し完了です。
これで申請のための**.arexport**の形式で用意できました。

###自分のインスタアカウントを用意
申請のために、Facebookアカウントに紐付けたインスタのアカウントが必要です。すでに持っているアカウントでも良いですが、クリエイターアカウントじゃなきゃだめなので、変更するか新しく作りましょう。やり方がわかんない人はググってね

###インスタ申請

以降のやり方はこちらのQiitaでとてもわかりやすくまとめられていたので見てみてください。
現在私も申請中です。割と簡単だったので、せっかく作ったら申請しちゃおう

これで終わり!
作例で私が書いていたキャラはぽんきちというオリジナルキャラクターで、グッズサイトや、LINEスタンプ①LINEスタンプ②があるのでぜひぜひ見てね(宣伝)

スクリーンショット 2020-12-09 8.27.23.png

12
4
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
12
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?