Viser 入門

Viserとは

Viserはコンピュータビジョン・ロボティクス向けの3D可視化のためのPythonライブラリです．

以下のような特徴を持ちます

• 基本的な3Dの可視化のためのAPI
• ボタン，インプット，チェックボックスなどのGUI
• クリックや選択などのインタラクティブなツール
• カメラやレンダリングの設定
• web-basedなクライアントで，SSHをしていても簡単に使える

世界のトップ研究者達も注目しているツール ⚙️

イメージ画像

Hello World

以下のファイルを実行してブラウザでアクセスするだけなので，SSHしているサーバー環境でも使いやすいところがポイント

python example_000.py
access to http://localhost:8080 at browser

example_000.py

import time

import viser


def main():
    server = viser.ViserServer()
    server.scene.add_icosphere(
        name="/hello_sphere",
        radius=0.5,
        color=(255, 0, 0),  # Red
        position=(0.0, 0.0, 0.0),
    )

    print("Open your browser to http://localhost:8080")
    print("Press Ctrl+C to exit")

    while True:
        time.sleep(10.0)


if __name__ == "__main__":
    main()

Core Concept

Viserを扱うために理解しておくべき基本的な概念

全体像

example_001.py

import time

import viser


def main():
    server = viser.ViserServer()

    # Add 3D objects to the scene
    sphere = server.scene.add_icosphere(
        name="/sphere",
        radius=0.3,
        color=(255, 100, 100),
        position=(0.0, 0.0, 0.0),
    )
    box = server.scene.add_box(
        name="/box",
        dimensions=(0.4, 0.4, 0.4),
        color=(100, 255, 100),
        position=(1.0, 0.0, 0.0),
    )

    # Create GUI controls
    sphere_visible = server.gui.add_checkbox("Show sphere", initial_value=True)
    sphere_color = server.gui.add_rgb("Sphere color", initial_value=(255, 100, 100))
    box_height = server.gui.add_slider(
        "Box height", min=-1.0, max=1.0, step=0.1, initial_value=0.0
    )

    # Connect GUI controls to scene objects
    @sphere_visible.on_update
    def _(_):
        sphere.visible = sphere_visible.value

    @sphere_color.on_update
    def _(_):
        sphere.color = sphere_color.value

    @box_height.on_update
    def _(_):
        box.position = (1.0, 0.0, box_height.value)

    print("Server running")
    while True:
        time.sleep(10.0)


if __name__ == "__main__":
    main()

Server

3D objectやGUIを操作するためのインタラクティブなwebインターフェースを立ち上げる

server = viser.ViserServer()

Scene API

メッシュ，点群，球体や立方体など基本的な図形などの3D objectを表現する

    sphere = server.scene.add_icosphere(
        name="/sphere",
        radius=0.3,
        color=(255, 100, 100),
        position=(0.0, 0.0, 0.0),
    )
    box = server.scene.add_box(
        name="/box",
        dimensions=(0.4, 0.4, 0.4),
        color=(100, 255, 100),
        position=(1.0, 0.0, 0.0),
    )

GUI API

ボタン，スライダーなど基本的なGUIの操作を加える．画像右上の部分

    sphere_visible = server.gui.add_checkbox("Show sphere", initial_value=True)
    sphere_color = server.gui.add_rgb("Sphere color", initial_value=(255, 100, 100))
    box_height = server.gui.add_slider(
        "Box height", min=-1.0, max=1.0, step=0.1, initial_value=0.0
    )

    # Connect GUI controls to scene objects
    @sphere_visible.on_update
    def _(_):
        sphere.visible = sphere_visible.value

    @sphere_color.on_update
    def _(_):
        sphere.color = sphere_color.value

    @box_height.on_update
    def _(_):
        box.position = (1.0, 0.0, box_height.value)

Get renders

viser.ClientHandle.get_render()を使うことで，viewerの画像を取得することが出来る．

example_002.py

import time

import imageio.v3 as iio
import numpy as np

import viser


def main():
    server = viser.ViserServer()

    # Shared across all clients.
    server.scene.add_spline_catmull_rom(
        "/catmull_initial",
        np.random.normal(size=(30, 3)),
        tension=0.5,
        line_width=3.0,
        color=np.random.uniform(size=3),
    )

    button = server.gui.add_button("Render a GIF")

    @button.on_click
    def _(event: viser.GuiEvent) -> None:
        client = event.client
        assert client is not None

        client.scene.reset()

        images = []

        for i in range(20):
            # Add spline to just this client.
            client.scene.add_spline_catmull_rom(
                f"/catmull_{i}",
                np.random.normal(size=(30, 3)),
                tension=0.5,
                line_width=3.0,
                color=np.random.uniform(size=3),
            )
            images.append(client.get_render(height=720, width=1280))
            print("Got image with shape", images[-1].shape)

        print("Generating and sending GIF...")
        client.send_file_download(
            "image.gif", iio.imwrite("<bytes>", images, extension=".gif", loop=0)
        )
        print("Done!")

    while True:
        time.sleep(10.0)


if __name__ == "__main__":
    main()

おわりに

まだ触り始めたばかりで今回は紹介に過ぎないので，今後便利な使い方があれば紹介していこうと思います