Panoramic navigation A web-based immersive walkthrough

Panoramic Images Navigation

Commonly, immersive and virtual reality systems simulate virtual environments exploiting 3D computer graphics. But the excessive complexity of the models and an high rendering quality can compromise system performance, especially in a web environment.

Considered these issues, this project targets the design of a vision based approach which allows a user to virtually navigate a real cultural environment using panoramic images.

Commonly, immersive and virtual reality systems simulate virtual environments exploiting 3D computer graphics. This entails a considerable work to be done in models development and objects textures mapping in order to obtain a good degree of realism. Furthermore, the excessive complexity of the models and an high rendering quality can compromise system performance, especially in a web environment, where 3D rendering accelerators are still not fully supported.

Considering these issues, this project targets the design of a vision based approach which allows a user to virtually navigate a real cultural environment using panoramic images. In detail, we present a web based system for the interactive walk-through and browsing of an ordered sequence of spherical panoramas.

To enable navigation across different panoramic images an image analysis model is developed to render smooth transitions across panoramas so as to reduce the perceived discontinuity of the transition.

Finally, we propose an innovative interaction metaphor for a better fruition of multimedia materials associated with Point Of Interests (POIs) distributed along the cultural walk-through. The effectiveness of the interface is evaluated in comparison to related work, on the basis of a recent usability study.

The system has been developed as a web application. The user interface enables user navigation along a path by means of transitions between panoramic images. The three-dimensional rendering of the environment is simulated by mapping the spherical images within a sphere and by placing the camera, and then the point of view, at the center.

Users can browse each panorama in two ways: 1) image dragging allows the user to rotate the point-of-view and re-orient the camera, 2) zooming can be executed using the mouse-wheel or by double-click.

The navigation among spherical images has been carried out through the dynamic replacement of the texture mapped into the sphere, according to user interaction. The update of the texture is done taking into account the optimal zoom level for the transition. This can occur when the user zooms in the outward direction and exceeds the threshold pre-computed by the Sub-scene matching module.

Sample navigation across different images
Sample navigation across different images

The application is able to show interactive hot-spots in the virtual walk-through. Each hot-spot can be activated by users and it provides several multimedia additional material about specific POIs. Hot-spots are constituted by four graphic icons arranged in a circular menu. Each item represents one of the following multimedia categories:

  • gallery of images/videos (yellow icon);
  • PDF (red icon);
  • 3D object (green icon);
  • indoor panorama (blue icon).

All these multimedia artefacts are shown inside a floating panel oriented contextually to the panoramic environment; in addition the system is able to provide them in real-time with the best spatial arrangement with respect to the user point-of-view.

Sample interaction with a hot-spot to show an image of the inside part of a church and a 3D model of the church building
Sample interaction with a hot-spot to show an image of the inside part of a church and a 3D model of the church building

In this way, the application overcomes the limitation of standard panorama-based interfaces in which additional content (3D or 2D) is shown in two-dimensional lightboxes covering the main navigation area.

Furthermore, hot-spots provides an additional handle at the centre that allows users to drag the hot-spots in order to better organize the content in the interface view. Context awareness is provided through a mini-map at the bottom-left angle of the screen.

VIDEO: to be uploaded