20210524_WebXR Tech Tokyo vol.6 @ cluster
by
1ft-seabass
×
Copy
Open
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
Slide 1
Slide 1 text
20210524_WebXR Tech Tokyo vol.6 @ cluster A-Frame と Unity の 位置や Quaternion 回転 を連動させてみた ワンフットシーバス 田中正吾
Slide 2
Slide 2 text
私の話はスライドを後ほど共有します。 話す内容に注力いただいて大丈夫です!
Slide 3
Slide 3 text
田中正吾(たなかせいご) 屋号:ワンフットシーバス 2004年よりフリーランス。以後、FLASH制作を 中心にインタラクティブコンテンツを主に行い現 在に至る。 最近ではWEBフロントエンドをベースにしなが らも、情報とインターフェースが合わさるアプ ローチという視点でIoTやMixed Realityといった 技術も取り入れながら活動しています。
Slide 4
Slide 4 text
HoloLens 2 や Oculus Quest で制作してて 最近考えていること
Slide 5
Slide 5 text
Unity と A-Frame で位置や回転が HTTP→WebSocket経由で同期する動画
Slide 6
Slide 6 text
HTTP と WebSocket で連携してます Unity Node-RED A-Frame HTTP WebSocket
Slide 7
Slide 7 text
Unity のエディタで表示できればいいけど Web ブラウザで内容を同期して表示したい 操作というよりは可視化の面で Web ブラウザで見れると何かと便利
Slide 8
Slide 8 text
位置はそのまま送ればいいので割と問題ない XYZ軸の違いはあるけど変換すればなんとかなる
Slide 9
Slide 9 text
Unityからオイラー角で変換して送るのがネック。 回転が上手に回ってくれないときがある。 おもにジンバルロックという現象で同期が引っかかる感じでつらい。
Slide 10
Slide 10 text
Unity Quaternion をそのまま扱うとよいそう https://ja.wikipedia.org/wiki/%E5%9B%9B%E5%85%83%E6%95%B0
Slide 11
Slide 11 text
Unity Quaternion がそのまま 別アプリで連携できるかどうかがテーマ
Slide 12
Slide 12 text
つないで見たナレッジはこちら A-Frame と Unity の 位置や Quaternion 回転を Node-RED HTTP → WebSocket 経由で連動させたメモ https://www.1ft-seabass.jp/memo/2021/05/06/aframe-unity-collaboration-with-quaternion-using-n odered-http-websocket-version/
Slide 13
Slide 13 text
ザっと位置と回転伝わってそう HoloLens 2 内の位置や回転情報を送ってみたい
Slide 14
Slide 14 text
回転 Quaternin の成分を送ったら無事伝わった! THREE.Quaternion(unityCubeData.RotationX,unityCubeData.RotationY, unityCubeData.RotationZ,unityCubeData.RotationW);
Slide 15
Slide 15 text
このナレッジの弱点は HTTP → WebSocket で遅延していること
Slide 16
Slide 16 text
WebSocket → WebSocket してみた わりと滑らかになった感はある Unity Node-RED A-Frame WebSocket WebSocket
Slide 17
Slide 17 text
とはいえ1秒以下のリアルタイムは 大変そうなので、適度に送ったほうが良さそう 3Dでのドラッグアンドドロップ時だったりクリック時のみだったり
Slide 18
Slide 18 text
➔ Unity と A-Frame 連携できた! ➔ 回転はやっぱり Quaternion がよさそう! ➔ 動作同期は難しい。即時性は追求しすぎず適度にしたい! ➔ HoloLens 2 や Qculus Quest に活かしてみたい! まとめ