Vuer

Bounding Box

The BoundingBox component renders 3D bounding boxes with customizable edge and wall opacity. This is ideal for:

  • Visualizing spatial bounds and regions of interest
  • Object detection visualization
  • Collision box debugging

Basic Usage

A minimal example that creates a bounding box:

python
import asyncio

from vuer import Vuer, VuerSession
from vuer.schemas import BoundingBox

vuer = Vuer(killport=True)


@vuer.spawn(start=True)
async def main(sess: VuerSession):
  sess.upsert @ BoundingBox(
    key="bounding-box",
    color="red",
  )

  await sess.forever()

Insane Performance With BBProvider

It is not uncommon for us to have a large number of bounding boxes in a scene. To avoid slowing down the rendering, we offer an instancing provider, that can accomodate up to tens of thousands of bouding boxes while maintaining 120 fps refresh rate.

  • [ ] todo: use portal to share the default provider in self-provider set up. This is done for the DepthPointCloud component, but not here afaik.
python
import asyncio

from vuer import Vuer, VuerSession
from vuer.schemas import BoundingBox, BoundingBoxProvider

vuer = Vuer(killport=True)


@vuer.spawn(start=True)
async def main(sess: VuerSession):
  sess.upsert @ BoundingBoxProvider(
    key="provider",
    children=[
      BoundingBox(key="box-0", color="red", position=[0, 0, 0]),
      BoundingBox(key="box-1", color="green", position=[2, 0, 0]),
      BoundingBox(key="box-2", color="blue", position=[4, 0, 0]),
    ]
  )

  await sess.forever()

BoundingBox Parameters

ParameterTypeDefaultDescription
keystr-Unique identifier for the bounding box
positionlist[0, 0, 0]Position in 3D space [x, y, z]
rotationlist[0, 0, 0]Rotation in Euler angles [x, y, z]
scalelist[1, 1, 1]Scale factors [x, y, z]
quaternionlist-Rotation as quaternion [x, y, z, w]
matrixlist-4x4 transformation matrix (16 values)
sizelist[1, 1, 1]Size of the box [width, height, depth]
minlist-Minimum corner [x, y, z] (alternative to size)
maxlist-Maximum corner [x, y, z] (alternative to size)
colorstr/int"#00ff00"Color of edges and faces (hex, rgb, rgba, or name)
edgeOpacityfloat0.9Opacity of the edges (0-1)
wallOpacityfloat0.08Opacity of the walls/faces (0-1)
edgeWidthfloat0.02Width of edges relative to box size (0-0.5)

BoundingBoxProvider Parameters

ParameterTypeDefaultDescription
keystr-Unique identifier for the provider
edgeWidthfloat0.05Width of box edges
maxInstancesint10000Maximum number of instances
childrenlist[]Child BoundingBox elements

Sizing Options

You can define the box size in two ways:

Using size

python
BoundingBox(
  key="box",
  size=[2, 1, 3],  # width=2, height=1, depth=3
  position=[0, 0.5, 0],  # centered at this position
)

Using min and max

python
BoundingBox(
  key="box",
  min=[-1, 0, -1.5],
  max=[1, 1, 1.5],
)