Azarashi Tech Blog

日常における日常的なことやテクノロジー的なこと

ros3djsの仕組みと使い方を調べてみた

今回は、ダーツスキル評価システム関係なしに、ROSという超有名なRobotics向けのフレームワークに関する記事です。 とはいっても、実はダーツスキル評価システムにもROSを使っています。

ROSとは？

  • これを説明していると記事を何枚書いても終わらないので、ドキュメントのリンクだけ貼っておきます。以降、ROSを知っているものとして話を進めます。

    wiki.ros.org

  • 最近では、徐々にROS2への移行が進んでいます。

    index.ros.org

  • 本記事とは関係ないですが、ROSを勉強したい場合はROSのページにあるチュートリアル(すごく充実している)か、Robot Ignite Academyで勉強するのがおすすめです。

    www.theconstructsim.com

  • 本記事はROS2ではなくROSのパッケージの１つである、ros3djsに関してです。

背景

  • ROSには、ROS上で動くロボットシステムの状態可視化をうまく行えるrvizという優秀なツールが有ります。ロボットシステムのデバッグをしたいとき、デモをしたいときなどは非常に便利です。

    wiki.ros.org

  • しかし、時にロボットシステムと直結しているパソコン上でrvizを使うだけではなく、iPad等でリモートでブラウザ経由でrvizのような表示を見たくなるときがあります。そういう表示を自分で作るのは非常に大変です。 そこで既存のROSパッケージで活用できる良いのがないか調べたところ、ヒットしたのがros3djsでした。

  • ros3djsは実際使ってみて良さそう！と思ったのですが、中身が全然ぱっと見わからないし、日本人で調べている人があまりいなそうだったので、記事を書いてみることにしました。

ros3djs

  • 端的に言えば、ROSで扱っているデータを、ブラウザ上でrvizのように３D表示できるようにするツールです。Webサーバー上で動かせば、他のパソコンからブラウザ経由で同じ表示を見れます。

  • BSDライセンスです。

    wiki.ros.org

  • Robot Web Toolという「BRINGING ROBOTS TO YOUR FAVORITE BROWSER」というテーマで色々とROSとブラウザを繋げるプロジェクトの一貫として作られているもののようです。

    robotwebtools.org

  • 動作している様子の動画。

ros3djsのバックエンドはどうなってるか？

  • ROS Wikiによると、「roslibjsの上に作られており、three.jsの力を使っている」と書かれている。

    It is build ontop of roslibjs and utilizes the power of three.js.

three.js

roslibjs

  • ROS Wikiによると、「ブラウザからROSへのインタラクションを行うためのコアJavascript Library」。

    roslibjs is the core JavaScript library for interacting with ROS from the browser

  • WebSocketsを用いてrosbridgeと接続し、publishing（配信処理）, subscribing(購読処理)、サービスコール、actionlib, TF, URDFパーシングなどの重要なROS機能を提供。

  • これもRobot Web Toolの一貫で作られたもの。

    wiki.ros.org

  • 一応用語説明・・・

    • WebSocket

      Webにおいて双方向通信を低コストで行う為の仕組み(プロトコル)。 　qiita.com

    • rosbridge

      ROS非対応のプログラムから、JSON API を使ってROS機能を使えるようにするモジュール。 Webブラウザ向けのWebSocketサーバなど、rosbridgeへのインターフェースとなるフロントエンドは他種類用意している。 wiki.ros.org

関係性をざっくり図でまとめると・・・

  • 下図のようになると考えられる。

f:id:surumetic-machine-83:20190119163128p:plain

使い方

インストール

  • githubからgit cloneして、README.mdのinstallするだけ。自分の場合は、下記のような感じ。
cd (ros3djsをインストールしたいディレクトリ)
git clone https://github.com/RobotWebTools/ros3djs.git
cd ros3djs
sudo apt-get install nodejs nodejs-legacy npm
sudo npm install -g grunt-cli
sudo rm -rf ~/.npm ~/tmp
npm install .

サンプル実行

  • 一番わかり易いサンプルは、ros3djs/examplesの中にある「markers.html」なので、これを実行する。
  • まず下記コマンドでrosbridge-serverとtf2-web-republisherをインストール
sudo apt-get install ros-kinetic-tf2-web-republisher ros-kinetic-rosbridge-server
  • 次に下記コマンドをそれぞれ別terminalで実行。つまり４つterminal必要。
roscore
rosrun visualization_marker_tutorials basic_shapes
rosrun tf2_web_republisher tf2_web_republisher
roslaunch rosbridge_server rosbridge_websocket.launch
  • 最後にmarker.htmlを開くと、描画が見れる。マウスで自由に視点変えられる。

f:id:surumetic-machine-83:20190119192535p:plain

どうすれば独自のマーカーを表示できるようになるか

  • ぶっちゃけ、このSimple Marker Exampleでマーカーtopic表示できるようになったのだから、トピック編集して中身変えれば何でも表示できる。htmlファイルの中身見て何をやっているか見れば良い(はず)。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />

<script src="https://static.robotwebtools.org/threejs/current/three.js"></script>
<script src="https://static.robotwebtools.org/EventEmitter2/current/eventemitter2.min.js"></script>
<script src="https://static.robotwebtools.org/roslibjs/current/roslib.js"></script>
<script src="../build/ros3d.js"></script>

<script>
  /**
   * Setup all visualization elements when the page is loaded. 
   */
  function init() {
    // Connect to ROS.
    var ros = new ROSLIB.Ros({
      url : 'ws://localhost:9090'
    });
    // Create the main viewer.
    var viewer = new ROS3D.Viewer({
      divID : 'markers',
      width : 400,
      height : 300,
      antialias : true
    });
    // Setup a client to listen to TFs.
    var tfClient = new ROSLIB.TFClient({
      ros : ros,
      angularThres : 0.01,
      transThres : 0.01,
      rate : 10.0,
      fixedFrame : '/my_frame'
    });
    // Setup the marker client.
    var markerClient = new ROS3D.MarkerClient({
      ros : ros,
      tfClient : tfClient,
      topic : '/visualization_marker',
      rootObject : viewer.scene
    });
  }
</script>
</head>

<body onload="init()">
  <h1>Simple Marker Example</h1>
  <p>Run the following commands in the terminal then refresh this page.</p>
  <ol>
    <li><tt>roscore</tt></li>
    <li><tt>rosrun visualization_marker_tutorials basic_shapes</tt></li>
    <li><tt>rosrun tf2_web_republisher tf2_web_republisher</tt></li>
    <li><tt>roslaunch rosbridge_server rosbridge_websocket.launch</tt></li>
  </ol>
  <div id="markers"></div>
</body>
</html>
  • 結局、init関数の中にros3djsで表示する内容を定義しているに過ぎない。TFツリーとトピック名指定して描画設定できる。ビューアはidを設定した後、divタグでid指定すれば、好きな場所にビューアを表示できる(はず)。
  • APIの詳しい説明は、下記参照。

    http://robotwebtools.org/jsdoc/ros3djs/current/index.html

まとめ

  • ros3djsの仕組みと使い方をざっくり書いてみた。
  • とは言いつつ、自分もまだそこまでフル活用できていない。どんどん使って理解深めたい。
  • どのくらい有名なのかわからないが、意外とすごいツールな気がする。
  • 2013年くらいからあるっぽいけど、今日見た時点でgithubも３日前にコード変更されてたし、ちゃんとメンテされてるっぽい。