<h1 id="ar%E3%82%B0%E3%83%A9%E3%82%B9%E5%90%91%E3%81%91%E3%81%AE%E8%A4%87%E6%95%B0%E6%A9%9F%E8%83%BD%E3%82%92%E5%90%AB%E3%82%80%E3%83%87%E3%83%A2%E7%94%A8%E3%82%A2%E3%83%97%E3%83%AA%E3%82%92%E4%BD%9C%E6%88%90%E3%81%97%E3%81%BE%E3%81%97%E3%81%9F%E3%80%82" data-line="0" class="code-line">
<a class="header-anchor-link" href="#ar%E3%82%B0%E3%83%A9%E3%82%B9%E5%90%91%E3%81%91%E3%81%AE%E8%A4%87%E6%95%B0%E6%A9%9F%E8%83%BD%E3%82%92%E5%90%AB%E3%82%80%E3%83%87%E3%83%A2%E7%94%A8%E3%82%A2%E3%83%97%E3%83%AA%E3%82%92%E4%BD%9C%E6%88%90%E3%81%97%E3%81%BE%E3%81%97%E3%81%9F%E3%80%82" aria-hidden="true"></a> ARグラス向けの複数機能を含むデモ用アプリを作成しました。</h1>
<p data-line="2" class="code-line">Snapdragon Spaces向けのデバイスとして最近はいくつかのデバイスに触れることができます。個人的にもLenovo ThinkReality A3, Lenovo VRX, QONOQ MiRZA を所有しているのですが、各デバイスの特性やSDKの機能検証のためにアプリが欲しくなり作成しました。Snapdragon Spacesの動作検証用として整備しているもので現状はARグラス向けのみ対応しています。<br>
コンテンツとしては以下のようなアプリになります。</p>
<p data-line="5" class="code-line"><span class="embed-block embed-youtube"><iframe src="https://www.youtube-nocookie.com/embed/dyjCIETCc6c" allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen loading="lazy"></iframe></span><a href="https://www.youtube.com/watch?v=dyjCIETCc6c" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://www.youtube.com/watch?v=dyjCIETCc6c</a></p>
<p data-line="7" class="code-line">UnityプロジェクトなどはGithubで公開しています。</p>
<p data-line="9" class="code-line"><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__699169e9c6dd2" src="https://embed.zenn.studio/card#zenn-embedded__699169e9c6dd2" data-content="https%3A%2F%2Fgithub.com%2FTakahiroMiyaura%2FSnapdragonSpacesDemo" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://github.com/TakahiroMiyaura/SnapdragonSpacesDemo" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://github.com/TakahiroMiyaura/SnapdragonSpacesDemo</a></p>
<p data-line="11" class="code-line">本記事はデモ用に作ったこのサンプル機能概要と実装について紹介したいと思います。</p>
<h2 id="%E3%83%87%E3%83%A2%E3%82%B5%E3%83%B3%E3%83%97%E3%83%AB%E3%82%A2%E3%83%97%E3%83%AA%E3%81%AE%E6%A6%82%E8%A6%81" data-line="13" class="code-line">
<a class="header-anchor-link" href="#%E3%83%87%E3%83%A2%E3%82%B5%E3%83%B3%E3%83%97%E3%83%AB%E3%82%A2%E3%83%97%E3%83%AA%E3%81%AE%E6%A6%82%E8%A6%81" aria-hidden="true"></a> デモサンプルアプリの概要</h2>
<p data-line="15" class="code-line">デモサンプルアプリは、ARグラスで利用するSnapdragon Spacesの機能検証を目的に作成したアプリです。Dual Render Fusionをベースとしているためスマホ単体のアプリとしても動作します。</p>
<h3 id="%E3%82%B9%E3%83%9E%E3%83%9B%E4%B8%8A%E3%81%AE%E6%A9%9F%E8%83%BD(%E3%82%B3%E3%83%B3%E3%83%88%E3%83%AD%E3%83%BC%E3%83%A9)" data-line="17" class="code-line">
<a class="header-anchor-link" href="#%E3%82%B9%E3%83%9E%E3%83%9B%E4%B8%8A%E3%81%AE%E6%A9%9F%E8%83%BD(%E3%82%B3%E3%83%B3%E3%83%88%E3%83%AD%E3%83%BC%E3%83%A9)" aria-hidden="true"></a> スマホ上の機能(コントローラ)</h3>
<p data-line="19" class="code-line">スマホは情報表示とコントローラを兼ねています。コントローラはよくあるスマホゲームのタッチスクリーン上でのスティック操作になります。スマホ上で表示されている情報のほとんどはARグラス側には表示されません。ARグラス側は鳥（のような）キャラクタのみが表示されます。</p>
<p data-line="21" class="code-line"><img src="https://res.cloudinary.com/zenn/image/fetch/s--2T8Idojp--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://storage.googleapis.com/zenn-user-upload/deployed-images/6fbee06cdc1797a75b5b2b0a.png%3Fsha%3D08fd4d987fd53b6288f791c9a987936efe84fb67" loading="lazy" class="md-img"></p>
<ol data-line="23" class="code-line">
<li data-line="23" class="code-line">キャラクタ用コントローラスティック</li>
<li data-line="24" class="code-line">カメラ視点操作用スティック</li>
<li data-line="25" class="code-line">ジャンプボタン</li>
<li data-line="26" class="code-line">設定の表示/非表示</li>
</ol>
<h3 id="%E8%A8%AD%E5%AE%9A" data-line="28" class="code-line">
<a class="header-anchor-link" href="#%E8%A8%AD%E5%AE%9A" aria-hidden="true"></a> 設定</h3>
<p data-line="30" class="code-line">スマホ画面上の歯車アイコンをタップすると設定を開くことができます。設定については永続化されます。</p>
<ul data-line="32" class="code-line">
<li data-line="32" class="code-line">OpenXR系の設定<br>Snapdragon Spaces SDKの機能の１つ[Dynamic OpenXR Loader]の設定をアプリ上で行えます。[Auto Srat On Display Connect]をオンにすると、ARグラスをつなぐと自動的にOpenXRが有効になりARグラス側にコンテンツが表示されます。オフの場合は、その下部にある[Start][Stop]によって手動で操作することが可能です。<br><img src="https://res.cloudinary.com/zenn/image/fetch/s--j0T5R_GN--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://storage.googleapis.com/zenn-user-upload/deployed-images/052b8b0bb6f2807f900f14a6.png%3Fsha%3D329f505e985360458bf347e870a5fe92ef986b0c" loading="lazy" class="md-img">
</li>
<li data-line="33" class="code-line">Hand Tracking設定<br>ハンドトラッキングの有効/無効を設定します。左右それぞれ変更可能です。ハンドトラッキングはSnapdragon Spacesの機能ではなくMRTK3を経由してUnityのXRHandsを利用しています。<br><img src="https://res.cloudinary.com/zenn/image/fetch/s--x33KDYfr--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://storage.googleapis.com/zenn-user-upload/deployed-images/fcf396157efb797b9adcfd94.png%3Fsha%3D6d8fa95f61ef0445b2108995de01e9b6799bc5fd" loading="lazy" class="md-img">
</li>
<li data-line="34" class="code-line">各種デバッグ情報の表示<br>Dynamic OpenXR LoaderによるARグラスの状態、スマホの解像度、スマホカメラのTransform等の情報表示が可能です。<br>
<img src="https://res.cloudinary.com/zenn/image/fetch/s--dh_yC8ES--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://storage.googleapis.com/zenn-user-upload/deployed-images/c0db9c7adf23643fed346553.png%3Fsha%3D065e94591f1face81768680fd3219298a96cc563" loading="lazy" class="md-img">
</li>
</ul>
<h3 id="%E3%82%A2%E3%83%97%E3%83%AA%E3%81%AE%E5%8B%95%E4%BD%9C" data-line="37" class="code-line">
<a class="header-anchor-link" href="#%E3%82%A2%E3%83%97%E3%83%AA%E3%81%AE%E5%8B%95%E4%BD%9C" aria-hidden="true"></a> アプリの動作</h3>
<p data-line="39" class="code-line">アプリケーションは大きく２つの動きをします。１つはスマホ単体のアプリとしての動作と、ARグラスをつないでARコンテンツとして体験する場合の２つです。</p>
<ul data-line="41" class="code-line">
<li data-line="41" class="code-line">スマホアプリとしての動作<br>キャラクタをスティック操作で浮島上を歩かせることができます。Dual Render Fusionの機能により普通のスマホアプリとして動作するフェーズです。<br>
<img src="https://res.cloudinary.com/zenn/image/fetch/s--6ukoQmkG--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://storage.googleapis.com/zenn-user-upload/deployed-images/1f9c70aea403fc706fd11969.png%3Fsha%3D5d4e0fbf2771fe9e25976177d6fdb1db2e4a6855" loading="lazy" class="md-img">
</li>
<li data-line="43" class="code-line">ARアプリとしての動作<br>ARグラスを接続し、Dynamic OpenXR Loaderを利用してOpenXRを開始状態にするとARコンテンツとして起動します。Spatial Mesh機能により現実空間にキャラクターが干渉するように作っています。つまり床や机の上をキャラクターが移動できるというコンテンツです。操作はスマホのスティックコントローラで行います。また、ハンドトラッキング機能を有効にしている場合はキャラクタを移動させることも可能です。<br><img src="https://res.cloudinary.com/zenn/image/fetch/s--HciuB9nR--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://storage.googleapis.com/zenn-user-upload/deployed-images/8958a4a02d3b5906d0e90b72.png%3Fsha%3Dcd4e85cff6d1cd77cf4d7afa420bd35c7405e9a5" loading="lazy" class="md-img"><br>スマホの画面には空間認識したメッシュの情報を可視化して表示します。合わせてARグラス視点の映像も表示しています。</li>
</ul>
<h2 id="%E5%AE%9F%E8%A3%85%E6%B8%88%E3%81%BFsnapdragon-spaces%E6%A9%9F%E8%83%BD" data-line="45" class="code-line">
<a class="header-anchor-link" href="#%E5%AE%9F%E8%A3%85%E6%B8%88%E3%81%BFsnapdragon-spaces%E6%A9%9F%E8%83%BD" aria-hidden="true"></a> 実装済みSnapdragon Spaces機能</h2>
<p data-line="47" class="code-line">このコンテンツでは主に以下のSnapdragon Spacesの機能を利用しています。</p>
<ul data-line="49" class="code-line">
<li data-line="49" class="code-line">Dual Render Fusion</li>
<li data-line="50" class="code-line">Spatial Meshing</li>
<li data-line="51" class="code-line">Camera Frame Access</li>
<li data-line="52" class="code-line">Dynamic OpenXR Loader</li>
</ul>
<h2 id="%E5%AE%9F%E8%A3%85%E8%A7%A3%E8%AA%AC" data-line="54" class="code-line">
<a class="header-anchor-link" href="#%E5%AE%9F%E8%A3%85%E8%A7%A3%E8%AA%AC" aria-hidden="true"></a> 実装解説</h2>
<p data-line="56" class="code-line">Githubに公開しているUnityプロジェクトについて簡単に解説します。実装方法の詳細については随時必要に応じて追加予定です。</p>
<h3 id="%E9%96%8B%E7%99%BA%E7%92%B0%E5%A2%83" data-line="58" class="code-line">
<a class="header-anchor-link" href="#%E9%96%8B%E7%99%BA%E7%92%B0%E5%A2%83" aria-hidden="true"></a> 開発環境</h3>
<ul data-line="60" class="code-line">
<li data-line="60" class="code-line">Unity 2022.3.36f1</li>
<li data-line="61" class="code-line">Snapdragon Spaces SDk V1.0.1</li>
<li data-line="62" class="code-line">Mixed Reality Toolkit 3
<ul data-line="63" class="code-line">
<li data-line="63" class="code-line">org.mixedrealitytoolkit.core: 3.2.2</li>
<li data-line="64" class="code-line">org.mixedrealitytoolkit.input: 3.2.2</li>
<li data-line="65" class="code-line">org.mixedrealitytoolkit.spatialmanipulation: 3.3.1</li>
<li data-line="66" class="code-line">org.mixedrealitytoolkit.standardassets: 3.2.0</li>
<li data-line="67" class="code-line">org.mixedrealitytoolkit.uxcomponents: 3.3.0</li>
<li data-line="68" class="code-line">org.mixedrealitytoolkit.uxcore: 3.2.2</li>
</ul>
</li>
<li data-line="69" class="code-line">MRTK Graphics Tools 0.7.1</li>
</ul>
<h3 id="unity%E3%83%97%E3%83%AD%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88" data-line="71" class="code-line">
<a class="header-anchor-link" href="#unity%E3%83%97%E3%83%AD%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88" aria-hidden="true"></a> Unityプロジェクト</h3>
<p data-line="73" class="code-line">以下がサンプルのUnityプロジェクトの構成になっています。Snapdragon Spacesの機能を制御するためにいくつか実装や部品を構築しています。</p>
<p data-line="75" class="code-line"><img src="https://res.cloudinary.com/zenn/image/fetch/s--Px60IBXk--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://storage.googleapis.com/zenn-user-upload/deployed-images/5eb9d17b66e4c4bf51c8f08a.png%3Fsha%3Dd4eed61c3b18670b72d5e7202b00b6fdc1b5e6df" loading="lazy" class="md-img"></p>
<ol data-line="77" class="code-line">
<li data-line="77" class="code-line">CameraFrameAccesses<br>ARグラスのカメラ映像をRawImageとして書き出します。この実装はSnapdragon SpacesのCamera Frame Accessのサンプルとほぼ同じ実装です。</li>
<li data-line="78" class="code-line">Controllers<br>スマホ上のスクリーンコントローラの部品群です。これらの機能はXRIをベースに構築しています。定義可能なアクション定義については[Canvas Controller Input Actions]で行っています。</li>
<li data-line="79" class="code-line">SpatialMapping<br>空間メッシュに関する部品です。ARMeshManagerを使っているだけなのでこの中にはメッシュとして張り付けるオブジェクトをPrefabで定義しています。</li>
</ol>
<h3 id="%E3%82%B7%E3%83%BC%E3%83%B3" data-line="81" class="code-line">
<a class="header-anchor-link" href="#%E3%82%B7%E3%83%BC%E3%83%B3" aria-hidden="true"></a> シーン</h3>
<p data-line="83" class="code-line">シーンについては以下通りです。今回のサンプルはMRTK3をUIフレームワークとして利用しています。純粋なSnapdragon Spacesとは少し異なる面があります。</p>
<p data-line="85" class="code-line"><img src="https://res.cloudinary.com/zenn/image/fetch/s--P_gHBoNg--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://storage.googleapis.com/zenn-user-upload/deployed-images/9d10118f8fc52d00a408290f.png%3Fsha%3De6811c6a25bd57b0d7e328ccde6504f844d05a3b" loading="lazy" class="md-img"></p>
<h4 id="1.-mrtk-xr-rig-for-snapdragon-spaces" data-line="87" class="code-line">
<a class="header-anchor-link" href="#1.-mrtk-xr-rig-for-snapdragon-spaces" aria-hidden="true"></a> 1. MRTK XR Rig For Snapdragon Spaces</h4>
<p data-line="88" class="code-line">MRTK3で提供されるXR Rigです。基本的は機能はXRIのXR Originと同じです。いくつかSnapdragon Spaces用にカスタマイズしています。1つは空間認識の機能を利用する為にARMeshManagerをCameraOffsetオブジェクト配下に追加しています。また、ハンドトラッキングとスマホのタッチスクリーンを同時に使うためにCanvasProxyInteractorをカスタマイズしています。</p>
<h4 id="2.-playarea" data-line="90" class="code-line">
<a class="header-anchor-link" href="#2.-playarea" aria-hidden="true"></a> 2. PlayArea</h4>
<p data-line="91" class="code-line">ARとスマホ両方で表示されるコンテンツの表示に関するオブジェクトです。今回のコンテンツはキャラクターと床のみ作成しています。</p>
<h4 id="3.-features" data-line="92" class="code-line">
<a class="header-anchor-link" href="#3.-features" aria-hidden="true"></a> 3. Features</h4>
<p data-line="93" class="code-line">コンテンツやSnapdragon Spacesに関する機能群です。Snapdragon Spaces以外の機能としては、メニュー制御、AR側の映像等を作っています。</p>
<h4 id="4.-hostview" data-line="94" class="code-line">
<a class="header-anchor-link" href="#4.-hostview" aria-hidden="true"></a> 4. HostView</h4>
<p data-line="95" class="code-line">スマホの画面のみに表示するオブジェクトをまとめています。今回はDual Render Fusionによってスマホ画面にコントローラや各種情報を表示しています。ほとんどの情報はUGUIで作成しScreen Overlayを利用しています。</p>
<h2 id="%E6%9C%80%E5%BE%8C%E3%81%AB" data-line="97" class="code-line">
<a class="header-anchor-link" href="#%E6%9C%80%E5%BE%8C%E3%81%AB" aria-hidden="true"></a> 最後に</h2>
<p data-line="99" class="code-line">今回はSnapdragon Spacesの検証用に作ったデモアプリの紹介でした。デモアプリの内容や解説については引続き追加していきたいと思います。</p>


Snapdragon Spaces SDK V1.0.0(V1.0.1) with MRTK3 - ARグラス向け機能検証用デモアプリ解説

スマホ上の機能(コントローラ)

ARグラス向けの複数機能を含むデモ用アプリを作成しました。

Discussion