HololensとWebSocketでピタゴラスイッチ

ハッカソンの報告

4月8,9日に日本マイクロソフト本社で開催されたHololens ハッカソン Vol.1に参加してきました． チームメンバをはじめ二日間ともに過ごした参加者の皆さん，ならびに主催者の方々，楽しい時間となり感謝しております．ありがとうございました．

そして，自分たちのチームが制作した作品がこちら. Hololensを利用したピタゴラスイッチです．

Hololens ピタゴラスイッチ

現実世界の物体と仮想世界のホログラムがスムーズにインタラクションする表現をやりたいとチームメンバでアイデアを出した結果，ピタゴラスイッチを思いつきました．実際の物理的なボールとホログラムのCGが交差しながら進んだらきっと面白いんじゃないか！というわけです．

Hololensのアプリケーション開発のハッカソンに，自分たちのチームだけハンドドリルやはんだごて，ニッパにカッター，段ボールなどを持ち込んで，小学生が夏休みの宿題で一作品つくっているような状態でした．

仕組み

動作の仕組みは次の通りです．

通常のピタゴラスイッチとは異なり，ステージ上には次の物が置かれています．

• ボールや瓶といった現実の物を動きを制御するためのサーボモータや扇風機
• 現実の物の状態を検知するためにタッチセンサ
• 制御のためのArduino, Raspberry Pi

Raspberry Pi上でWebSocketサーバを動かし，Hololensがクライアントとして接続します． センサの値やサーボモータ，扇風機のトリガをWebSocket上でRaspberry PiとHololensが通信することで 現実の物とホログラムの同期をとりました．

WebSocketについて

自分がUnityでのHololensアプリの実装を担当したこともあり，HololensとUnity上でのWebSocketクライアントの実装について書こうと思います． Unity Editor上とHololens実機上では，フレームワークが.Net Framework3.5とUWPで違うため両方に対応した実装を行うとデバッグでも本番でも便利かと思います．

Unity Editor上でWebSocket

Unity上でWebSocketをするには次の記事に従いました．

qiita.com

C#のWebSocket用ライブラリを.Net Framework3.5向けにビルドしていますね．

インポートした際に，Unity Editor上のみでしか利用しないように設定します．

UWP上でWebSocket

UWPではWebSocket用のAPIが用意されているようなので，それを使います． 公式のドキュメントに詳しく実装方法が書かれていますね．

docs.microsoft.com

ただし，このMessageWebSocketはasync/awaitを使った非同期処理での利用が前提になっており，Unityはこれに対応していません．

そこで次の記事で紹介されているような方法で回避します．

www.naturalsoftware.jp

↓こんな感じ

        var task = Task.Run(async () => {
            await websocket.ConnectAsync(new Uri(uri));
        });
        task.Wait();

切り替え

Unity Editor上とUWPのコードはプリプロセッサで切り替えればOKですね．

#if WINDOWS_UWP
// UWP
#else
// Unity
#endif

ソースコード

最終的なWebSocketクライアントを行う実装はこちらです．

github.com

なお，このリポジトリにハッカソンで開発したソースコードをアップしてあります． ハードウェアと密接に絡む作品であるため，これだけではアプリとして完結しませんが，何かの参考になれば幸いです．

XboxOne ワイヤレスコントローラー (ホワイト)

Raspberry Pi3 Model B ボード＆ケースセット 3ple Decker対応 (Element14版, Clear)-Physical Computing Lab

【永久保証付き】Arduino Uno