Background Image#

This example shows how to set a background image. This is useful for relaying from a rendering model such as NeRFs, Gaussian Splatting, or GANs.

from asyncio import sleep

import imageio as iio
from tqdm import tqdm

from vuer import Vuer
from vuer.events import ClientEvent
from vuer.schemas import Scene, SceneBackground

reader = iio.get_reader("../../../assets/movies/disney.webm")

app = Vuer()

# we add the handler here because the spawn(start=True) binding is blocking.
@app.add_handler("CAMERA_MOVE")
async def on_camera(event: ClientEvent, session):
    assert event == "CAMERA_MOVE", "the event type should be correct"
    print("camera event", event.etype, event.value)

@app.spawn(start=True)
async def show_heatmap(session):
    session.set @ Scene()

    for i, frame in tqdm(enumerate(reader), desc="playing video"):

        # use the upsert(..., to="bgChildren") syntax, so it is in global frame.
        session.upsert(
            SceneBackground(
                # Can scale the images down.
                frame[::1, ::1, :],
                # One of ['b64png', 'png', 'b64jpg', 'jpg']
                # 'b64png' does not work for some reason, but works for the nerf demo.
                # 'jpg' encoding is significantly faster than 'png'.
                format="jpg",
                quality=90,
                key="background",
                interpolate=True,
            ),
            to="bgChildren",
        )
        # 'jpg' encoding should give you about 30fps with a 16ms wait in-between.
        await sleep(0.016)