Multi-Resolution

Stream gigapixel panoramas progressively with Pannellum's tiled multires format

Overview

Multi-resolution mode streams a panorama as a pyramid of tiles, the way slippy maps work: the viewer fetches only the tiles and zoom levels it needs for the current view. That makes gigapixel panoramas load in milliseconds instead of megabytes.

Zoom in — the picture sharpens as higher-resolution tiles stream in.

# File: docs/multires/multires_example.py

from dash_pannellum import DashPannellum

component = DashPannellum(
    id="multires-demo",
    multiRes={
        "basePath": "https://pannellum.org/images/multires/library",
        "path": "/%l/%s%y_%x",
        "fallbackPath": "/fallback/%s",
        "extension": "jpg",
        "tileResolution": 512,
        "maxLevel": 6,
        "cubeResolution": 8432,
    },
    autoLoad=True,
    compass=True,
    width="100%",
    height="450px",
)

:defaultExpanded: false :withExpandedButton: true

Configuration

multiRes = {
    "basePath": "https://example.com/my-pano",  # prefix for every tile URL
    "path": "/%l/%s%y_%x",                      # tile URL pattern
    "fallbackPath": "/fallback/%s",             # cube faces for fallback renderer
    "extension": "jpg",
    "tileResolution": 512,
    "maxLevel": 6,
    "cubeResolution": 8432,
}

The placeholders in path: %l zoom level, %s cube face (f, b, l, r, u, d), %x/%y tile coordinates.

Generating the tiles

Pannellum ships a Python tool that converts an equirectangular image into this tile structure:

git clone https://github.com/mpetroff/pannellum.git
python pannellum/utils/multires/generate.py my-panorama.jpg -o my-pano

The generator prints the matching multiRes configuration when it finishes — paste it straight into the Dash prop. See the Pannellum multires documentation for details.

Source: /components/multires