Lens Studioで3Dモデルが映るバーチャル背景をつくる

# はじめに

オン飲みという言葉をよく聞くようになりましたね。
Zoomにはバーチャル背景を設定できる機能が元からついているのですが、Zoom以外のビデオチャットでもLens StudioとSnap Cameraというソフトを使えばバーチャル背景が設定できるとの事で、色々試してみています。

Lens Studioというソフトでバーチャル背景が自作できるのですが、例えば、部屋を写さないようなバーチャル背景を設定するには、プロジェクト作成時に「Segmentation」というテンプレートを選択すればよさそうです。
自作の3Dオブジェクトを頭に乗せたければ、プロジェクト作成時に「3D Object」というテンプレートを選択すればよさそうです。

では、バーチャル背景を設定しつつ、頭に3Dオブジェクトを乗せるにはどうすればいいのでしょう？
テンプレートはオブジェクト作成時に1つしか選択できません。

というわけで、テンプレートを使わずに、自分で一からバーチャル背景を設定する方法と、3Dオブジェクトを頭にバインドする方法をまとめます。

完成イメージ
![0043.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/230850/8c4f3e51-2d75-fcb4-4634-8cd0d0d0874b.jpeg)

参考にさせて頂いた動画
[Segmentation: Adding a background to a Snapchat Lens](https://youtu.be/vHmOCeK0hw8)

# バーチャル背景の設定方法（Segmentation）
## プロジェクトの立ち上げ
Lens Studioを起動し、「＋NEW PROJECT」をクリックし、新規プロジェクトを作成する。
![0001.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/230850/183de2f5-0364-4f0e-11ac-c648603c69fe.jpeg)

## Orthographic Cameraの設定
Objectsパネルの「＋」ボタン（Add New Object）をクリックし、「Screen Image」をクリックする。
![0002.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/230850/50834ce9-918c-8a62-2f0b-9face0be3107.jpeg)
![0003.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/230850/b1b1ac6e-749f-92a5-f1cc-0051edf9a06e.jpeg)

Objectsパネルから先ほど作成した「Orthographic Camera」を選択し、InspectorパネルのCameraコンポーネントから「Render Target」をクリックする。
![0004.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/230850/7f88d3b3-96be-5209-a484-b79a4ba23421.jpeg)

「＋」ボランをクリックし、「Render Target」を選択し、「Render Target 2」にチェックをいれ、「OK」をクリックする。
![0005.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/230850/7088a893-24e6-b48c-81ec-aa41a4209a51.jpeg)
![0006.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/230850/14203a2f-e589-4682-a9e3-c2380579e852.jpeg)
![0007.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/230850/d4e0bb5a-d8eb-73a4-fb77-a128b8e123c8.jpeg)

「Screen Image 0」の名前を「background」に変更する。
![0008.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/230850/5d017e8f-0e58-6d02-ccdb-d6784b3a308c.jpeg)
![0009.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/230850/15e4cfd9-5b5f-5d6d-04f0-f93d48f1b7ce.jpeg)

「background」の上で右クリック→「Duplicate」を選択し、「background」を複製する。
![0010.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/230850/a3533db3-9358-c7d4-9e27-28a76839da4f.jpeg)
![0011.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/230850/b0f8d007-1106-078a-9109-bb71ebda3c8e.jpeg)

名前を「person」に変更する。
![0012.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/230850/d5a38247-77cc-66a9-194d-741d57916379.jpeg)

## backgroundの設定
Objectsパネルから先ほど作成した「background」を選択し、InspectorパネルのImageコンポーネントから「Texture」クリックする。
![0013.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/230850/1d28fb03-2827-1878-727c-0bc8e168e664.jpeg)

「＋」ボランをクリックし、好きな画像を選択し、「OK」をクリックする。
![0014.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/230850/e487bec0-9f1c-9f97-632a-ff1b7bb3a514.jpeg)
![0015.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/230850/4d9bfe04-8b32-9b43-ac96-25819eef25f5.jpeg)
![0016.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/230850/527c291f-6ab2-5198-3488-d7b5a8835fed.jpeg)

「Stretch Mode」を「Stretch」に設定する。
![0017.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/230850/9e4900da-6fe9-2a8e-470d-8697f7842b40.jpeg)

## personの設定
Objectsパネルから先ほど作成した「person」を選択し、InspectorパネルのImageコンポーネントから「Material」クリックする。
![0018.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/230850/46504b86-e984-49cf-bddf-7256c61548ad.jpeg)

「＋」ボランをクリックし、「Unlit」を選択し、「OK」をクリックする。
![0019.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/230850/cca73fa4-9567-d700-7fd7-472f35ad8aa1.jpeg)
![0020.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/230850/d43b8cf7-41c5-2ed1-ae11-443f368ea482.jpeg)
![0021.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/230850/6f17b0bf-b879-1597-7172-10af65b0625a.jpeg)

## Unlitの設定
Resourcesパネルから先ほど作成した「Unlit」を選択し、InspectorパネルのMaterialコンポーネントの「Blend Mode」を「Normal」に設定する。
![0022.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/230850/4921eedd-b671-ed52-726d-7ac8513f2864.jpeg)

「Base Texture」の「Texture」をクリックする。
![0023.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/230850/fee750ee-a496-d6c7-e9f0-ce247eab7560.jpeg)

「Device Camera Texture」を選択し、「OK」をクリックする。
![0024.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/230850/abd552d8-5049-8c0c-8d2e-794dc8c29b64.jpeg)
![0025.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/230850/27808c67-ec88-9a82-4202-722b97575ce2.jpeg)

「Opacity Texture」にチェックを入れる。
![0026.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/230850/d1df6482-433d-e82c-d2d8-f4dd6d674f4b.jpeg)

「Opacity Texture」の「Texture」をクリックする。
![0027.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/230850/9ad5936d-8d5e-866e-acfa-dfe66bade079.jpeg)

「＋」ボランをクリックし、「Segmentation Texture」の「Portrait Background」を選択し、「OK」をクリックする。
![0028.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/230850/8d33e079-46c4-b52c-a3fd-3aedbbf7d66c.jpeg)
![0029.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/230850/3afad004-93e3-7ae8-ffa4-4fcc048e7e2f.jpeg)
![0030.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/230850/fe10e2f3-fa8f-0e26-8486-c5a18b8880d3.jpeg)

## Portrait Backgroundの設定
Resourcesパネルから先ほど作成した「Portrait Background」を選択し、InspectorパネルのTextureコンポーネントの「Invert Mask」にチェックを入れる。（必要に応じて、「Feathering」や「Refine Edge」も変更する。）
![0031.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/230850/1846e526-cc20-c26f-c083-bd19891c0bf3.jpeg)

## Cameraの設定
Objectsパネルから「Camera」を選択し、InspectorパネルのCameraコンポーネントから「Clear Color」にチェックをいれる。
![0032.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/230850/c9e37e78-1b36-650f-15a6-c0b922779130.jpeg)

「Input」をクリックする。
![0033.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/230850/7acf5a87-a591-378d-ae4a-dac15098efef.jpeg)

「Render Target 2」を選択し、「OK」をクリックする。
![0034.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/230850/17450481-2241-9e13-6944-29e158dfffbe.jpeg)
![0035.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/230850/d736ac32-db19-e999-c36f-7a7d36f87e02.jpeg)

## バーチャル背景の設定完了！
![0036.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/230850/65bb7093-6856-9c76-b3a3-f327ed9541f4.jpeg)

# 3Dオブジェクトを頭にバインドする設定方法（3D Object）
## Cameraの設定
Objectsパネルから「Camera」を選択した状態で、「＋」ボタン（Add New Object）をクリックし、「Head Binding」をクリックする。
![0037.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/230850/41973eab-31c0-0a80-5e2f-88e479af8bcf.jpeg)
![0038.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/230850/0965113d-9cbb-f5bf-11cf-e13d1e359fbb.jpeg)

Objectsパネルから先ほど作成した「Head Binding 0」を選択した状態で、「＋」ボタン（Add New Object）をクリックし、任意のMeshをクリックする。
![0039.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/230850/2d208be4-02f0-773c-657b-d5ef95d958a4.jpeg)
![0040.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/230850/9140966e-0e2c-1948-1e1f-019f62e42b5d.jpeg)

もしくは、右クリック→「Import Object」をクリックして、3Dオブジェクトをインポートする。
![0041.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/230850/d1371646-b80a-1ace-7da9-fcb8f8813ebf.jpeg)

Objectsパネルから先ほど作成（もしくはインポート）したオブジェクトを選択し、位置を調整する。
![0042.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/230850/dbfa6091-2c55-75f2-e56b-b2ed5a5dd8a7.jpeg)

## 3Dオブジェクトのバインド完了！
![0043.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/230850/8c4f3e51-2d75-fcb4-4634-8cd0d0d0874b.jpeg)

# さいごに
Lens Studio落ちやすくて、アニメーション付きの3Dオブジェクトをインポートして色々触っていたりすると、すぐにクラッシュしますね。。。
あと、Lens Studioは日本語の記事が少なすぎて沼です。。。