サービス

技能：エンジニア

技能：デザイナー

技能：ビジネス職

技能：バックオフィス

ジャンル

<h2 id="DMM-VR-ConnectのマイアバターをLooking-Glass-Portraitに表示するアプリをつくる">DMM VR ConnectのマイアバターをLooking Glass Portraitに表示するアプリをつくる</h2>

<p style="text-align:center"><img alt="" height="416" src="https://image.dmm-corp.com/dex4q0a5rftxgg3ht5yqf77ki5m9" width="234" /></p>

<h3 id="あらゆるVRアプリに好きな姿でダイブできるDMM-VR-Connect連載-6">あらゆるVRアプリに好きな姿でダイブできるDMM VR Connect連載 #6</h3>

<p>あらゆるVRアプリに好きな姿で飛び込みたい！ そう思ったこと、一度はありますよね？ そんな世界を実現するDMM VR ConnectとそのSDKについて、技術者目線で開発メンバーが全六回の連載でご紹介します。 最終回となる今回は、DMM VR ConnectがUnity製のものなら何でも組み込めるということで、その可能性についてご紹介すべく、いま巷で話題のLooking Glass Portraitでアバターを表示するアプリの開発方法をご紹介します。</p>

<h3 id="自己紹介">自己紹介</h3>

<p><a href="https://github.com/kleusbalut" target="_blank">kleusbalut - Overview｜github.com</a></p>

<p><a href="https://inside.dmm.com/entry/2021/04/30/DMMVRConnect03">DMM VR Connect連載 #3</a>に引き続き、今回も<a href="https://bit.ly/3ezIleM" target="_blank">DVRSDK</a>開発チームの<a href="https://twitter.com/kleus_balut" target="_blank">クレウス</a>が担当させていただきます。よろしくお願いします。</p>

<h2 id="DMM-VR-ConnectはあらゆるVRアプリに好きな姿で飛び込めるサービス">DMM VR ConnectはあらゆるVRアプリに好きな姿で飛び込めるサービス</h2>

<div class="youtube-embed-wrapper" style="position:relative;padding-bottom:56.25%;padding-top:30px;height:0;overflow:hidden"><iframe allowfullscreen="" frameborder="0" height="480" src="https://www.youtube-nocookie.com/embed/saMNJx9HJvM?rel=0" style="position:absolute;top:0;left:0;width:100%;height:100%" width="640"></iframe></div>

<p><cite><a href="https://www.youtube.com/watch?v=saMNJx9HJvM" target="_blank">www.youtube.com</a></cite></p>

<p><a href="https://connect.vrlab.dmm.com/?utm_source=inside_3&amp;utm_medium=referral&amp;utm_campaign=dvrsdk_spring" target="_blank">リンク切れ｜https://connect.vrlab.dmm.com/?utm_source=inside_3&amp;utm_medium=referral&amp;utm_campaign=dvrsdk_spring</a><cite><a href="https://connect.vrlab.dmm.com/?utm_source=inside_3&amp;utm_medium=referral&amp;utm_campaign=dvrsdk_spring" target="_blank">connect.vrlab.dmm.com</a></cite></p>

<h2 id="話題のLooking-Glass-Portraitとは">話題のLooking Glass Portraitとは</h2>

<p><a href="https://lookingglassfactory.com/looking-glass-portrait" target="_blank">Looking Glass Portrait</a></p>

<p>この記事を見られている方にはご存じの方も多いと思うのですが、<a href="https://lookingglassfactory.com/" target="_blank">Looking Glass</a>という、立体表示ディスプレイがあります。</p>

<p>今回話題になっているのはこの最新版で、ポートレート(人物)表示に特化したモデルです。</p>

<p><a href="https://www.kickstarter.com/projects/lookingglass/looking-glass-portrait" target="_blank">Looking Glass Portrait｜https://www.kickstarter.com/projects/lookingglass/looking-glass-portrait</a></p>

<p>Kickstarterで2020年12月頃にファンディングが開始され、すぐにゴールに達成しました。</p>

<p>公式が提案している使い方としてはPV映像のとおり、リアルの人物をiPhoneアプリで撮影して深度画像を作成し、それを転送して立体フォトスタンドとして使う形ですが、日本国内ではKickstarterが始まった早期から、VRアバターとの親和性の高さが話題になっていました。</p>

<p>そしてついに、2021年5月6日からKickstarterでバックした人向けに配達され始め、筆者のもとにも届いたので、早速触りまくっています。</p>

<h2 id="Looking-Glass-PortraitにDVRSDKでアバターを簡単にロードして立体表示する">Looking Glass PortraitにDVRSDKでアバターを簡単にロードして立体表示する</h2>

<p>さてここからが本題です。Looking GlassにはUnity Pluginが用意されているので、DVRSDKを使ってアバターを簡単にロードして立体表示することができます。</p>

<p>※以前の記事と被る部分がありますので、一部説明は割愛させていただきます。</p>

<h4 id="Looking-Glass-PortraitをPCに接続する">Looking Glass PortraitをPCに接続する</h4>

<p>あらかじめ<a href="https://lookingglassfactory.com/software" target="_blank">こちら</a>から<code><span style="background-color:#ffa800;">HoloPlay Service</span></code>をダウンロードしてインストールしておいてください。</p>

<p>※要LookingGlassアカウント登録</p>

<h4 id="Unityプロジェクトを作りDVRSDKを入れてクライアントIDの設定をする">Unityプロジェクトを作り、DVRSDKを入れてクライアントIDの設定をする</h4>

<p>準備については以前の記事を参照ください。</p>

<p>DVRSDKをインポートする際のImport Packageの画面で選択する項目も含めて、同一の内容で設定してください。</p>

<p><a href="https://inside.dmm.com/entry/2021/04/23/DMMVRConnect02" target="_blank">VRでも簡単な認証でユーザーのVRMアバターをロードできる DMM VR Connect #2｜inside.dmm.com</a></p>

<ul>
	<li>既に<a href="https://devs.connect.vrlab.dmm.com/" target="_blank">DMM VR Connect for Devs</a>の登録/クライアントIDの登録が済んでいる方: 記事中の<code><span style="background-color:#ffa800;">ステップ2</span></code>から参照してください。</li>
	<li><a href="https://devs.connect.vrlab.dmm.com/" target="_blank">DMM VR Connect for Devs</a>でクライアントIDの登録がまだの方: 記事中の<code><span style="background-color:#ffa800;">ステップ1</span></code>から参照してください。</li>
</ul>

<h4 id="Unityプロジェクトに-HoloPlay-SDK-を入れる">Unityプロジェクトに HoloPlay SDK を入れる</h4>

<p><a href="https://lookingglassfactory.com/software" target="_blank">こちら</a>から<code><span style="background-color:#ffa800;">HoloPlay Unity Plugin for the Looking Glass</span></code>をダウンロードしてUnityプロジェクトへImportしてください。</p>

<p>※要LookingGlassアカウント登録</p>

<h4 id="HoloPlay-Captureオブジェクトをシーンに置く">HoloPlay Captureオブジェクトをシーンに置く</h4>

<p>[Assets/Holoplay/Prefabs]にある<code><span style="background-color:#ffa800;">Holoplay Capture</span></code>をシーン上にドラッグ&amp;ドロップします。</p>

<p><img alt="" height="152" src="https://image.dmm-corp.com/jkfux7twzyg049svdhrbrcp9xrd9" width="293" /></p>

<p>これがLookingGlass表示用の立体カメラになります。</p>

<p>Sizeの値を0.8にしてください。これが表示スケールの設定になります。</p>

<p><img alt="" height="118" src="https://image.dmm-corp.com/ihfu431cwgdgrg0ku5m6arn6sd3v" width="320" /></p>

<h4 id="HoloPlay-Captureの詳細設定をする">HoloPlay Captureの詳細設定をする</h4>

<p>シーン上に置いたHoloPlay Captureの<code><span style="background-color:#ffa800;">Toggle Preview Ctrl + E</span></code>ボタンを押して、LookingGlassPortraitに画面出力できるか確認してみてください。</p>

<p><img alt="" height="289" src="https://image.dmm-corp.com/3sibalt3xej30ap72silf586xdkv" width="320" /></p>

<p>※この段階ではシーン上に何も配置されていないので、黒い画面が映ると思います。表示されているのがPCのデスクトップ画面でなければOKです。</p>

<p>無事に画面出力ができたら、UnityEditor上の<code>Game</code>タブを選択して、LookingGlassPortraitが表示されているディスプレイを確認してください。</p>

<p><img alt="" height="53" src="https://image.dmm-corp.com/5yxii91fpb1cmo50vtwl3owqnhd6" width="320" /></p>

<p>ここで確認したディスプレイを、HoloPlay Captureの<code><span style="background-color:#ffa800;">Target Display</span></code>に設定します。</p>

<p><img alt="" height="289" src="https://image.dmm-corp.com/6gq896jlpgj23zxcx6xjzzluq4bn" width="320" /></p>

<p>※この手順を行わないと、操作画面がLookingGlassPortraitの画面で上書きされ、DVRSDKで初回ログインができません。</p>

<h4 id="お好みのIdleアニメーションを入れる">お好みのIdleアニメーションを入れる</h4>

<p>このままPlayするとTポーズで立った状態になってしまうので、<a href="https://assetstore.unity.com/" target="_blank">Unity Asset Store</a>等でお好みのIdleアニメーションをダウンロードしてImportしておいてください。</p>

<p><img alt="" height="429" src="https://image.dmm-corp.com/j4dqilg0tqg9d5hotobzaunwiqlo" width="320" /></p>

<p>※筆者は本記事向けに<a href="https://www.mixamo.com/" target="_blank">Mixamo</a>で作成しましたが、Import時に設定しなければならない項目が多いので、<a href="https://assetstore.unity.com/" target="_blank">Unity Asset Store</a>にあるものを使うのがお手軽でおすすめです。</p>

<p>プロジェクト上の任意の場所に新規でAnimator Controllerを作り、その中にIdleアニメーションをドラッグ&amp;ドロップしておきます。</p>

<p><img alt="" height="198" src="https://image.dmm-corp.com/du7xu8w80oyrn978o5uu9t2nu2r4" width="320" /></p>

<h4 id="アバター読込時の設定等を行うスクリプトを入れる">アバター読込時の設定等を行うスクリプトを入れる</h4>

<p><a href="https://github.com/kleusbalut/dvrsdk-inside6-packages/releases" target="_blank">こちらのUnity Package</a>をダウンロードしてImportしてください。</p>

<p><a href="https://github.com/kleusbalut/dvrsdk-inside6-packages/releases" target="_blank">Releases &middot; kleusbalut/dvrsdk-inside6-packages｜github.com</a></p>

<p>Import後、[Assets/DVRSDK/Examples/LookingGlassPortrait/Prefabs]にある<code><span style="background-color:#ffa800;">LookingGlassPortraitScript</span></code>のPrefabを、ヒエラルキーに配置してください。</p>

<p><code><span style="background-color:#ffa800;">Looking Glass Portrait Script</span></code>の<code><span style="background-color:#ffa800;">DMMVR Connect UI</span></code>と<code><span style="background-color:#ffa800;">Holoplay</span></code>に、それぞれヒエラルキー上のGame Objectをドラッグ&amp;ドロップします。</p>

<p><img alt="" height="92" src="https://image.dmm-corp.com/1qpwkcytpj9qd1073qgqh4rpznxf" width="320" /></p>

<p><code><span style="background-color:#ffa800;">Looking Glass Portrait Script</span></code>の<code><span style="background-color:#ffa800;">Animator Controller</span></code>に、ひとつ前のステップで用意したAnimator Controllerを設定してください。</p>

<p><img alt="" height="76" src="https://image.dmm-corp.com/khuazdv8ul6q0k7xtaingavr9yam" width="320" /></p>

<h4 id="完成">完成！</h4>

<p>ここまで設定できたら、Unity Editor上で<code><span style="background-color:#ffa800;">Play</span></code>してみましょう。</p>

<p>Gameタブの<code><span style="background-color:#ffa800;">Display</span></code>をDisplay1に設定して、DVRSDKの初回ログインをします。</p>

<p><img alt="" height="62" src="https://image.dmm-corp.com/ju0xh6shxls4jx7053ikj2632alb" width="320" /></p>

<p>ログインして、アバターが表示されたら完成です。お疲れさまでした！</p>

<p><img alt="" height="416" src="https://image.dmm-corp.com/uvxqyvvupbd3b69yc3206oovre8a" width="234" /></p>

<p>アプリができたらぜひスマホで撮影して、Twitter等で&nbsp;<a href="https://twitter.com/intent/tweet?text=%23LookingGlassPortrait%20%23DVRSDK%20%23DMMVRConnect" target="_blank">#LookingGlassPortrait #DVRSDK #DMMVRConnect</a>&nbsp;ハッシュタグでつぶやいてください！</p>

<h2 id="Looking-Glass-Portrait関連の逆引きQAはこちら">Looking Glass Portrait関連の逆引きQ&amp;Aはこちら</h2>

<p><a href="https://qiita.com/kleus_balut/items/fea229abcfca1654e40a" target="_blank">LookingGlass Portrait 逆引きQ&amp;A ｜Qiita</a></p>

<p>筆者が遭遇したトラブル等を逆引き形式でこちらにまとめていますので、もしよければ合わせてご覧ください。 編集リクエストも大歓迎です。</p>

<h2 id="まとめ">まとめ</h2>

<p>このように、<a href="https://bit.ly/3ezIleM" target="_blank">DVRSDK</a>を使うと、アバターやVRゲーム/アプリ開発に関する様々なことを手軽に実装することができます。</p>

<p>今回は、今話題のLooking Glass PortraitでDMM VR Connectを使ってアバターを表示してみましたが、Unityで扱えるものであれば、ほぼ何でも使えます。</p>

<p>ぜひ皆さんもデベロッパー登録してアプリを作ってみてくださいね。</p>

<p><a href="https://devs.connect.vrlab.dmm.com/?utm_source=inside_3&amp;utm_medium=referral&amp;utm_campaign=dvrsdk_spring" target="_blank">リンク切れ</a><cite><a href="https://devs.connect.vrlab.dmm.com/?utm_source=inside_3&amp;utm_medium=referral&amp;utm_campaign=dvrsdk_spring" target="_blank">devs.connect.vrlab.dmm.com</a></cite></p>

<p>もし実装で困った時は、DMM VR lab公式DiscordサーバーのDMM VR lab Communityで気軽にお問い合わせください！</p>

<p><a href="https://discord.gg/cMHTQJprVV" target="_blank">リンク切れ｜discord.gg</a></p>

<p>※LookingGlassPortraitについては、<a href="https://discord.com/invite/lookingglassfactory" target="_blank">LookingGlassの公式Discordサーバー</a>にお問い合わせをお願いします。</p>


Looking Glass Portraitで3Dアバターを表示するアプリ開発！Unity製ならなんでも組み込めるDMM VR Connect #6

シェア

関連する求人

関連する記事