Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

9,370 views

Published on

日本最大のHTML5関連開発者向けコミュニティhtml5jにて、Web Controller for V-Sido CONNECTについての発表を行いました。

開発者向けということもあり、これまででもっともWebRTCやWebGL等の技術の応用についての詳細を解説しています。

Published in: Engineering
  • Hi there! Get Your Professional Job-Winning Resume Here - Check our website! http://bit.ly/resumpro
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

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

  1. 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. 2. Who are we? 2 児玉哲彦/株式会社アトモスデザイン アスラテック株式会社 慶應義塾大学/頓智ドット株式会社/フリービッ ト株式会社などを経て2014年に独立。モバイ ル/IoT/ロボット/VR等を中心とした製品の UXUIデザイン/技術設計を手がける。 吉崎航氏が中心となって開発したロボット制御 OS「V-Sido」の商用化に取り組む。ソフトバ ンクグループ。 対応ロボットの例
  3. 3. 今日のテーマ:Web Controller for V-Sido CONNECT 3
  4. 4. Web Controllerの実現すること 4 Web技術による Webサービスと連携した ロボットアプリ開発の実現 インターネット経由の 遠隔接続 3Dグラフィックを用いた 直感的でクールなUI
  5. 5. Web Controller for V-Sido CONNECTとは 5 V-Sido CONNECT Web Controller
  6. 6. DEMO
  7. 7. Web技術による Webサービスと連携した ロボットアプリ開発の実現
  8. 8. システム構成 8
  9. 9. 技術選定 9 HTTP パフォーマンス △ ⃝ ⃝ ⃝ コネクション ⃝ ⃝ ⃝ 利用可能な ブローカー ⃝ ⃝ ⃝ ⃝ 映像・音声 ⃝
  10. 10. 使用したライブラリ、サービス等 10 © 2015 NTT Communications データ 映像/音声 ノードID登録ノードID ノード情報 Web Controller JSライブラリ THREE.js
  11. 11. 機能 11 機能 説明 アクション 3Dモデルによる姿勢制御 手先や足先をドラッグして 姿勢をライブに制御 移動 矢印アイコンを用いて前進/後退/旋回 プリセットモーション 喜怒哀楽などの感情表現するモーションを実行 APIコマンド 個別関節角度/IK/移動のパラメータ指定 スマホコマンド 音声ファイルの再生/URLの表示 自由コマンド実行 コマンド文字列(JSON)を直接入力/送信 イベント 映像・音声表示 スマホのカメラ/マイクからの入力をライブに表示 イベント情報表示 スマホのライブの各種ステートを表示 カメラの動体検出/マイクボリューム/加速度/ジャイ ロスコープ/端末の姿勢/内部温度/外部温度/照度/ Wi-Fi電波強度/携帯ネットワーク電波強度/バッテリー 残量または充電の有無 マクロ マクロ イベントの閾値を設定し、指定したアクションを実行す るよう設定
  12. 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. 13. インターネット経由の 遠隔接続
  14. 14. WebRTCライブラリ peer.js • データ通信/メディア通信/シグナリング • 現在はSkyWayサービスを通して用いている • リアルタイム通信のためのフローコントロール • WebRTCの下層の通信プロトコルはUDPだが、上層のSCTPで順序制御/信頼性の制御を行える
 (デフォルトでオンで、最初ハマった) • 結局API経由では設定を変えられず、peer.jsのソースに手を入れて設定を変更 14 http://www.slideshare.net/iwashi86/20140801-web-rtcmeetup3r3 ©iwashi86
  15. 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. 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. 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. 18. WebUI-Androidアプリ間のタイムスタンプ差分の標準偏差評価 • Web UIからコマンドを送信する際と、同じコマンドをAndroidで受信した際に双方のタイムスタンプを記録 • タイムスタンプ差の標準偏差を計測して、到達時間のバラツキの範囲を調査 • (時計が一致していないため、タイムスタンプの差には意味がない) • 通信環境毎に、30秒間の計測を3回ずつ実行 18 Wi-Fi (ローカルP2P) Y! Mobile au 総サンプル数 1010 1008 991 4Gどうしを含むいずれの条件においても標準偏差は100msecを切っている →平均的に、大きなバラツキは発生しない
  19. 19. 3Dグラフィックを用いた 直感的でクールなUI
  20. 20. • 3Dモデルのインポート/シェーダーの設定/ボーンアニメーション WebGLライブラリ THREE.js 20 • Blenderでリグを設定したモデルを用意、THREE.jsに含まれるエ クスポーターを用いて書き出し • マテリアルはTHREE.jsを用いて設定
  21. 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. 22. ゲームコントローラー • Xbox360対応/DirectX対応のもの • HTML5 Gamepad APIを通して実装 • 移動/プリセットモーション/視点移動 • JSライブラリにおいてキーマップも開発者が自由に設定可能 22
  23. 23. テレプレゼンス応用の可能性 23 すでに Oculus / Kinect との連携に成功
  24. 24. Web Controllerを作ってみてわかったこと • インターネットは速い!特にLTEは低遅延 • 多国間での利用も一応可能なレベル • リアルタイム性の高いアプリケーションでのフローコントロールの重要性 • WebRTCのテレカンファレンス以外の応用可能性 • Man 2 Manのインターネットから、Man 2 Machine、さらにはMachine 2 Machineのインターネットへ • WebGLの実用性 • ボーン/IKも実用にたえる 24 Web技術で作れるものはここまできている!
  25. 25. IoT / WoTの今後への私見
  26. 26. A brief background on IoT 26 慶應義塾大学政策・メディア研究科においてユビキタス空間のデザインの研究に従事、 様々なサービスやプロトタイプを作った Patented! 世の中からは大きな反響を得るも、実用化には至らず
  27. 27. 2000年代の「ユビキタスコンピューティング」に足りなかったもの 27 Webという確立した エコシステムとの親和性 エンドユーザーの 優れたエクスペリエンス クラウドサービスと デバイスの緊密な連携 (通信プロトコルを含む)
  28. 28. Web Controllerの実現すること 28 Web技術による Webサービスと連携した ロボットアプリ開発の実現 インターネット経由の 遠隔接続 3Dグラフィックを用いた 直感的でクールなUI

×