株式会社アトモスデザイン 代表　児玉　哲彦 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

Who are we?

2

児玉哲彦／株式会社アトモスデザイン アスラテック株式会社

慶應義塾大学／頓智ドット株式会社／フリービット株式会社などを経て2014年に独立。モバイル／IoT／ロボット／VR等を中心とした製品のUXUIデザイン／技術設計を手がける。

吉崎航氏が中心となって開発したロボット制御OS「V-Sido」の商用化に取り組む。ソフトバンクグループ。

対応ロボットの例

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

3

Web Controllerの実現すること

4

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

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

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

Web Controller for V-Sido CONNECTとは

5

V-Sido CONNECT

Web Controller

DEMO

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

システム構成

8

技術選定

9

HTTP

パフォーマンス △ ◯ ◯ ◯

コネクション × ◯ ◯ ◯

利用可能な ブローカー ◯ ◯ ◯ ◯

映像・音声 × × × ◯

使用したライブラリ、サービス等

10

© 2015 NTT Communications

データ 映像／音声

ノードID登録ノードID

ノード情報

Web Controller JSライブラリTHREE.js

機能

11

機能 説明

アクション

3Dモデルによる姿勢制御 手先や足先をドラッグして 姿勢をライブに制御

移動 矢印アイコンを用いて前進／後退／旋回

プリセットモーション 喜怒哀楽などの感情表現するモーションを実行

APIコマンド 個別関節角度／IK／移動のパラメータ指定

スマホコマンド 音声ファイルの再生／URLの表示

自由コマンド実行 コマンド文字列（JSON）を直接入力／送信

イベント

映像・音声表示 スマホのカメラ／マイクからの入力をライブに表示

イベント情報表示

スマホのライブの各種ステートを表示 カメラの動体検出／マイクボリューム／加速度／ジャイロスコープ／端末の姿勢／内部温度／外部温度／照度／Wi-Fi電波強度／携帯ネットワーク電波強度／バッテリー残量または充電の有無

マクロ マクロ イベントの閾値を設定し、指定したアクションを実行するよう設定

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', …}});

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

WebRTCライブラリ　peer.js• データ通信／メディア通信／シグナリング

• 現在はSkyWayサービスを通して用いている

• リアルタイム通信のためのフローコントロール

• WebRTCの下層の通信プロトコルはUDPだが、上層のSCTPで順序制御／信頼性の制御を行える（デフォルトでオンで、最初ハマった）

• 結局API経由では設定を変えられず、peer.jsのソースに手を入れて設定を変更

14

http://www.slideshare.net/iwashi86/20140801-web-rtcmeetup3r3 ©iwashi86

接続性• 通信環境：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がどちらかにあると、映像の送受信ができない場合が多い

国際接続　ドイツ→日本のロボットに接続し、動作成功

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をやや超える

映像配信の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を達成

WebUI-Androidアプリ間のタイムスタンプ差分の標準偏差評価• Web UIからコマンドを送信する際と、同じコマンドをAndroidで受信した際に双方のタイムスタンプを記録

• タイムスタンプ差の標準偏差を計測して、到達時間のバラツキの範囲を調査

• （時計が一致していないため、タイムスタンプの差には意味がない）

• 通信環境毎に、30秒間の計測を3回ずつ実行

18

Wi-Fi （ローカルP2P） Y! Mobile au

総サンプル数 1010 1008 991

4Gどうしを含むいずれの条件においても標準偏差は100msecを切っている →平均的に、大きなバラツキは発生しない

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

• 3Dモデルのインポート／シェーダーの設定／ボーンアニメーション

WebGLライブラリ　THREE.js

20

• Blenderでリグを設定したモデルを用意、THREE.jsに含まれるエクスポーターを用いて書き出し

• マテリアルはTHREE.jsを用いて設定

• 参考文献

• 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(); }

ゲームコントローラー• Xbox360対応／DirectX対応のもの

• HTML5 Gamepad APIを通して実装

• 移動／プリセットモーション／視点移動

• JSライブラリにおいてキーマップも開発者が自由に設定可能

22

テレプレゼンス応用の可能性

23

すでに Oculus / Kinect との連携に成功

Web Controllerを作ってみてわかったこと

• インターネットは速い！特にLTEは低遅延

• 多国間での利用も一応可能なレベル

• リアルタイム性の高いアプリケーションでのフローコントロールの重要性

• WebRTCのテレカンファレンス以外の応用可能性

• Man 2 Manのインターネットから、Man 2 Machine、さらにはMachine 2 Machineのインターネットへ

• WebGLの実用性

• ボーン／IKも実用にたえる

24

Web技術で作れるものはここまできている！

IoT / WoTの今後への私見

A brief background on IoT

26

慶應義塾大学政策・メディア研究科においてユビキタス空間のデザインの研究に従事、 様々なサービスやプロトタイプを作った

Patented!

世の中からは大きな反響を得るも、実用化には至らず

2000年代の「ユビキタスコンピューティング」に足りなかったもの

27

Webという確立した エコシステムとの親和性

エンドユーザーの 優れたエクスペリエンス

クラウドサービスと デバイスの緊密な連携

（通信プロトコルを含む）

Web Controllerの実現すること

28

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

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

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