8thWallでHoloLensアプリを作る

8thwallで HoloLensアプリを作る 2024/03 XRミーティング @takabrz1 Takahiro Miyaura

Microsoft MVP for Mixed Reality 2018-2024 XRは趣味です 宮浦 恭弘 (Miyaura Takahiro) ◼ 大阪駆動開発(とHolomagicians)コミュニティに生息 ◼ HoloLens日本販売してからxR系技術に取組む ◼最近は ✓ ✓ Mixed Reality Toolkit v3.0.0(GAされた！) Snapdragon Spacesとか戯れている。 ◼ 新しい技術や、MRに使えそうな技術を調べる 技術Tips : https://qiita.com/miyaura https://zenn.dev/miyaura @takabrz1 ※よかったらこれを機にお知り合いになってください

• https://qiita.com/miyaura
• https://zenn.dev/miyaura

今日は8thwallやってみた話 @takabrz1 Takahiro Miyaura

先日MR Hackathonで コンテンツを体験してもらうのに8thwallでもつくっていた ○ ポータルにオブジェクトが入る →アプリ使ってる人に同報送信 ○ 情報受信すると →対応するオブジェクトを空間に生成 【今回のポイント】 ポータル転送にありがちな 時空のゆがみを再現した 動画はHoloLens 2のもの 2024/3/20 Copyright © 2024 Takahiro Miyaura 4

先日MR Hackathonで これの出力部分だけ8thwallで書いていた また動かすので体験したい方は 読み込んでください 2024/3/20 Copyright © 2024 Takahiro Miyaura 5

でこれがじつは。。。 HoloLens 2で動きます。 注：HoloLens 2でWebXRは以前から動きます。 今回は8thwallプラットフォーム上のアプリが実は動くという話です。 2024/3/20 Copyright © 2024 Takahiro Miyaura 6

解説記事はこちら 8thWall で HoloLensのコンテンツを作る https://qiita.com/miyaura/items/02000ef65245d67c2663 標準で提供されているハンドまにゅぴ レーションの実装方法 2024/3/20 Copyright © 2024 Takahiro Miyaura 7

• https://qiita.com/miyaura/items/02000ef65245d67c2663

少し前からマルチデバイス対応している 現在はmobile , PC , ヘッドセットの3種類が使える ○ちなみに最近だと8thwall関連でMeta Quest 3の話があったり ✓ナイアンティックとMeta社が、MR領域で提携 Meta Quest 3とスマホの クロスプレイに対応したデモゲームを公開 https://www.moguravr.com/niantic-meta-mr-game/ 2024/3/20 Copyright © 2024 Takahiro Miyaura 8

• https://www.moguravr.com/niantic-meta-mr-game/

（2024/03/22追記） 公式で2021年にはHoloLensもサポート World EffectでHoloLensでも動くアプリが作れます。 ○8th Wall WebAR Moves Beyond the Smartphone with Metaversal Deployment ✓ https://www.8thwall.com/blog/post/59297774102/introducing-reality-engine-8th-wall-webar-moves-beyond-the-smartphone https://youtu.be/c3tVX3aqkxo 2024/3/20 Copyright © 2024 Takahiro Miyaura 9

• https://www.8thwall.com/blog/post/59297774102/introducing-reality-engine-8th-wall-webar-moves-beyond-the-smartphone
• https://youtu.be/c3tVX3aqkxo

8thwallのテンプレートを少しいじって作成 作業も簡単 1. テンプレートをコピー 2. シーンの設定 3. カメラと床の設定 4. オブジェクトの設定 5. 公開 2024/3/20 Copyright © 2024 Takahiro Miyaura 10

テンプレートのコピー A-frameのWorld Effects Templateをクローンする https://www.8thwall.com/8thwall/unitcube-aframe 2024/3/20 Copyright © 2024 Takahiro Miyaura 11

• https://www.8thwall.com/8thwall/unitcube-aframe

シーンの設定 必要な属性だけにする <a-scene landing-page xrextras-loading xrextras-runtime-error xrextras-gesture-detector xrweb="allowedDevices: any“ > 2024/3/20 Copyright © 2024 Takahiro Miyaura ハンドジェスチャーを有効化 全てのデバイスで体験可能 12

カメラと床の設定
各種機能を利用するためのカメラと床の定義を実施
xrextras-hold-dragを使う場合は
カメラのID指定が必要になる

地面が(0,0,0)としてカメラの位置を決める

<a-camera
id="camera"
Raycasterの対象を決める。
この場合はclass属性にcantapがあるオブ
position="0 2 0"
ジェクトが対象
raycaster="objects: .cantap"
cursor="fuse: false; rayOrigin: mouse;">
></a-camera>
xrextras-hold-dragを使う場合は
床に相当するオブジェクトにIDをつける
デバック時にポインタ操作を
<a-plane
id="ground"
マウスで代用するための設定
height="2000"
width="2000"
rotation="-90 0 0"
material="shader: shadow; opacity: 0.67"
shadow>
</a-plane>
2024/3/20

Copyright © 2024 Takahiro Miyaura

13

オブジェクトの設定
ハンド操作を有効にする
今回は移動、サイズ変更、回転を導入
Raycasterの対象

両手操作による回転

<a-box
class="cantap"
ピンチによるサイズ変更
xrextras-two-finger-rotate
xrextras-pinch-scale
xrextras-hold-drag = "riseHeight: .5"
scale="0.5 0.5 0.5"
ホールド操作で移動
position="0 0 -7"
material="
color: #AD50FF; shader: flat;
src: https://cdn.8thwall.com/web/assets/cube-texture.png"
shadow>
</a-box>
2024/3/20

Copyright © 2024 Takahiro Miyaura

14

まとめ 2024/3/20 Copyright © 2024 Takahiro Miyaura 15

まとめ 8thwallでHoloLensアプリを作る 1. 動くのですが・・・・ ✓ 公式でそういった話は聞いたことがない。。。 ⇒公式でWorld Effectsをサポート ✓ 多分、偶然かMeta Quest対応などのマルチデバイス対応のおかげでは？ →今度Discordで聞いてみる。聞いてみたら正式でした。 ✓ 8thwallならではの機能は余り使えない。（デバイスの制約による） 2. 8thwall使えると便利ではある ✓ プロトタイピングなどの用途でブラウザで作って展開できるのはアリでは？ ✓ 最近はサービス連携可能なJavascriptライブラリも色々ありますし (ハッカソンでも使ったSignalR等) ✓ WebXR用にサーバもいらないのでちょっとした検証もこれがあるとやりやすい ✓ 特殊なことしなくてもマルチデバイス対応ができてインストール不要はいい感じ 正式に使えるようになるとそれはそれで面白い World EffectsについてはHoloLensも使えるのでコンテンツ次第では色々使えるかも。 2024/3/20 Copyright © 2024 Takahiro Miyaura 16

大阪駆動開発 関西を中心に、IT系のおもしろそうなことを 楽しんでやるコミュニティ