Keywords

1 Introduction

The spatial documentation of cultural heritage sites using conventional surveying methods based on laser scanning and photogrammetry has been well established for conservation and restoration—see, for example, the summary of metric survey techniques for heritage documentation in [1]. Digital technologies have increased speed and completeness in that kind of survey, offering new opportunities to collect, analyzing and disseminate information [2], according to a project’s scope timeline and budget constraints. However, due to the high costs of laser scanners, two approaches have been suggested for an intermediate documentation typology: the use of Virtual tours combined to Information Modelling [3] and the extraction of 3D structure from images captured from multiple viewpoints, utilizing different type of camera [4]. Moreover, the main focus of recent research is the visual, geometric, and textural characteristics of a single monument, while integration with other monuments and additional information—such as historical overview, detailed description, and location—are missing [5]. For example, a study on an exhaustive sample of 148 archaeology websites [6] shows that the 80% provides contextual information, 50% share data textually, using simple html pages or link to PDF document and only one website has virtual data in the form of an interactive map with data and image visualized in a callout [7]. In this article, we illustrate digital data, virtual tours and 3d models for representing selected objects located in ‘Balsignano Village’, integrated in a website with an intuitive interface (Fig. 1).

Fig. 1.
figure 1

The logical scheme of the website [8]: menu items (green background), Point of Interest (yellow background), and their contents (transparent background). (Color figure online)

Full size image

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.

Destroyed a first time in 988 following a Saracen raid, it was rebuilt and donated in 1092 by the Duke Norman Ruggero to the distant ‘S. Lorenzo’ Benedictine abbey of Aversa. Finally, Balsignano was devastated in the sixteenth century by French and Spanish troops who contended for hegemony in southern Italy [9]. Currently there are:

  • a substantial part of Fortifications, with slit openings;

  • the Castle (Fig. 2);

    Fig. 2.
    figure 2

    Virtual tour of the Castle – external side.

    Full size image

  • ‘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

The objectives pursued in the design and implementation of the website are:

  • 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.

In the following, we will describe the three main stages characterizing the development of any application [10]:

  • documentation (gathering of information);

  • representation (technical aspects of the digitization);

  • dissemination (technical aspect about information and knowledge presentation).

3.1 Documentation

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 [13] in the Picture Gallery ‘Corrado Giaquinto’ in Bari. Other valuable information was found on the Internet [9].

This significant amount of documents was selected to establish accurate references between sources and descriptions available in the representation output.

3.2 Representation

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.

Virtual Tours.

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 [14].

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 [15]. 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.

To overcome these problems, we tested a multi-camera system made by assembling six fixed cameras in a prearranged angles pack specifically designed to capture the 360-degree scene (Fig. 3, left), encountering some problems with their assembling and synchronization; moreover it has a high cost to provide high-quality imagery.

Fig. 3.
figure 3

360-degree systems: Commercial six camera spherical array specifically designed (left—source: Aerial Technology International, Oregon City, United States); Ricoh Teta Plus mounted on a telescopic rod in carbon fiber, with a cylindrical, low-radius, heavy base specifically designed to reduce its footprint (right).

Full size image

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.

Although the Nikon camera is newer, the quality of the panorama produced by the stitching firmware is lower than that of the Ricoh camera (Fig. 4).

Fig. 4.
figure 4

Detail of panorama in the stitched area—laboratory test using two compact camera having two back-to-back sensors and fish-eye lenses. The results are poor for Nikon Key Mission camera (left) and good for the Ricoh Teta Plus camera (right)

Full size image

We used the second one to shoot external panoramas instantly as that during a snowfall (Fig. 5), linked to a panorama produced using several shots from a camera mounted on a drone, to produce a virtual tour (Fig. 6).

Fig. 5.
figure 5

Panorama—firmware stitched—by Ricoh Teta Plus, during a snowfall.

Full size image
Fig. 6.
figure 6

Virtual tour during a snowfall, based on two panoramas linked through hotspots in the floorplan or clicking on the ‘drone’ button: terrestrial view (left) based on panorama in Fig. 5; aerial view by drone (right).

Full size image

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.

To improve the significance of the virtual tour, the panoramas developed have been enhanced using the Kolor Panotour Pro software, embedding—among others—hotspots to access different types of digital media (Fig. 7) as well as functional keys (blue circle with icon and white perimeter to stand out on dark backgrounds) to open:

Fig. 7.
figure 7

Virtual tour of ‘S. Maria’ church organized into five linked panoramas: A. Main Entrance; B. Front nave (window on left: floorplan with hotspot); C. Back nave (window on left: info about the fresco); D. Lateral room (window on left: general historical info—text and sound); E. Rear outside view (window on center: historical image gallery).

Full size image

  • 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.

3D Models.

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 [16]. However, depending on the goal of the modeling, low-cost solutions hardware and software have been developed.

The innovative 3D modeling procedure presented here was used to build the two churches model using a ‘structure from motion’ (SfM) software by means of images taken by the following cameras:

  • Zenmuse X3 (CMOS sensor 12.4Mp; f/2.8; FOV 20 mm) integrated on an unmanned aerial vehicle ‘Inspire 1’ (Fig. 8, left) for the survey of remote objects (e.g., vaults and capitals) where physical access is delicate or impossible according [17];

    Fig. 8.
    figure 8

    The 3D model was obtained using SfM software by means of images by a camera mounted on an unmanned aerial vehicle (left) and by a multi-camera system ad hoc-developed (right).

    Full size image

  • 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 first case, the last photo of the first station must be followed by the first photo of the second station and so on forming a spiral path (Fig. 9, left).

Fig. 9.
figure 9

Survey scheme with convergent axis (left), and parallel axis (right).

Full size image

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.

GSD = pixel size × average shooting distance/focal length = 1.7 mm, where:

  • 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.

We made also a laser scanner survey to compare output and procedures, following the method already used [18]: the multi-camera is cheaper, requests basic skills and a reduced survey time; unfortunately processing time is very high using standard workstation; on the other hand, using a laser scanner only at ground level, gross errors occur for covers and recessed area (Table 1).

Table 1. Scanner laser vs Multi-camera system
Full size table

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 3D model obtained was then exported in 3DHop software, to be displayed in real-time and manipulated interactively (Fig. 10).

Fig. 10.
figure 10

3D model displayed in real-time and manipulated interactively (3DHop software).

Full size image

3.3 Dissemination

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 [19], 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’ [24]. 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) [25], 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 [26]. 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%)’ [27].

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’ [28].

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.

Therefore, even if Wix is designed and built specifically so it is easy for non-developers to use with ease, it is not an open source platform so its codes are not available to modify and may be some indirect costs involved, such as paying for external support. Today, free open source platforms to build a website are:

  • 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.

To make the most of the Joomla benefits, we have defined according to [29]:

  • 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.

In addition, we have implemented the ‘JA Image Hotspot’ module [30], allowing to integrate into the website a responsive map (Fig. 11). It is a flexible extension used for page rendering to obtain an interactive map from a static image, filling in information for a specific area and adding markers with title and description. The module resizes the web map automatically based on the width of the user’s browser window, preventing the pixel references within the image map from pushing some hotspots off of the screen.

Fig. 11.
figure 11

The responsive web map in the website. The user can choose to display a tooltip (pop-over) when he clicks on the hotspot’s position.

Full size image

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.

5 Conclusions

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 [31].