20210524_WebXR Tech Tokyo vol.6 @ cluster

20210524_WebXR Tech Tokyo vol.6 @ cluster「A-Frame と Unity の 位置や Quaternion 回転を連動させてみた」の登壇資料です。

◆スライド内の素材は以下を使用させて頂いております。ありがとうございます！

・シルエットデザイン http://kage-design.com/
・human pictogram 2.0 http://pictogram2.com
・ICOOON MONO http://icooon-mono.com/

Transcript

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