クリスマスの激盛れインスタフィルターを作ろう！🎅🎁🎄

## 🎄クリスマスの激盛れインスタフィルターを作ろう！🎄
Life is Tech ! #2 Advent Calendar 2020 14日目🎉

こんにちは！エミリーです！
突然ですが、私は**クリスマスがだーーい好き**です！もう本当に本当にクリスマスが好きすぎて10月の終わりくらいからワクワクしていますっ🎅🎁🎄🎅🎁🎄

そこで今回は...!!!


### クリスマスにもってこいのインスタグラム、Facebookで使えるフィルター
を作っていきたいと思います！！！




コードは一切書かないので、フィルター作ってみたいな〜というかた、是非一緒にやってみてください。

もちろん、**小顔！リップ！肌の綺麗さ！**も忘れてはいけませんね！**盛れ盛れ**なフィルターにしちゃいます！🥰

↓こんな感じのものを作っていきます！
![final.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/569820/20749a41-36c0-2fb3-3480-407d93e360da.gif)


## 目次
・使うもの
・Step1 素材作成
・Step2 小顔 face Mesh を準備
・Step3 フィルター作成🎅
・おまけ１ 肌を白く美しく！！🥚
・おまけ２ 艶肌に！🥚🥚
・やったー公開！！
・🎄🎉🍗完成🎁🎅🎄

この記事では初めてフェイスフィルターを作る人にもわかるように細かく説明してあります。また小顔効果・美白効果なども紹介しているので、すでにフェイスフィルターを作った経験がある方にもおすすめです。自分の経験に合わせたstepからお読みください。

## 使うもの*
**・Spark AR Studio**
Facebookが提供しているもので、こちらを使ってフィルターを作っていきます。フィルターもここから公開して管理することができます！以下のサイトからアプリをダウンロードしてください。
https://sparkar.facebook.com/ar-studio/

**・小顔を作るためはこちら**
https://stephaneginier.com/sculptgl/

**・素材を作るためのイラストレータなど**
ここはなんでも構いません。
今回はイラストレータを使って素材を作りました！

## Step１　素材を作る。
①　素材ダウンロード
https://sparkar.facebook.com/ar-studio/learn/
こちらにアクセスして、

**「Using the Face Reference Assets」**を開きます。

![スクリーンショット 2020-12-11 0.36.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/569820/01ad9657-a1d7-cfd9-bf4b-9ac2a507fae0.png)


**Face Reference Assets** をダウンロードしてください

![スクリーンショット 2020-12-11 0.36.53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/569820/d35edf88-ffeb-c649-dd0e-a4548d87f562.png)


②　zip形式でダウンロードされるので、ダブルクリックで解凍してください。

![スクリーンショット 2020-12-11 0.46.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/569820/747733b3-2ddb-1044-051f-ca69718de9c1.png)


※１を使って小顔のface Meshを作っていきます。(Step2)

※２のいずれかを使ってパーツの配置や、メイクなどを調整していきます。(Step1)
より顔の位置がわかりやすいfaceMesh.pngを使っていきたいと思います。メイクなど細かい位置を調整したい方にはこちらがお勧めです。

今回はイラストレータを使って素材を作っていきます。

![スクリーンショット 2020-12-12 2.59.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/569820/7bb4abc0-eb88-a533-5b10-c55c839d6394.png)


③　こんな感じでfaceMeshの画像をセットしましょう。これに合わせて素材の位置を決めるだけです！
**アートボードのサイズは、faceMeshの画像サイズに合わせておきましょう。**
（ここを無視すると、後に顔につけた時にズレます。）

クリスマスなのでジンジャーマンクッキーにしてみました🍪🧸
はい、可愛い〜〜！！

④　こちらを先ほどセットしたfaceMeshの画像の上で配置します。
この際、少し見にくいので、faceMeshの画像の不透明度を少し下げておくと作業しやすいです。

![スクリーンショット 2020-12-12 3.07.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/569820/d9512a60-60ea-3824-0f57-e8bd1ab0c471.png)


⑤　**リップ**をつけてみましょう。
こちらが予想よりも単純で簡単です。あ、こんな感じなんだーーふふっと笑ってしまう感じです:)

以下がリップを追加した後になります。
みて予想できる通り、**faceMeshの唇の形に合わせたシェイプを作り、好きな色にするだけ**です！
なんとまぁ簡単なこと！ it's too easyすぎるね〜haha！！🥰

ポイントとしては、原色のままだとリップが強いので、よしなに**不透明度を下げてあげる**と良いと思います。
今回は60%くらいにしてみました。

![スクリーンショット 2020-12-12 3.16.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/569820/ee5396ec-5072-d79e-0a91-fa581d4530d7.png)


この方法でアイラインを引いてあげたり、チークをつけてあげたりできるわけです。

⑥　書き出す
あとはこちらを書き出すだけで素材は準備完了です。その際、ベース代わりに置いていたfaceMeshは非表示にしてあげてください。
以下のような形で書き出します。

![アートボード 14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/569820/6908f979-a811-94a6-c300-a920a352b3a6.png)


So now, let's go next step !😊

## Step2 小顔 face meshを準備。
実際に粘土のような物をいじって**小顔**を作っていきます。
もう自由自在！どんな顔にでもできます！整形し放題です。可愛い顔、美しい顔、理想のフェイスライン、作っていきましょう！

①　https://stephaneginier.com/sculptgl/
こちらにアクセス！

こんな感じの画面になると思います！

![スクリーンショット 2020-12-11 0.57.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/569820/2a34a78f-f0c5-3568-d4d3-1634ad6ae002.png)


今回は、顔を作りたいので、初めに出てくる丸は消してしまいましょう。

②　Scene > clear scene

![スクリーンショット 2020-12-11 0.58.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/569820/1a2544e2-4bdb-f567-a104-19ff515c86ea.png)

先ほどダウンロードしたFace Assetsののオブジェクトを入れます。

③　ファイル（インポート・エクスポート）　> Add(obj,sgl,ply,stl)
④　faceMesh.objをインポート

![スクリーンショット 2020-12-11 1.00.29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/569820/85cfe985-59b3-c017-64c0-705a7e311419.png)

![スクリーンショット 2020-12-11 1.00.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/569820/4c0836d8-7e7b-948c-ffbe-167cca5e531a.png)

こんな感じで顔のオブジェクトが入ったら成功です！

編集しやすいように、**Rending**の**フラットシェーディング、ワイヤーフレームにチェック**を入れることをお勧めします！

⑤　Rending > フラットシェーディング、ワイヤーフレームにチェック。

![スクリーンショット 2020-12-11 1.05.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/569820/b3a1f7f8-53e1-dc70-a069-570265b682f0.png)


以上で準備は完了です。

**〜操作について〜**
基本的には**SCULPTING & PAINTING**のツールを選んで色々いじるとできます。
自分がやりたいことを考えながら試してみるのが良いと思います。
頭で考えないで手を動かしてみよう！ってわけですねっ😊

やってはこれは違うな、と戻って、、、スタイルが良いと思うので、覚えておくと便利なのが一つもどるコマンド！
**「Control + Z」**で一つ前の状態に戻ることができます。⌘ + Z　ではないのでご注意を...

もう一つ便利コマンド
**Optionキー**を押しながらツールを使うと反対の機能として使えます。
例）　「拡張」の逆、すなわち「　opitonキー　＋　拡張　」　を使って頬をちょっと削るとか！
そういう感じで使います。

![スクリーンショット 2020-12-11 1.09.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/569820/b0d61916-90df-cc6c-c0e8-ae178aafaebe.png)


試しみんな大好き可愛さのポイント「涙袋」をいじってみます

涙袋とかには「拡張」を使っていきます！（特に何を使わなきゃいけない、などの決まりはないです。）
こんな感じになりますねっ

![アートボード 12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/569820/1ddd65de-c204-5814-7292-ecad83b0eb81.png)




こういう感じでどんどん可愛い顔を作っちゃってください！

ポイントとしては、ちょっとやりすぎかな？ くらいやって大丈夫です！

実際の顔で試しながらやりたい方は**Step3**も見ながらやると良いと思います。

![before-after.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/569820/0da1ac97-6e59-4399-4b04-17c958505f43.png)


こんな感じになりました。（左:Before 右:After）
やりすぎじゃん？？？ってなるくらいがちょうど良いので今回はこんな感じで行きます！
やりすぎてしまっても後から修正すれば良いので大丈夫です。
(私も後からちょっと修正しました😋)

今回のいじったポイント♡
・涙袋ぷっくり
・目を大きく（この際、動かすまぶたの線を間違えると二重幅等がおかしくなるので注意。）
・鼻をたかく＆細く＆堀を深く
・唇をぷっくり
・顎をシャープに＆小さく
・頬を少し削る

わ〜自由自在だ！

さあ、これをあとは保存しましょう。

⑥**ファイル（インポート・エクスポート）　> Save .obj**
で保存しましょう
![スクリーンショット 2020-12-12 3.39.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/569820/3cbd8011-0eb5-fd18-6fb6-6ccd30f4d6d1.png)


## Step3　フィルター作成🎅
準備した素材、小顔用faceMeshを実際にフィルターに適用していきます。

①　「使うもの」でお伝えした**Spark AR Studio**を起動してください

②　Create New　> Face tracking を選択
![スクリーンショット 2020-12-12 3.48.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/569820/15c7fb16-00e4-e875-fb6b-a569e728f37e.png)


③　シュミレートする際の人物を選択します（任意）
クッキーが茶色いのでちょっと変えてみましたっ

左の項目の、videoをクリックすると選択できます。
PCの内蔵カメラで試す際は、Camerasを選択。
※実際のデバイスでテストする際は**Test on device**を選択します。

![スクリーンショット 2020-12-12 3.52.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/569820/c9d1cc3c-a396-adc5-298d-54de6b8909be.png)


**ここからがフィルター作成作業です。**

④ **Add object　>　face Mesh** を追加

まずはこちらの女性を小顔にしてあげましょう。

![スクリーンショット 2020-12-12 4.00.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/569820/7d1b8d07-3cf0-93a9-e79e-8e7ce33c7c97.png)


追加すると以下のようになります。顔にチェック模様！！！！

![スクリーンショット 2020-12-12 4.03.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/569820/196d1d71-121e-f5dc-39cb-633605eb95e5.png)


⑤　右の方にある **Deformation** をクリックしてStep2で作成した小顔オブジェクトを追加します。

ここでポイントが、名前を変更してあげることです。小顔であったり飾りであったりやることが多くなればなるほどややこしくてわかりにくくなります。
**Material、Deformation、faceMesh、は追加した都度名前を変更してあげましょう！**　（以下画像参考）

※ダブルクリックすると名前変更できます。

![スクリーンショット 2020-12-12 4.16.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/569820/ca443401-b1b7-06ed-b170-720597fb1195.png)


挿入後、Deformationのスライドバーを動かすと小顔オブジェクトの適用レベルを変更できます（やってみて！☺︎）
![smallFace.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/569820/4f1f39bd-fd7f-b4f6-6dae-ca5b8bbc9915.gif)


小顔になった？これだけでも可愛いくなったでしょ？❤️ふふふ



続いてお顔にクッキーをおきましょう。
⑥　新しいface Mesh　を追加します。　**Add object　>　face Mesh**
この際、階層を揃える必要があるので、**新しく追加されたface MeshはFace Tracker0の中**に入れてあげてください。
(以下画像参照)

名前の変更も忘れずにこのタイミングで行いましょう。トッピングとしておきました。
![スクリーンショット 2020-12-12 4.23.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/569820/b48c324a-dbe7-fb04-7fc7-5f11afdacdb0.png)


⑦　トッピングを選択した状態で、右の項目から**Material**を追加。
![スクリーンショット 2020-12-12 4.26.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/569820/8db5b075-3260-ca7d-b029-5b6b557cfdd8.png)


左下のAssetsに新しいMaterialが追加されると思うので、名前を変更しておきましょう。ここでも私はトッピングとしました。

⑧　Material"トッピング"の**Texture**に画像をセット
**Texture > New Texture**から先ほど保存した素材をセットしてください。

⑧’ 右上にある **Shader Type**を**Face paint** にしてあげるとフェイスフィルターの際には良いと思います
少しずつ顔へのフィット感とかが違うのでお試しあれ〜〜

![スクリーンショット 2020-12-12 4.29.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/569820/f124606a-f491-323a-30a4-10781666b7ff.png)
![スクリーンショット 2020-12-12 4.43.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/569820/34bf7479-cc25-b134-7603-5598238fd679.png)


ここまできちんとできるとほぼ完成です！以下かですか？できました？？😆
あらまっ可愛い〜〜🥰🥰🥰
![スクリーンショット 2020-12-12 4.36.53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/569820/01b30b84-72b4-b738-d744-bc6326ac4906.png)


こんな感じで完成です！と言いたいですが、、、美容にはよくがで続きます！
私は、肌も綺麗にしたい！！！
肌も綺麗にしたいのでもうおまけ１、２を追加しちゃいます

## おまけ１ 肌を白く美しく！！🥚
①　先ほどまでと同様にface Meshを追加。名前は"美肌"とします。

②　**Material** を追加。名前は"美肌"

③　Shader Type　を** Retouching** にします。

④　**skin smooth** をいい感じにいじります。

これで美白効果は完璧〜〜！！
この写真では比較しにくいですが、スライドバーをいじりながら確認してもらえると良いと思います。

![スクリーンショット 2020-12-12 4.43.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/569820/2c48b476-2eff-0802-ee81-db72f1ec08fe.png)



## おまけ2 艶肌に！🥚🥚
①　今までと同様にface Meshを追加。名前は"艶肌"とします。

②　**Material** を追加。名前は"艶肌"

③　Shader Type　を **Physically-Based** にします。
![スクリーンショット 2020-12-12 4.52.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/569820/2a6ebdd7-6c84-7187-7e73-1e99edb8ea03.png)


④　右の項目の **Surface Parameters** をいじって艶感を出していきます。
　　Surface Parametersだけをいじると艶感が出過ぎてしまうので、**opacity** も一緒に調整してあげると良いです。

## やったー公開！！
**Upload and Export** をクリックして**Upload**を押してください。

※Export Fileするとファインダーに保存できるので、修正していく場合にはそちらの方が便利です。

![スクリーンショット 2020-12-12 5.14.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/569820/69a43e0f-b812-632c-38df-b4472bd138ee.png)


Upload に成功すると以下のようになるので、あとはいろいろ情報を入れて申請ボタンを押すだけです！

![スクリーンショット 2020-12-12 5.14.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/569820/aaaa792c-c35e-8ef8-ce48-b332eb2ad00a.png)


## 🎄🎉🍗完成🎁🎅🎄
いかがだったでしょうか！これでクリスマスの激盛れインスタフィルターが完成しました。
一緒に作ってみてくださった方、お疲れ様です🍵

みんなで可愛くなっちゃいましょ🥰

実際に作ったフィルターはこのアカウントに公開しているので是非チェックしてみてくださいっ
盛れるよーん

**Instagram -> [emily's account](https://www.instagram.com/eeeeemmmmmiiiiillllllyyyyyy/?hl=ja)**

~他にも参考になる記事、動画・違うフィルターの記事~

ランダムフィルター
https://qiita.com/YujiHazama/items/26c2e7b4b2d8d17c0354

Youtube
https://www.youtube.com/channel/UCWFxoHU8rAItQBxHxgvRjjw

**Have a nice Christmas🎄**