Digital Data, Virtual Tours, and 3D Models Integration Using an Open-Source Platform
The site of the ‘Balsignano village’ in Modugno (Italy), for some years has been the object of attention by scholars. Recently renovated, its valuation is nowadays the main objective for that Municipality. The aim of this article is describing our approach in integrating digital data, virtual tours and 3d models of the village elements to produce an interactive tool available on the internet, stimulating the desire to physically visit the settings. Our findings can be generalized to any context in which a link between a website and a physical site represent a challenge for low-budgeted Administrations.
KeywordsVirtual tour Omni-directional cameras 3D models Multi-camera systems Joomla
2 The Case Study
The village, which is near a branch of the ‘Via Traiana’, owes much of its charm to the suggestive position in a context that has still preserved the natural appearance of the Apulian agricultural landscape, characterized by ‘trulli’, rock settlements, dry stone walls, areas for grapes pressing, natural ice storages.
The first historical documentation on Balsignano consists of one parchment of May 962, preserved at the Basilica of ‘S. Nicola’ of Bari. Balsignano develops between the 10th and the 11th centuries as a fortified settlement, served by local roads.
a substantial part of Fortifications, with slit openings;
- the Castle (Fig. 2);
‘S. Maria’ church (14th century);
the Benedictine monastery;
‘S. Felice’ church (11th century).
In 1981, Balsignano, as exceptional example of a medieval complex, was subjected to the protection provided for by the Italian law 1089/39. The works carried out over the last twenty-five years, due to the constant lack of funds, have concentrated on the structural and functional recovery of individual buildings. The complex is opened to the public since November 2016.
3 The Website Contents
allowing users to explore the contents of the archive through the integration of this material into virtual tours and 3D models
enhancing the sense of cultural presence, which can help to achieve the cultural aims of the project;
ensuring accessibility and wider dissemination of the project.
documentation (gathering of information);
representation (technical aspects of the digitization);
dissemination (technical aspect about information and knowledge presentation).
The primary source of documentation for the project were books [11, 12] and the photo and graph archives (‘Galleries’ in Fig. 1) of the Archaeological Superintendence of Puglia Region, the Architectural and Landscape Heritage Superintendence for Bari, BAT and Foggia, and the ‘Simone’ section  in the Picture Gallery ‘Corrado Giaquinto’ in Bari. Other valuable information was found on the Internet .
This significant amount of documents was selected to establish accurate references between sources and descriptions available in the representation output.
One of the factors considered in our work was to offer a visual feedback, improving the sense of presence. Thus, we followed two approaches, both image based, to produce virtual tours and 3d models.
Computer-generated representation of the real world are modeled through the personal perception of reality and are time-consuming using traditional Virtual Reality techniques. On the contrary, virtual tours are unbroken view of a whole scene surrounding an observer, giving a sense of presence .
The most common systems include a network of predefined viewing locations linked together to create various path.
They use a sphere projection in ‘equirectangular’ image having 2:1 width-high ratio, called 360-degree panorama.
There are many systems for acquisition of image suitable for building panoramas . The most common systems include rotational single camera system: the panorama is created by stitching together several images (partially overlapping with each other for alignment purposes) taken by a rotating camera placed in an arbitrary viewpoint.
To hold up image quality at zooming, it is required to produce a high-resolution panorama, obtainable stitching images acquired through a telephoto lens equipped camera mounted on a rotating motorized mechanism.
The disadvantage of this concept is the long acquisition time and the need to edit images to equalize different exposures—especially outdoor—and delete moving objects, as walking people or moving cars.
An ultimate test was made using omni-directional cameras, having two back-to-back sensors and fish-eye lenses: Nikon Key Mission and Ricoh Teta Plus (Fig. 3, right), producing respectively 7744 × 3872 and 5376 × 2688 pixel panoramas.
Finally, we utilized for indoor panoramas a wide-angle lens equipped camera—mounted on a panoramic head—producing medium-resolution panoramas (10.000 × 5.000 pixel).
Panoramas are displayed on an interactive viewer, allowing their rotation, tilt, and zoom; most of them are just rotating images without further functionalities.
In the simplest application scenario, several individual panoramas are linked to each other using navigational hotspots to enter and exit scenes: when it is clicked in the panorama, the viewer is brought to the next panorama of the virtual tour.
To this end, we are now using AutoGarrow, a plug-in that allows the virtual tour navigation using the GPS coordinates of the camera generating panoramas.
the floorplan with the location of the user and navigational hotspot;
a google map with navigational hotspot of the whole project;
a window with project info;
a window with an image gallery.
To navigate the virtual tour, the user can move between predefined viewing locations, which are linked together to create various paths as we have seen. To overcome this limited freedom of movements within the environment, 3D models of some buildings have been developed.
Many costly technologies, such as 3D scanning methods, are available for 3D digitization of cultural heritage artifact . However, depending on the goal of the modeling, low-cost solutions hardware and software have been developed.
GoPro Hero3 + Black Edition (CMOS sensor 12Mp; f/2.8; FOV Ultrawide 17.2 mm, medium 21.9 mm, narrow 34.4 mm) mounted on a multi-camera system ad hoc-developed (Fig. 8, right) operated from the ground, to cover the entire targeted object.
The Multi-camera System.
In this work, six camera were used, arranged on a carbon fiber rod in different height positions. The procedure provides for establishing a path along which to position the system every meter, so assuring a superimposition of 50%, acquiring synchronized images by each camera using a remote control.
To simplify the post-processing, the images acquired at each station point will be renamed according to whether it is an architectural survey around a monument (so-called ‘convergent axis’), or a survey of a single facade (so-called ‘parallel axis’).
In the second case, the last photo of the first station must be followed by the last photo of the second station and, proceeding backwards, resume again with the first photo of the next station, forming a serpentine path (Fig. 9, right).
It should be emphasized that the sensor of the GoPro camera does not reflect the image quality standard required for a successful alignment process. This low quality is determined by the fisheye lens having a focal distance of 2.8 mm (equivalent in the camera reflex version to a 15.0 mm and therefore to a shooting range of 170°), installed on these cameras to shoot especially sports actions.
This wide-angle lens, despite having an excellent depth of field, has strong aberrations in the peripheral parts, prejudicing the process of recognizing homologous points. To reduce this problem, the frame of each camera is settled, through an internal menu, to the ‘medium’ value, so recording only the central part of the shot having reduced distortions. This operation, called ‘cropping’, reduces the final resolution to 7 Mp.
It should also be noted that the sensor on board these cameras belong to the range of economic sensors since each pixel has a size of just over 1.5 μ, far from the minimum 3 μ recommended for obtaining a good image. It is true that remaining below this threshold, due to the increase in electronic circuitry and the amplification of the signal applied to each pixel; as a result, a background noise disturbing the image quality is generated. For this reason, it is necessary to determine in advance the Ground Sample Distance (GSD) value corresponding to how much real surface is captured in each pixel.
the pixel size: 0.00154 mm (sensor width divided by the number of sensor pixels: 6.16 mm/4000);
the lens focal length: 2.77 mm
the average shooting distance: 3000 mm
The GSD value obtained at an average distance of 3 meters, even if acceptable, was slightly higher than the recommended value, which should usually not exceed 1.5 mm.
A solution to reduce the GSD value is to reduce the shooting distance, even if this involves a greater number of shots to preserve the overlap of 50% of the frames.
Scanner laser vs Multi-camera system
Equipment cost (Euro)
Total equipment weight (Kg)
Parts to be assembled
Acquisition process difficulty
Preparation times for each shot (minutes)
Acquisition time for each shot (minutes)
Total acquisition time (hours)
Shot hight (meter)
Up to 1.5
Up to 10
Data management time (hours)
Processing time (days)
Software cost (euro)
The 3D model produced appears as a faithful reproduction of the scene respect to the laser scan cloud of colored dots (supplementary image acquisition and software are needed to transform it into a mesh).
To post-process the images, two SfM 3D reconstruction software were used: Photoscan Agisoft and Zephyr 3DFlow. In both software, while performing the self-calibration of the frames, their alignment did not give acceptable results.
Then we proceeded to calibrate the optics of the cameras using an application supplied with Photoscan (Agisoft Lens) that, by performing a thorough analysis on several shots to a grid pattern, generates a calibration file to be applied before alignment.
The goal was to find out how to develop an application accessible and able to combine all different types of data and output produced.
The dissemination tool is a multiplatform web site—described in the next paragraph—where users are interact with virtual tours and 3D models, with the support of text and sounds. Regardless of the order in which rooms are accessed, visitors are free to move around each environment, navigate the space and interact with it according to their own interests.
“You can’t replicate that in VR, but you can give people a preview and understanding of what they would experience if they went to visit physically” says Abi Mandelbaum , CEO and co-founder of YouVisit (http://www.youvisit.com/), an organization that specializes in VR tours and works with more than 800 clients to drive business results and engage consumers with interactive 360° experiences. The University of Massachusetts Amherst published a study on the effects the VR has on people and travel destinations. The research showed that “VR generates pleasant emotions towards the destination even though it’s a new form of advertisement” and VR heightens the sense of presence by determining people’s interest, since they can engage much more than they could just by reading a simple tour guide; pointing out that people were more likely to share their VR experience on social media and talk to their friends about it [20, 21].
4 The Web Site Implementation
‘When designing a web site layout there are some common mistakes that often appear’ [22, 23]. These mistakes cover not only design aspects but also general workflow tips that will get the job done nicely. We have supported the Municipality from concept through to post-implementation support of the web site; our goal was to not only provide a web solution but also to define features concretely, determine technology integration specifics, and prioritize anticipated future uses of the website to ensure that the system design is a scalable one.
The development process started with initial phase, ‘ideation’ . During this phase, we worked with the Municipality to define the requirements for specific site functionality such as Virtual tours, 3D model, news, videos, social bookmarking, search, mobile device accessibility, and other such features. Designing a good website that combined strategic thinking and emerging technologies was a tricky balancing act to pull off.
In this step, the team needed to work with all stakeholders to gather as much information as possible about how they believed the web- site should be function. At first, the Municipality did not have a web hosting service that allowed us to make initial website accessible via Internet and seen by anyone in real-time, by facilitating cooperation between stakeholders. In this regard, we decided to adopt a platform to build the website (site builder) and make it accessible via Internet by authorized users.
On the wide spectrum of website building solutions, Wix was the right choice and it has allowed us to build an initial model of the website. This platform is beginner-friendly, has sleek designs, and boasts the easy drag and drop feature. Wix has become incredibly successful and has attracted over 103 million users to date; it has an extensive theme collection and many customization tools. Wix, with its users pre-designed theme (more than 500) , has allowed us to give an idea on how to arrange website content and to share the web-solution with the Municipality.
At a later stage, the aim was to have a clear understanding of what the layout needs would be when designing sections beyond the homepage. Identifying the goals for the website, the functionality needed and the skills and resources to manage it helped us determine the right kind of web design for needs. The cost associated with managed services of a web site (to make functional changes, structural/layout changes, design changes, content changes, monitoring, and backups) is hard for Public Administration to estimate, plan and maintain. In addition, if we add that, in the Italian public administration, it is very difficult to find someone with experience in software development or website building . The cost associated rises: ‘According to the DESI (Digital Economy and Society Index) in 2016 in Italy 48% of the workforce has insufficient digital skills (EU average 37%) on the basis of a 21% that has no digital competence and has never used the Internet (EU average 37%)’ .
The web-design step goes through those problems that cannot be resolved through simply solution but rather through a good layout, a clear hierarchy and a content easily navigable. The first thing to do is to come up with a top-level framework that solves all the design problems. This framework is the User Interface (UI) that surrounds the content and helps the user perform actions and navigate through it. UI includes the navigation and components like sidebars and bottom bars.
Our goal was to build a site that could work not only in the ideal scenario, but also in the worst-case scenario. For instance, a user could be using a small screen and check the site when there is barely any content on it so it looks broken. In this phase, we have focused on the need to emphasize usability, but also provide an attractive web presence for the Municipality. ‘Current best practices call for spending about 10% of a design project’s budget on usability’ .
In many contexts, such as the tourist domain, creating a website version for each resolution and new device would be impossible or at least impractical. After gathering, these needs we have chosen a Content Management System (CMS) platform, a web site authoring and administration tools that could provide a reliable, secure, and cost-effective content management solution to work more wisely and efficiently.
Joomla, the biggest CMS platform, mostly used;
Drupal, a great CMS;
WordPress, the perfect choice for small content oriented websites.
One of the main advantages of CMS is that it enables non-technically minded users to create functional pages or upload and modify content themselves, without having to outsource the work to a webmaster, or understand programming languages such as HTML5 or PHP.
The team has developed the final website using Joomla, a flexible, reliable, mobile-ready and user-friendly platform.
Unlike WordPress, which is mainly a blogging and small website platform, and unlike Drupal which is meant mostly for big websites. In the field of web design and development, we are quickly getting to the point of being unable to keep up with the endless new resolutions and devices.
Technical requirements of website;
Workflows, processes and procedures to creating, publishing and managing digital content of website;
Who should have access to the CMS, and at what level.
During the templating, programming and customization phases, we have adapted the base technologies selected in the design phase; we have merged the graphical design with the functionality by creating a graceful template, including the custom programming (modules or components) with the chosen Joomla template.
The software solution consists of a mix of flexible grids and layouts, images and an intelligent use of CSS media queries. As the user switches from their laptop to iPad, the website automatically switches to accommodate for resolution, image size and scripting abilities.
This advanced solution eliminates the need for a different design and development phase for each user device. In this regard, we have integrated a ‘Responsive Joomla Template’ into the website.
With Responsive Templates the necessity to swipe around to find hidden sidebars, zooming in and out to make the text comfortable enough to read simply falls off: it fit all possible devices that have an access to the web. After all, the look and feel of mobile version reflects the original website.
In our work, we developed an application that allows users to navigate the virtual representations and access the cultural resources in a dynamic way, according to their preferences and interests, thus experiencing ‘Balsignano village’ in an entertaining manner.
The application of digital techniques for the recording and visualizing the site of the ‘Balsignano village’ demonstrated how these tools can provide relevant and accurate information regarding the site’s conservation as well as a posterity record in case of damage or further deterioration.
The proposed approach—interactive virtual tour and 3D models generated by images and as a whole constitutes an economic and practical alternative to the 3D scanner technology. Such integrated information can be beneficial both for accurate documentation and tourism.
It could be interesting to evaluate to what extent such an application can affect people’s perceptions about ‘Balsignano Village’ and influence the will of actually visiting the place. Result of this evaluation could be useful to understand the power of virtual tours and 3d models on current tourism.
We have started to test 3D scenes reconstruction workflow using omni-directional camera Ricoh Teta Plus: it dramatically improves the performance of SfM software since the tracked interest points will not miss with a long base-line and sharp rotation .
This research was supported by the Municipality of Modugno (Italy) within the project ‘Mu.S.A. – Must See Advisor’. We thank our colleagues from ITC-CNR who provided survey and outputs: Milella, N., Zonno, M., Battista, V., and Leandro, V.
Maiellaro, N.: website project, testing, and 360 degree camera trials (Sects. 1, 2, 3); Varasano, A.: system architecture, and software development (Sect. 4); Capotorto, S.: 3D models (in Sect. 3).
- 1.Letellier, R.: Recording, documentation, and information management for the conservation of heritage places: guiding principles. J. Paul Getty Trust, Los Angeles (2007). https://www.getty.edu/conservation/publications_resources/pdf_publications/pdf/guiding_principles.pdf. Accessed 4 Apr 2018
- 2.Percy, K., Ward, S., Santana Quintero, M., Morrison, T.: Integrated digital technologies for the architectural rehabilitation & conservation of Beinn Bhreagh Hall & Surrounding Site, Nova Scotia, Canada. In: ISPRS Annals of the Photogrammetry, Remote Sensing and Spatial Information Sciences, vol. II-5/W3, pp. 235–241 (2015). https://www.isprs-ann-photogramm-remote-sens-spatial-inf-sci.net/II-5-W3/235/2015/isprsannals-II-5-W3-235-2015.pdf. Accessed 4 Apr 2018CrossRefGoogle Scholar
- 4.Bastanlar, Y., Grammalidis, N., Zabulis, X., Yilmaz, E., Yardimci, Y., Triantafyllidis, G.: 3D reconstruction for a cultural heritage virtual tour system. In: The International Archives of the Photogrammetry, Remote Sensing and Spatial Information Sciences, Beijing, vol. XXXVII, part B5, pp. 1023–1028 (2008). http://www.isprs.org/proceedings/XXXVII/congress/5_pdf/177.pdf. Accessed 4 Apr 2018
- 6.Freeman, M.A.: Not for casual readers: an evaluation of digital data from virginia archaeological websites. Master’s thesis, University of Tennessee (2015). http://trace.tennessee.edu/cgi/viewcontent.cgi?article=4785&context=utk_gradthes
- 7.The Colonial Williamsburg Foundation, eWilliamsburg. http://research.history.org/ewilliamsburg/map.cfmTravel and Tourism Competitiveness Report (2015). http://www3.weforum.org/docs/TT15/WEF_Global_Travel&Tourism_Report_2015.pdf
- 8.Maiellaro, N., Varasano, A.: BalsignanoModugno (2017). http://www.casaledibalsignano.it. Accessed 4 Apr 2018
- 9.Macina, R.: Balsignano - dal degrado al recupero. Edizioni Nuovi Orientamenti (2012). http://www.pugliadigitallibrary.it/media/00/00/74/957.pdf. Accessed 4 Apr 2018
- 11.Balsignano, un insediamento rurale fortificato - Guida alla visita. Caggianelli, R. (ed.) Mario Adda Editore (2015)Google Scholar
- 12.Balsignano, un insediamento rurale fortificato - Archeologia, studi e restauri. Depalo, M.R., Pellegrino, E., Triggiani, M. (eds.) Mario Adda Editore (2015)Google Scholar
- 13.Fondo Simone. http://www.pinacotecabari.it/index.php/patrimonio-museale/patrimonio-fotografico/fondo-simone. Accessed 4 Apr 2018
- 14.Eiris, R., Moud, H.I., Gheisari, M.: Using 360-degree interactive panoramas to develop virtual representations of construction sites. In: LC3 2017: Volume I – Proceedings of the Joint Conference on Computing in Construction (JC3), 4–7 July 2017, Heraklion, Greece, pp. 775–782 (2017)Google Scholar
- 16.Santos, P., et al.: CultLab3D—on the verge of 3D mass digitization. In: Proceedings of the Eurographics Workshop on Graphics and Cultural Heritage, The Eurographics Association, Aire-la-Ville, Switzerland, 6–8 October 2014, pp. 65–74 (2014)Google Scholar
- 18.Maiellaro, N., Zonno, M., Lavalle, P.: Laser scanner and camera-equipped UAV architectural surveys. In: The International Archives of the Photogrammetry, Remote Sensing and Spatial Information Sciences, Volume XL-5/W4, 2015 3D Virtual Reconstruction and Visualization of Complex Architectures, 25–27 February 2015, Avila, Spain, pp. 381–386 (2015)CrossRefGoogle Scholar
- 19.Mandelbaum, A.: Immersive Technology Expert. Co-Founder & CEO of YouVisit. https://www.linkedin.com/in/abimandelbaum. Accessed 13 May 2018
- 20.Griffin, T., Giberson, J., Lee, S.H.M., Guttentag, D., Kandaurova, M.: Virtual reality and implications for destination marketing. In: TTRA International Conference (2017). https://scholarworks.umass.edu/cgi/viewcontent.cgi?referer=&httpsredir=1&article=2103&context=ttra. Accessed 13 May 2018
- 21.Tussyadiah, L., Wang, D., Jia, C.H.: Exploring the persuasive power of virtual reality imagery for destination marketing. In: TTRA International Conference (2016). https://scholarworks.umass.edu/cgi/viewcontent.cgi?referer=&httpsredir=1&article=1180&context=ttra. Accessed 13 May 2018
- 22.Guglieri, C.: 23 steps to the perfect website layout (2017). https://www.creativebloq.com/web-design/steps-perfect-website-layout-812625. Accessed 4 Apr 2018
- 23.Spolan, S.: Common website design problems (2016). https://www.zivtech.com/blog/8-common-website-design-problems. Accessed 4 Apr 2018
- 24.Dam, R., Teo, S.: What is ideation – and how to prepare for ideation sessions (2018). https://www.interaction-design.org/literature/article/what-is-ideation-and-how-to-prepare-for-ideation-sessions. Accessed 4 Apr 2018
- 25.Wix Review 2017 – The Main Pros & Cons. Wix advantages and disadvantages (2017). http://www.wittythemes.com/wix-review. Accessed 4 Apr 2018
- 26.Rapari, G.: Una PA senza competenze digitali, Assintel: ‘Prenda esempio dalle aziende’ (2017). https://www.agendadigitale.eu/cultura-digitale/una-pa-senza-competenze-digitali-assintel-prenda-esempio-dalle-aziende. Accessed 4 Apr 2018
- 27.Carlizzi, D.N., Quattrone, A., D’Errigo, F.: Sblocco del turn-over: occasione per introdurre futuro nelle PA (2017). https://www.agendadigitale.eu/cultura-digitale/una-pa-senza-competenze-digitali-assintel-prenda-esempio-dalle-aziende. Accessed 4 Apr 2018
- 28.Nielsen, J.: Usability 101: Introduction to Usability (2012). https://www.nngroup.com/articles/usability-101-introduction-to-usability. Accessed 4 Apr 2018
- 29.Content management systems - Advantages of using a content management system. https://www.nibusinessinfo.co.uk/content/advantages-using-content-management-system. Accessed 4 Apr 2018
- 30.JA Image Hotspot (2018). https://www.joomlart.com/joomla/extensions/ja-image-hotspot-module. Accessed 4 Apr 2018
- 31.Song, M., Watanabe, H., Hara, J.: Robust 3D reconstruction with omni-directional camera based on structure from motion. In: Proceedings of the International Workshop on Advanced Image Technology 2018, 7–9 January 2018, Chiang Mai, Thailand (2018). http://www.iwait2018.org/Paper%20IWAIT2018/IWAIT2018_paper_105.pdf. Accessed 4 Apr 2018
Open Access This chapter is licensed under the terms of the Creative Commons Attribution 4.0 International License (http://creativecommons.org/licenses/by/4.0/), which permits use, sharing, adaptation, distribution and reproduction in any medium or format, as long as you give appropriate credit to the original author(s) and the source, provide a link to the Creative Commons licence and indicate if changes were made.
The images or other third party material in this chapter are included in the chapter's Creative Commons licence, unless indicated otherwise in a credit line to the material. If material is not included in the chapter's Creative Commons licence and your intended use is not permitted by statutory regulation or exceeds the permitted use, you will need to obtain permission directly from the copyright holder.