Snap Cameraとはなんぞや

PC向けのフィルターアプリです。Snapchat運営のSnap Incがリリースしています
これを使うことでビデオチャットに移す自分の顔を加工することができます
僕のお気に入りはこのフィルターです。頭に猫を乗せることで厳しいクライアントさんとのMTGを和ませることができます

フィルターを作ろうと思った経緯

弊社の夏合宿で何か好きなものを開発しよう！ということになりました。
そこで、
自分が好きなAR関連 +
弊社が最近リリースしたARアプリ「Pocket Pet」の宣伝になりそう +
今後、自分でも使いたい
といった理由からSnap Cameraのフィルターを作ることにしました。

成果物

先に今回作成したしたフィルターのリンクを貼っておきます。
https://www.snapchat.com/unlock/?type=SNAPCODE&uuid=4ea2d3dd4499461c8bd4954bd6ee5ca2&metadata=
スマホであればリンクタップでSnap Chatが開きます
PCであればSnap Cameraの検索窓にこのURLを貼ってください

作り方

1. 製作ソフトのインストール

Snap CameraのフィルターはLens Studioというソフトで開発します。
初回起動時にSnapアカウント作成フローがあるのでアカウントを持っていない場合は作っておきましょう。
作成したフィルターを公開する際に必要です

2. プロジェクトの作成

「New Project」ボタンから新規プロジェクトを作成します

Unityっぽい画面が立ち上がります

3. 顔検出用オブジェクトを配置

頭の上にコーギーを乗せるためにLens Studioの顔検出機能を利用します.
顔検出をするために「Head Binding」というオブジェクトをシーンに配置します(顔をずっと晒したくないのでカメラ画像を差し替えました)
「カメラ」オブジェクトの子に配置する必要があります。
Objectsウィンドウで「カメラ」オブジェクトを選択した状態で左上のプラスボタンから追加してください。

4. 3Dモデルのインポート

頭に乗せるコーギーの3Dモデルをインポートします。
「Head Binding」オブジェクトの子にする必要があります。
Objectsウィンドウで「Head Binding」オブジェクトを右クリックして「Import Object」を選択しましょう

今回はアニメ入りのfbxを使いました
インポート設定はこんな感じです

5. テクスチャ設定

無事にインポートできましたが、コーギーが真っ白です。
テクスチャを張っていないからですね。これはこれで上品でいいと思います。

まず、Resoucesウィンドウに貼り付けたいテクスチャがあることを確認します。fbxと同じディレクトリにあると一緒に取り込まれるみたいです。
取り込まれなかった場合はD&Dで追加できます(右の女性には縮小頂きました)

次にResourcesウィンドウから先程インポートしたコーギモデルの中を見るとそれっぽいマテリアルがあるので選択します。
すると、Inspecterウィンドウで詳細を編集できます。
その後、「Base Texture」にチェックをいれ、画像赤丸の箇所をクリックして用意したテクスチャを設定するとテクスチャの設定は完了です