サービス

技能：エンジニア

技能：デザイナー

技能：ビジネス職

技能：バックオフィス

ジャンル

<h2 id="DVRCameraを使うとこんな映像が簡単に作れる">DVRCameraを使うとこんな映像が簡単に作れる！</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/HnNHf32iPV8?rel=0" style="position:absolute;top:0;left:0;width:100%;height:100%" width="640"></iframe></div>

<p>&nbsp;</p>

<h2 id="あらゆるVRアプリに好きな姿でダイブできるDMM-VR-Connect連載-3">あらゆるVRアプリに好きな姿でダイブできるDMM VR Connect連載 #3</h2>

<p>あらゆるVRアプリに好きな姿で飛び込みたい！<br />
そう思ったこと、一度はありますよね？<br />
そんな世界を実現する<a href="https://bit.ly/2S7ExKt" target="_blank">DMM VR Connect</a>とそのSDKについて、技術者目線で開発メンバーが全六回の連載でご紹介します。<br />
三回目となる今回は、<a href="https://bit.ly/3ezIleM" target="_blank">DMM VR Connect SDK（DVRSDK)</a>の充実したサンプルについて、<a href="https://bit.ly/3ezIleM" target="_blank">DVRSDK</a>開発チームのクレウスがご紹介します。</p>

<p>前回はこちら▼&nbsp;</p>

<p><a href="https://inside.dmm.com/entry/2021/04/23/DMMVRConnect02">https://inside.dmm.com/entry/2021/04/23/DMMVRConnect02</a><cite><a href="https://inside.dmm.com/entry/2021/04/23/DMMVRConnect02">inside.dmm.com</a></cite></p>

<p id="目次">&nbsp;</p>

<h2 id="自己紹介">自己紹介</h2>

<p><a href="https://github.com/kleusbalut" target="_blank">kleusbalut - Overview｜inside.dmm.com</a></p>

<p>開発チームの<a href="https://twitter.com/kleus_balut" target="_blank">クレウス</a>です。</p>

<p>DMM VR labへは2019年4月に、VRChatなどで使えるVR-SNS用の自作オーバーレイアプリ開発をきっかけにお声がけいただいてJoinしました。</p>

<p>これまで<a href="https://store.steampowered.com/app/1159480/BOW_MAN/" target="_blank">BOW MAN</a>、<a href="https://store.steampowered.com/app/1481430/No_Sushi_No_Life/" target="_blank">No Sushi, No Life</a>の開発に携わり、2021年からはSDKチームで開発に携わっています。</p>

<p>&nbsp;</p>

<h2 id="DMM-VR-ConnectはあらゆるVRアプリに好きな姿で飛び込めるサービス">DMM VR ConnectはあらゆるVRアプリに好きな姿で飛び込めるサービス</h2>

<p>&nbsp;</p>

<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><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></p>

<p><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>

<p>&nbsp;</p>

<h2 id="DMM-VR-Connect-SDKでアバターを読み込んだ後何をする">DMM VR Connect SDKでアバターを読み込んだ後、何をする？</h2>

<p>前回の連載で、SDKを利用したアバターの読み込みをご紹介しました。</p>

<p>プレイヤーとなるVRMアバターを読み込んだら、例えばゲームでは主人公として、アプリでは自アバターとして使いたいと思います。</p>

<p>&nbsp;</p>

<figure title="ゲーム/アプリ例"><img alt="" height="244" src="https://image.dmm-corp.com/kyiz8aomtnw6y5v2qwv4isr18ud2" width="400" />　<img alt="" height="518" src="https://image.dmm-corp.com/3bs94vyq2ll7uldsu6zgy0lnb6jk" width="300" />
<figcaption>
<p>左:&nbsp;<a href="https://store.steampowered.com/app/1481430/No_Sushi_No_Life/" target="_blank">No Sushi, No Life</a>&nbsp;右: 筆者のアプリ</p>
</figcaption>
</figure>

<p>&nbsp;</p>

<p>今回は一例として、VRゲームで使う場合を想定しましょう。</p>

<p>VRゲームでアバターを使って配信する場合、主観視点をそのまま配信したり、視聴したりすることはあまりないと思います。 アバターを読み込み表示できたら、アバターが見える状態の第三者視点で見てほしいですし、何より、他者の主観視点をそのまま画面で見ていると、ある種の「酔い」が発生します。</p>

<p>ここで、アバターが見える第三者視点カメラが欲しくなってきます。</p>

<p>&nbsp;</p>

<h2 id="DMM-VR-Connect-SDKでは様々なサンプルを用意している">DMM VR Connect SDKでは様々なサンプルを用意している</h2>

<p>DMM VR Connect SDK(以下、DVRSDK)には様々なサンプルが同梱されており、現在は下記の4種類のコンポーネントとサンプルが使用可能です。</p>

<p>今回は、そのコンポーネントの一つである<b>DVRCamera</b>の使い方を簡単にご紹介します。</p>

<p>&nbsp;</p>

<figure title="DMM meetup スライド"><img alt="" height="453" src="https://image.dmm-corp.com/7s8fi8ds7p9b8rftsbbud8ac0lmi" width="800" />
<figcaption>
<p><a href="https://speakerdeck.com/sh_akira/ling-he-zui-xin-ban-yi-falsemamanishen-ti-wodong-kasukiyariburesiyon?slide=47:title" target="_blank">【令和最新版】意のままに身体を動かすキャリブレーション - Speaker Deck</a></p>
</figcaption>
</figure>

<p>&nbsp;</p>

<ul>
	<li>DVRAuth (Connectの認証)</li>
	<li>DVRStreaming (Unityから直接RTMP配信)</li>
	<li><b>DVRCamera</b>&nbsp;(第三者視点カメラ等)</li>
	<li>DVRAvatar (VRMの様々な制御)</li>
</ul>

<p>&nbsp;</p>

<h2 id="DVRCameraでカメラの実装を簡単に">DVRCameraでカメラの実装を簡単に</h2>

<p>&nbsp;</p>

<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/HnNHf32iPV8?rel=0" style="position:absolute;top:0;left:0;width:100%;height:100%" width="640"></iframe></div>

<p>基本的にコーディングは必要ありません。 UnityEditorのInspectorとScene上の操作だけで、手軽にカメラを操作することができます。</p>

<p>&nbsp;</p>

<h2 id="DVRCameraの使い方">DVRCameraの使い方</h2>

<p>DVRSDK Ver1.5.0 以降、下記の場所に今回の映像を作成したサンプルシーンが同梱されていますが、それぞれがどのような動きをするか、ワンカットずつ掘り下げて説明していきます。</p>

<p>Assets/DVRSDK/Examples/DVRCamera/Scenes</p>

<p>DVRCameraを使うための全体設定と、各シーン(カット)ごとの設定は<b>CameraManager</b>へ、 カメラの動きに関する設定は<b>DVRCamera</b>へそれぞれ設定します。</p>

<p>&nbsp;</p>

<figure title=""><img alt="" height="211" src="https://image.dmm-corp.com/46r0l1suoutn99bg9lxs17kvmq9q" width="388" />
<figcaption>
<p>CameraManagerはシーン(カット)ごとの設定を、DVRCameraはカメラの動きの設定を行う</p>
</figcaption>
</figure>

<p>&nbsp;</p>

<p>下記で簡単に説明をしていきますが、Unity上でサンプルシーンを開きながら見ていくと、どのような動きをするか分かりやすいと思うのでオススメです。</p>

<p>下記の例は、ワイプ以外は<b>DVRCamera</b>へ使いたい機能のコンポーネントを付ける形で設定します。</p>

<h3 id="指定した座標間を移動する等速">指定した座標間を移動する(等速)</h3>

<figure title=""><img alt="" height="234" src="https://image.dmm-corp.com/u718yzao306pntslwo6y957q7iwd" width="416" /></figure>

<p>&nbsp;</p>

<p>よく映画で見るようなカメラワークですね。 説明の都合上、「A点からB点間」となっていますが、実はカメラは3点の間で移動しています。</p>

<p>&nbsp;</p>

<figure title=""><img alt="" height="343" src="https://image.dmm-corp.com/ne1ghpjqkmdsacnxzp0ktg7axw7r" width="400" />
<figcaption>
<p>3点の座標を上から見た図</p>
</figcaption>
</figure>

<p>&nbsp;</p>

<p>DVRCamera1の&quot;MovingCamera&quot;のTransformsに、カメラが移動してほしい場所を指定すると、TotalTimeで設定した秒数まで等速で移動します。</p>

<p>&nbsp;</p>

<figure title=""><img alt="" height="211" src="https://image.dmm-corp.com/04rbx5fj47cy5z0bcquxt1suvf9z" width="388" /></figure>

<h3 id="ワイプする">ワイプする</h3>

<figure title=""><img alt="" height="234" src="https://image.dmm-corp.com/b1lfdsza43g6rmk4hu5fpdaal526" width="416" /></figure>

<p>&nbsp;</p>

<p>ワイプの設定は、<b>CameraManager</b>のSceneList&rarr;CameraListで下記のように行うことで実現できます。</p>

<figure title=""><img alt="" height="267" src="https://image.dmm-corp.com/le74penhaew5ylqna0g6i8ite2fe" width="400" />
<figcaption>
<p>CameraListの項目を設定する</p>
</figcaption>
</figure>

<p>&nbsp;</p>

<p>メインの画面として使うカメラの設定はそのままにして、ワイプとして使う、2番目のカメラの値を変更します。</p>

<p>この部分は実は、UnityのCameraのViewport Rectと同じです。 画面の比率等にもよるのですが、上記のように設定すれば右上にワイプとして表示されます。</p>

<p>&nbsp;</p>

<figure title="Viewport Rect"><img alt="" height="454" src="https://image.dmm-corp.com/xqmkqyi8nj6jd9boyyj1qv6ywe12" width="400" />
<figcaption>
<p>UnityのCameraのViewport Rect設定と同じ</p>
</figcaption>
</figure>

<h3 id="ズームする">ズームする</h3>

<figure title=""><img alt="" height="234" src="https://image.dmm-corp.com/d7n0skwap010lz2gar77lni1tbye" width="416" /></figure>

<p>&nbsp;</p>

<p>DVRCamera5 のPosition/Rotationと、&quot;ZoomingCamera&quot;の設定のみで実現できます。</p>

<p>&nbsp;</p>

<figure title=""><img alt="" height="114" src="https://image.dmm-corp.com/wep42j46nxqtupjgd1lekjyh746q" width="544" /></figure>

<p>&nbsp;</p>

<p>この設定ではFOV60からFOV25まで4秒かけて変化します(FOVが低い側がズームです)。</p>

<h3 id="番外編ゾリーする">(番外編)ゾリーする</h3>

<figure title=""><img alt="" height="234" src="https://image.dmm-corp.com/h2h0uh275nafzq6mb4cugqimq34n" width="416" /></figure>

<p>&nbsp;</p>

<p>これは番外編ですが、上記の「指定した座標間を移動する」と「ズームする」を組み合わせることによって「ゾリ－(ドリーズーム)」を実現できます。</p>

<p>&nbsp;</p>

<figure title=""><img alt="" height="257" src="https://image.dmm-corp.com/b9mdxwet7vkhuztno67gim9dwjl4" width="400" />
<figcaption>
<p>2つのコンポーネントを組み合わせている</p>
</figcaption>
</figure>

<p>&nbsp;</p>

<p>ズームしながら対象から等速で離れることによって動的にFOVが変化し、対象人物の表情を印象的に映す手法ですね。</p>

<p>映画「ジョーズ」やヒッチコック監督作品で見る演出です。</p>

<p><a href="https://en.wikipedia.org/wiki/Dolly_zoom" target="_blank">Dolly zoom - Wikipedia</a></p>

<p>&nbsp;</p>

<h2 id="まとめ">まとめ</h2>

<p>DVRCameraを使えば、UnityEditorのInspectorとScene上の操作だけで手軽にカメラを操作することができます。 今後も継続してアップデートを行っていく予定です。</p>

<p>このように、<a href="https://bit.ly/3ezIleM" target="_blank">DVRSDK</a>を使うとアバターやVRゲーム/アプリ開発に関する様々なことを手軽に実装することができます。</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">https://devs.connect.vrlab.dmm.com/?utm_source=inside_3&amp;utm_medium=referral&amp;utm_campaign=dvrsdk_spring</a></p>

<p><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>&nbsp;</p>

<p>もし実装で困った時は、DMM VR lab公式DiscordサーバーのDMM VR lab Communityで気軽にお問い合わせください！</p>

<p><a href="https://discord.com/invite/cMHTQJprVV" target="_blank">Discord - A New Way to Chat with Friends &amp; Communities｜inside.dmm.com</a></p>


Unityでカメラを動かしてアバターを魅せられる DMM VR Connect #3

シェア

関連する求人

関連する記事