648 Views
March 20, 24
スライド概要
XRミーティング(https://osaka-driven-dev.connpass.com/event/312255/)登壇資料
8thwallで作ったアプリが実はHoloLensでも動く”場合が”ある話。HoloLens 2自体はWebXRサポートしてるのでそれ自体は動きます。記憶の中では、8thWallプラットフォーム上のアプリは最近までHoloLensでは起動できなかったのですが。。。
ICT業界でソフトウェアエンジニア/アプリケーションアーキテクトを担当。 社内ではXR関連技術に関する啓もう活動や技術支援に従事。 業務の傍ら、XR(特にMixed Reality領域)についての開発技術の調査、開発などを行っています。 また、「大阪駆動開発」コミュニティ所属しており、日々の調査で得た知見はコミュニティを通して情報発信を行っています。
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 ※よかったらこれを機にお知り合いになってください
今日は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
少し前からマルチデバイス対応している 現在は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
(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
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
シーンの設定 必要な属性だけにする <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系のおもしろそうなことを 楽しんでやるコミュニティ