第59回 HTML5とか勉強会ーIoT/WoT発表資料「Web Controller for V-Sido CONNECT：WebRTCとWebGLで作る人型ロボット遠隔操縦システム」

1. 株式会社アトモスデザイン代表児玉哲彦 150-0012 東京都渋谷区広尾5-23-6-4F 080-3310-7453 aki@atomos-design.com http://atomos-design.com Web Controller for V-Sido CONNECT：WebRTCとWebGLで作る人型ロボット遠隔操縦システム第59回 HTML5とか勉強会ーIoT/WoT 2015.8.26

2. Who are we? 2 児玉哲彦／株式会社アトモスデザインアスラテック株式会社慶應義塾大学／頓智ドット株式会社／フリービット株式会社などを経て2014年に独立。モバイル／IoT／ロボット／VR等を中心とした製品の UXUIデザイン／技術設計を手がける。吉崎航氏が中心となって開発したロボット制御 OS「V-Sido」の商用化に取り組む。ソフトバンクグループ。対応ロボットの例

3. 今日のテーマ：Web Controller for V-Sido CONNECT 3

4. Web Controllerの実現すること 4 Web技術による Webサービスと連携したロボットアプリ開発の実現インターネット経由の遠隔接続 3Dグラフィックを用いた直感的でクールなUI

5. Web Controller for V-Sido CONNECTとは 5 V-Sido CONNECT Web Controller

6. DEMO

7. Web技術による Webサービスと連携したロボットアプリ開発の実現

8. システム構成 8

9. 技術選定 9 HTTP パフォーマンス △ ⃝ ⃝ ⃝ コネクション ⃝ ⃝ ⃝ 利用可能なブローカー ⃝ ⃝ ⃝ ⃝ 映像・音声 ⃝

11. 機能 11 機能説明アクション 3Dモデルによる姿勢制御手先や足先をドラッグして姿勢をライブに制御移動矢印アイコンを用いて前進／後退／旋回プリセットモーション喜怒哀楽などの感情表現するモーションを実行 APIコマンド個別関節角度／IK／移動のパラメータ指定スマホコマンド音声ファイルの再生／URLの表示自由コマンド実行コマンド文字列（JSON）を直接入力／送信イベント映像・音声表示スマホのカメラ／マイクからの入力をライブに表示イベント情報表示スマホのライブの各種ステートを表示カメラの動体検出／マイクボリューム／加速度／ジャイロスコープ／端末の姿勢／内部温度／外部温度／照度／ Wi-Fi電波強度／携帯ネットワーク電波強度／バッテリー残量または充電の有無マクロマクロイベントの閾値を設定し、指定したアクションを実行するよう設定

12. JavaScript API 12 APIへのアクセスグローバルオブジェクト「vsido」特定のスマートフォンへの接続 vsido.connect( ペアリングキー ); 映像／音声の利用 vsido.setVideo( HTML内のvideoタグのID , videoタグのパラメーターの連想配列 ); アクションの送信 vsido.send( JSON文字列 ); イベントの受信 vsido.receive( イベント名 , コールバック関数 ); マクロの設定 vsido.send({macro: {request: 'COMMAND', param1: 'PARAM', param2: 'PARAM', …}});

13. インターネット経由の遠隔接続

14. WebRTCライブラリ peer.js • データ通信／メディア通信／シグナリング • 現在はSkyWayサービスを通して用いている • リアルタイム通信のためのフローコントロール • WebRTCの下層の通信プロトコルはUDPだが、上層のSCTPで順序制御／信頼性の制御を行える  （デフォルトでオンで、最初ハマった） • 結局API経由では設定を変えられず、peer.jsのソースに手を入れて設定を変更 14 http://www.slideshare.net/iwashi86/20140801-web-rtcmeetup3r3 ©iwashi86

15. 接続性 • 通信環境：4（Wi-Fi (OCN)／docomo／au／Softbank） • WebUI OS：4（Windows／Mac／Linux／Android） • WebUI ブラウザ：2（Chrome／Firefox） • 通信環境4 4 WebUI OS4 2＝128パターンで接続／データ送受信／映像の送受信を調査 • 映像の送受信ができない／接続できない場合は3回まで再試行 15 結果のサマリー問題なし：103 映像の送受信できず：17 接続できず：8 OS／ブラウザへの依存はない WebUIがau、スマホがWi-Fiの場合には接続できず（理由は不明） auがどちらかにあると、映像の送受信ができない場合が多い国際接続ドイツ→日本のロボットに接続し、動作成功

16. WebUIコマンド送信から映像フィードバック取得までの遅延評価 • WebUIから、3Dモデルを用いたIK設定を実施 • 通信環境毎に移動→止める、というアクションを10回繰り返す様子を120FPSのカメラで撮影 • UIで動きを止めるフレームと、映像フィードバックで動きが止まるフレームとの差分を計測、平均を算出 16 0 100 200 300 400 500 600 4G (au)-4G (au) Wi-FI (ローカルP2P) Wimax (UQ)-4G (docomo MVNO) 600 366.667 235 4G (LTE)どうし、Wi-Fiでは500msecを切る MVNO SIMでは500msecをやや超える

17. 映像配信のFPS評価 17 Wi-Fi （ローカルP2P） WebUI：4G (au) スマホ：Wimax (UQ) WebUI：4G (docomo) スマホ：4G (Softbank) WebUI：4G (Softbank) スマホ：4G (docomo) 平均FPS 18-19 18-19 18-19 18-19 • Javascriptから、ブラウザでデコードされたフレーム数を1秒毎に取得 • 通信環境毎に30秒程度試行 • プログラムの設定はVGA、20FPSを指定結果、検証したあらゆる環境でほぼ20FPSを達成

18. WebUI-Androidアプリ間のタイムスタンプ差分の標準偏差評価 • Web UIからコマンドを送信する際と、同じコマンドをAndroidで受信した際に双方のタイムスタンプを記録 • タイムスタンプ差の標準偏差を計測して、到達時間のバラツキの範囲を調査 • （時計が一致していないため、タイムスタンプの差には意味がない） • 通信環境毎に、30秒間の計測を3回ずつ実行 18 Wi-Fi （ローカルP2P） Y! Mobile au 総サンプル数 1010 1008 991 4Gどうしを含むいずれの条件においても標準偏差は100msecを切っている →平均的に、大きなバラツキは発生しない

19. 3Dグラフィックを用いた直感的でクールなUI

20. • 3Dモデルのインポート／シェーダーの設定／ボーンアニメーション WebGLライブラリ THREE.js 20 • Blenderでリグを設定したモデルを用意、THREE.jsに含まれるエクスポーターを用いて書き出し • マテリアルはTHREE.jsを用いて設定

21. • 参考文献 • A Combined Optimization Method for Solving the Inverse Kinematics Problem of Mechanical Manipulators. IEEE Tr. On Robotics and Automation, 7:489-498, 1991 • MMD on WebGL 踊れるようになった（あと IK について）  http://d.hatena.ne.jp/edvakf/20111102/ 1320268602 Inverse Kinematicsの実装 WebGL向けの公開された実装は見当たらず 21 function solveIK(origin, edge, target){ var name = origin.name.substr(0, origin.name.length-2) + origin.name.substr(origin.name.length-1, 1); var parent = origin.parent; var originVector = new THREE.Vector3(); originVector.setFromMatrixPosition(origin.matrixWorld); originVector = parent.worldToLocal(originVector); var targetVector = new THREE.Vector3(); targetVector.copy(target.position); targetVector = parent.worldToLocal(targetVector); targetVector.sub(originVector); var edgeVector = new THREE.Vector3(); edgeVector.setFromMatrixPosition(edge.matrixWorld); edgeVector = parent.worldToLocal(edgeVector); edgeVector.sub(originVector); var axis = new THREE.Vector3(); axis.crossVectors(edgeVector, targetVector).normalize(); var radian = edgeVector.angleTo(targetVector); if(Math.abs(radian)>3/180*Math.PI){radian=radian/ Math.abs(radian)*3/180*Math.PI} var q = new THREE.Quaternion(); q.setFromAxisAngle(axis, radian); q.multiply(origin.quaternion); origin.quaternion.copy(q); if(origin.rotation.x < LIMIT[name].xmin){ origin.rotation.x=LIMIT[name].xmin } else if(origin.rotation.x > LIMIT[name].xmax){ origin.rotation.x=LIMIT[name].xmax } if(origin.rotation.y < LIMIT[name].ymin){ origin.rotation.y=LIMIT[name].ymin } else if(origin.rotation.y > LIMIT[name].ymax){ origin.rotation.y=LIMIT[name].ymax } if(origin.rotation.z < LIMIT[name].zmin){ origin.rotation.z=LIMIT[name].zmin } else if(origin.rotation.z > LIMIT[name].zmax){ origin.rotation.z=LIMIT[name].zmax } origin.updateMatrixWorld(); }

22. ゲームコントローラー • Xbox360対応／DirectX対応のもの • HTML5 Gamepad APIを通して実装 • 移動／プリセットモーション／視点移動 • JSライブラリにおいてキーマップも開発者が自由に設定可能 22

23. テレプレゼンス応用の可能性 23 すでに Oculus / Kinect との連携に成功

24. Web Controllerを作ってみてわかったこと • インターネットは速い！特にLTEは低遅延 • 多国間での利用も一応可能なレベル • リアルタイム性の高いアプリケーションでのフローコントロールの重要性 • WebRTCのテレカンファレンス以外の応用可能性 • Man 2 Manのインターネットから、Man 2 Machine、さらにはMachine 2 Machineのインターネットへ • WebGLの実用性 • ボーン／IKも実用にたえる 24 Web技術で作れるものはここまできている！

25. IoT / WoTの今後への私見

26. A brief background on IoT 26 慶應義塾大学政策・メディア研究科においてユビキタス空間のデザインの研究に従事、様々なサービスやプロトタイプを作った Patented! 世の中からは大きな反響を得るも、実用化には至らず

27. 2000年代の「ユビキタスコンピューティング」に足りなかったもの 27 Webという確立したエコシステムとの親和性エンドユーザーの優れたエクスペリエンスクラウドサービスとデバイスの緊密な連携（通信プロトコルを含む）

28. Web Controllerの実現すること 28 Web技術による Webサービスと連携したロボットアプリ開発の実現インターネット経由の遠隔接続 3Dグラフィックを用いた直感的でクールなUI

第59回 HTML5とか勉強会 ーIoT/WoT発表資料「Web Controller for V-Sido CONNECT：WebRTCとWebGLで作る人型ロボット遠隔操縦システム」

Akihiko Kodama