日本最大のHTML5関連開発者向けコミュニティhtml5jにて、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
パフォーマンス △ ⃝ ⃝ ⃝
コネクション ⃝ ⃝ ⃝
利用可能な
ブローカー
⃝ ⃝ ⃝ ⃝
映像・音声 ⃝

10. 使用したライブラリ、サービス等
10
© 2015 NTT Communications
データ
映像／音声
ノードID登録ノードID
ノード情報
Web Controller
JSライブラリ
THREE.js

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