DMM VR ConnectのマイアバターをLooking Glass Portraitに表示するアプリをつくる
あらゆるVRアプリに好きな姿でダイブできるDMM VR Connect連載 #6
あらゆるVRアプリに好きな姿で飛び込みたい！ そう思ったこと、一度はありますよね？ そんな世界を実現するDMM VR ConnectとそのSDKについて、技術者目線で開発メンバーが全六回の連載でご紹介します。 最終回となる今回は、DMM VR ConnectがUnity製のものなら何でも組み込めるということで、その可能性についてご紹介すべく、いま巷で話題のLooking Glass Portraitでアバターを表示するアプリの開発方法をご紹介します。
自己紹介
kleusbalut - Overview｜github.com
DMM VR Connect連載 #3に引き続き、今回もDVRSDK開発チームのクレウスが担当させていただきます。よろしくお願いします。
DMM VR ConnectはあらゆるVRアプリに好きな姿で飛び込めるサービス
リンク切れ｜https://connect.vrlab.dmm.com/?utm_source=inside_3&utm_medium=referral&utm_campaign=dvrsdk_springconnect.vrlab.dmm.com
話題のLooking Glass Portraitとは
この記事を見られている方にはご存じの方も多いと思うのですが、Looking Glassという、立体表示ディスプレイがあります。
今回話題になっているのはこの最新版で、ポートレート(人物)表示に特化したモデルです。
Looking Glass Portrait｜https://www.kickstarter.com/projects/lookingglass/looking-glass-portrait
Kickstarterで2020年12月頃にファンディングが開始され、すぐにゴールに達成しました。
公式が提案している使い方としてはPV映像のとおり、リアルの人物をiPhoneアプリで撮影して深度画像を作成し、それを転送して立体フォトスタンドとして使う形ですが、日本国内ではKickstarterが始まった早期から、VRアバターとの親和性の高さが話題になっていました。
そしてついに、2021年5月6日からKickstarterでバックした人向けに配達され始め、筆者のもとにも届いたので、早速触りまくっています。
Looking Glass PortraitにDVRSDKでアバターを簡単にロードして立体表示する
さてここからが本題です。Looking GlassにはUnity Pluginが用意されているので、DVRSDKを使ってアバターを簡単にロードして立体表示することができます。
※以前の記事と被る部分がありますので、一部説明は割愛させていただきます。
Looking Glass PortraitをPCに接続する
あらかじめこちらからHoloPlay Serviceをダウンロードしてインストールしておいてください。
※要LookingGlassアカウント登録
Unityプロジェクトを作り、DVRSDKを入れてクライアントIDの設定をする
準備については以前の記事を参照ください。
DVRSDKをインポートする際のImport Packageの画面で選択する項目も含めて、同一の内容で設定してください。
VRでも簡単な認証でユーザーのVRMアバターをロードできる DMM VR Connect #2｜inside.dmm.com
- 既にDMM VR Connect for Devsの登録/クライアントIDの登録が済んでいる方: 記事中の
ステップ2から参照してください。 - DMM VR Connect for DevsでクライアントIDの登録がまだの方: 記事中の
ステップ1から参照してください。
Unityプロジェクトに HoloPlay SDK を入れる
こちらからHoloPlay Unity Plugin for the Looking GlassをダウンロードしてUnityプロジェクトへImportしてください。
※要LookingGlassアカウント登録
HoloPlay Captureオブジェクトをシーンに置く
[Assets/Holoplay/Prefabs]にあるHoloplay Captureをシーン上にドラッグ&ドロップします。
これがLookingGlass表示用の立体カメラになります。
Sizeの値を0.8にしてください。これが表示スケールの設定になります。
HoloPlay Captureの詳細設定をする
シーン上に置いたHoloPlay CaptureのToggle Preview Ctrl + Eボタンを押して、LookingGlassPortraitに画面出力できるか確認してみてください。
※この段階ではシーン上に何も配置されていないので、黒い画面が映ると思います。表示されているのがPCのデスクトップ画面でなければOKです。
無事に画面出力ができたら、UnityEditor上のGameタブを選択して、LookingGlassPortraitが表示されているディスプレイを確認してください。
ここで確認したディスプレイを、HoloPlay CaptureのTarget Displayに設定します。
※この手順を行わないと、操作画面がLookingGlassPortraitの画面で上書きされ、DVRSDKで初回ログインができません。
お好みのIdleアニメーションを入れる
このままPlayするとTポーズで立った状態になってしまうので、Unity Asset Store等でお好みのIdleアニメーションをダウンロードしてImportしておいてください。
※筆者は本記事向けにMixamoで作成しましたが、Import時に設定しなければならない項目が多いので、Unity Asset Storeにあるものを使うのがお手軽でおすすめです。
プロジェクト上の任意の場所に新規でAnimator Controllerを作り、その中にIdleアニメーションをドラッグ&ドロップしておきます。
アバター読込時の設定等を行うスクリプトを入れる
こちらのUnity PackageをダウンロードしてImportしてください。
Releases · kleusbalut/dvrsdk-inside6-packages｜github.com
Import後、[Assets/DVRSDK/Examples/LookingGlassPortrait/Prefabs]にあるLookingGlassPortraitScriptのPrefabを、ヒエラルキーに配置してください。
Looking Glass Portrait ScriptのDMMVR Connect UIとHoloplayに、それぞれヒエラルキー上のGame Objectをドラッグ&ドロップします。
Looking Glass Portrait ScriptのAnimator Controllerに、ひとつ前のステップで用意したAnimator Controllerを設定してください。
完成！
ここまで設定できたら、Unity Editor上でPlayしてみましょう。
GameタブのDisplayをDisplay1に設定して、DVRSDKの初回ログインをします。
ログインして、アバターが表示されたら完成です。お疲れさまでした！
アプリができたらぜひスマホで撮影して、Twitter等で #LookingGlassPortrait #DVRSDK #DMMVRConnect ハッシュタグでつぶやいてください！
Looking Glass Portrait関連の逆引きQ&Aはこちら
LookingGlass Portrait 逆引きQ&A ｜Qiita
筆者が遭遇したトラブル等を逆引き形式でこちらにまとめていますので、もしよければ合わせてご覧ください。 編集リクエストも大歓迎です。
まとめ
このように、DVRSDKを使うと、アバターやVRゲーム/アプリ開発に関する様々なことを手軽に実装することができます。
今回は、今話題のLooking Glass PortraitでDMM VR Connectを使ってアバターを表示してみましたが、Unityで扱えるものであれば、ほぼ何でも使えます。
ぜひ皆さんもデベロッパー登録してアプリを作ってみてくださいね。
リンク切れdevs.connect.vrlab.dmm.com
もし実装で困った時は、DMM VR lab公式DiscordサーバーのDMM VR lab Communityで気軽にお問い合わせください！
※LookingGlassPortraitについては、LookingGlassの公式Discordサーバーにお問い合わせをお願いします。
