Rerun viewerの使い方 | Rerun入門

# Rerunとは
Rerunについては下記の記事を参考にしてください．簡単な使い方もこちらで解説しています．

https://qiita.com/ryhara/items/f78f80a07b30ed8ce845

# Viewer
本記事は基本Pythonでの使用方法について解説します．install以外のviewerの操作部分についてはほとんど同じかと思われますが，Python以外での動作確認は行っていません．

### install
```
pip install rerun-sdk
```

### viewerの起動
```
rerun
```
起動した画面

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3085757/bb7cba2d-831c-3f0a-d8a6-e8f5b7aebd41.png)

Exampleを押すと以下のように確認が出来る

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3085757/c0851244-f94e-114d-10fd-ee2a4dc8f2af.png)

### viewerの構成
- viewer中央：[Viewport](https://rerun.io/docs/reference/viewer/viewport)
可視化パネル．ここに様々なフォーマットのデータを可視化する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3085757/021b2ef2-7227-d6a8-72a1-61000bde006d.png)

- viewer左上：[Recordings Panel](https://rerun.io/docs/concepts/apps-and-recordings)
可視化のセッションごと，実行ごとに分かれて表示されるイメージ．各可視化の一覧
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3085757/a9d76f91-7bea-d7a3-8a35-a5e347e109f6.png)

- viewer左下：[Blueprint panel](https://rerun.io/docs/reference/viewer/blueprint)
viewerの構成情報やデータ構造の階層関係などを表示する，viewer内のメニューページ的な存在．Blueprintの設定を変更することでviewerをカスタム出来る．
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3085757/a3a084f9-28c8-591f-85aa-1c56782677d9.png)

- viewer右側：[Selection panel](https://rerun.io/docs/reference/viewer/selection)
現在選択しているものの詳細情報を表示する．オブジェクトだけでなく，その他のパネルなどの詳細情報も表示される．
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3085757/bed72a91-6352-0849-aca1-34e5314de706.png)

- viewer下側：[Timeline panel](https://rerun.io/docs/reference/viewer/timeline)
時系列情報のコントロール，再生などの制御を行なう．
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3085757/abf7a64a-7c8e-fd34-4eb4-35647d8f7fb3.png)





### viewerの操作方法
公式のQuick Startに記載の内容
- クリックしながらドラッグすると，オブジェクトを回転させられる
- スクロールするとズームイン/ズームアウトする
- `?`アイコンにマウスを重ねると操作方法の解説が表示される
- 画面下の`time-slider`を動かすと，ある時刻におけるオブジェクトを見ることが出来る
- 画面左下あたりの再生ボタンなどで自動で再生が出来る
- オブジェクトをクリックして，それぞれの点や立体の情報を確認できる
- オブジェクトにマウスをホバーするだけでも詳細情報を確認できる
- 右クリックしながらドラッグすると平行移動？ができる
- `cmd/ctrl + P`でコマンドパレットを開けます

ヘルプマーク
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3085757/1ef72ec9-cecf-7dce-b6c9-2cd8c4cf9c98.png)

再生ボタンなど
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3085757/0b0bfa29-83db-6f01-2efd-e5cc208bdbff.png)

ある点を選択した状態
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3085757/b6938b03-1416-1708-ff30-5b3f91710243.png)


ある点にマウスをホバーした状態
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3085757/7e46243f-71ad-e962-df09-11d805201331.png)

### viewerの個人的に気に入っている所
- **画像をコピーまたは保存できる**
画面右側にマスク画像が表示されていて，その下に`Save image`, `Copy image`と表示されています. Rerunで可視化しておけば，ここから後で画像を個別に保存できる点もかなり便利だと思います
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3085757/b0573181-9aa0-44d2-e8e7-067b65eeb5f7.png)

- [Recording・Blueprintを保存できる](https://rerun.io/docs/getting-started/configure-the-viewer/save-and-load)
各可視化のRecordingやviewerの設定情報であるBlueprintを保存することができます．
保存したファイルはRerunのviwerを立ち上げてopenすればいつでも見返すことが出来ます

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3085757/1517cafc-4530-dbb6-a0ab-8d8de1ce2ee3.png)

- [様々なファイル形式を開くことが出来る](https://rerun.io/docs/getting-started/data-in/open-any-file)
全てを試したことがあるわけではありませんが，リンクに記載の以下のような形式に対応しているようです．
  - Native Rerun files: rrd
  - 3D models: gltf, glb, obj, stl
  - Images: avif, bmp, dds, exr, farbfeld, ff, gif, hdr, ico, jpeg, jpg, pam, pbm, pgm, png, ppm, tga, tif, tiff, webp.
  - Point clouds: ply.
  - Text files: md, txt.

# 参考
今回の記事は主に以下のページらをまとめたものになっています．

全体的なクイックスタートを見たい場合

https://rerun.io/docs/getting-started/quick-start/python

viewerの操作だけ確認したい場合

https://rerun.io/docs/getting-started/navigating-the-viewer

viewer周りの説明

https://rerun.io/docs/reference/viewer/overview

# さいごに
ドキュメントは英語ですがしっかりしているので，是非ドキュメントの方もご確認ください．日本語の解説記事はまだまだ少ないので引き続き記事を書いていきたいと思います．
次回はBlueprint周りについてもう少し解説出来たらと思います．
最後まで読んでいただきありがとうございました．

https://rerun.io/docs/howto/visualization/configure-viewer-through-code

https://rerun.io/docs/concepts/blueprint

::: note info
新しい記事を投稿しました↓ こちらも合わせてご確認下さい！
:::

https://qiita.com/ryhara/items/cc82fbd4fbd5f72d9e28