# Cubemap tiles
Reduce the initial loading time and used bandwidth by slicing big cubemap panoramas into many small tiles.
This adapter is available in the @photo-sphere-viewer/cubemap-tiles-adapter (opens new window) package.
const viewer = new PhotoSphereViewer.Viewer({
adapter: PhotoSphereViewer.CubemapTilesAdapter,
panorama: {
faceSize: 6000,
nbTiles: 8,
baseUrl: {
left: 'left_low.jpg',
front: 'front_low.jpg',
right: 'right_low.jpg',
back: 'back_low.jpg',
top: 'top_low.jpg',
bottom: 'bottom_low.jpg',
},
tileUrl: (face, col, row) => {
return `${face}_${col}_${row}.jpg`;
},
},
});
# Example
# Configuration
# flipTopBottom
See the cubemap adapter configuration.
# baseBlur
- type:
boolean
- default:
true
Applies a blur filter to the base image (option baseUrl
).
# showErrorTile
- type:
boolean
- default:
true
Shows a warning sign on tiles that cannot be loaded.
# antialias
- type:
boolean
- default:
true
Applies antialiasing to high resolutions tiles.
# Panorama options
When using this adapter, the panorama
option and the setPanorama()
method accept an object to configure the tiles.
You may choose to provide a single tiles configuration or multiple configurations which will be applied at different zoom levels, this allows to serve files adapted to the current zoom level and achieve very high resolutions without consuming too much bandwidth.
# Preparing the panorama
The tiles can be easily generated using ImageMagick (opens new window) tool.
Let's say you have a cubemap where each face is 6.000x6.000 pixels and you want to split them into 8x8 tiles, use the following command for each face:
magick.exe front.jpg \
-crop 750x750 -quality 95 \
-set filename:tile "%[fx:page.x/750]_%[fx:page.y/750]" \
-set filename:orig %t \
%[filename:orig]_%[filename:tile].jpg
You can also use this online tool (opens new window).
Performances
It is recommanded to not exceed tiles with a size of 1024x1024 pixels, thus limiting the maximum panorama size to 16.384x16.384 pixels by face (1.6 Gigapixels in total).
← Cubemap Cubemap video →