はじめましてコンテンツ開発事業部の渡部と申します。
TECOTECではゲーム、Web、アプリ等の様々なメディアのデザインを担当させていただいております。
新型コロナウイルスの発生以降、さまざまな催し物や手続き等のオンライン化が急速に進んでいます。
弊社でもSlackやZoom等でオンラインでミーティングをする機会が増えました。
[Snap Camera]
Snap Camera - Snap Camera
Zoomを利用したミーティングであればSnap Cameraを使って配信の映像に様々なビジュアルエフェクトを加えることができます。
このビジュアルエフェクトをSnap CameraではLensと呼称されてますがLens自作できないかと思いました。
なおスマホ版はSnap Chatというアプリで提供されてますが、こちらのほうが有名かもしれませんね。
[作るもの]
今回は自分の顔の動きに3Dオブジェクトが追従するLensを作成します。
Blenderで3Dのオブジェクト作りました。
これをFBX形式でエクスポートします。
[Lens Studio]
Lens Studio - Lens Studio by Snap Inc.
Lensを開発するために必要な環境がLens Studioです。
Lens StudioはSnap CameraのLensを作成するために必要な機能がコンパクトかつ分かりやすくコンポーネント化されてます。
UIがUnityが似ているのでUnityを触った経験がある方には分かりやすいかと思います。
チュートリアルに沿って開発したり、ドキュメントを読みながら完全に新規に作成するのもいいですが、Lens Studioには様々なテンプレートが存在するのでそれらのテンプレートの中身を改造してLensを開発すると手っ取り早く理解が深まるかと思います。
今回は作りたいLensに見た目が近い3D Objectsというテンプレートを利用してみることにしました。
[テンプレートの中身を改造する]
画面左上側にObjectsという欄があります。
改造する箇所はFirst Headの中身です。
まずはツリーを展開してFaceObjectContainer [EDIT_ME]を消しましょう。
またSecond Headは使わないので丸ごと消します。
分かりやすくするために画面右側にあるPreviewの画面も一人が映っているものに変えます。
ここではSmile Person1を選びました。
そして上記のBlenderで作った3DオブジェクトをLens Studio内に読み込みます。
画面左下のResourcesの欄内にあるものが現在このプロジェクトで使われている素材です。
＋ボタンをクリックするとプルダウンのメニューが広がるので最下部にあるFrom Filesから3DオブジェクトのFBXを選択します。
するとResourcesの欄内に3Dオブジェクトが追加されます。
ツリーを展開するとPと書かれたアイコンの横にファイル名がありますが、これが操作できる3Dオブジェクト(ObjectPrefab)となります。
これをObjects欄内のFirst Head > Face occuluderの直下にくるようドラッグ＆ドロップします。
Preview欄の隣にあるInspectorで大きさや角度で調整してください。
これで3Dオブジェクトが顔の動きに追従するようになります！
あとは画面左上の方にPublish LensというボタンがあるのでそこからLensを公開できるようになります。
シェア用のURLも発行できます。今回私が作ったものも公開しておりますので是非お試しください。
[今回制作したLens]
https://www.snapchat.com/unlock/?type=SNAPCODE&uuid=2cf9ed54b2464df0ad027b7944d6fcc6&metadata=01
※スマートフォンからのみ直接アクセスできます。PCからご覧いただく場合は上記URLをSnap Cameraの検索窓にコピペしてください。
今回はLens Studioの細かい機能については触れませんでしたが、コード一つ書かずにARのアプリケーションが作れました。
3Dオブジェクトを作れないという方は2D Objectsというテンプレートもあるので画像さえあれば作れます。
Snap CameraにおけるLens Studioのように、InstagramのエフェクトもSpark AR Studioという開発環境があり、Lens Studio同様の操作感でエフェクトを作れますのでそちらも是非お試しください。
