REDISCOVERING CULTURAL HERITAGE SITES BY INTERACTIVE 3D EXPLORATION: A PRACTICAL REVIEW OF OPEN-SOURCE WEBGL TOOLS

: Georeferenced reconstructions can help understand the dynamic evolution of the urban context surrounding a historical site, supporting decision-making processes in the field of urban planning. The development of web applications that allow the interaction between 2D and 3D products, as well as their exploration, can facilitate virtual inspections and foster collaboration in digitization of interventions and site evolutions over time. The article discusses how virtual scene reconstructions and visits can provide alternatives to traditional in-situ tourism promotion, through digital storytelling solutions for the exploration of sites. The article also describes how 3D storytelling technologies are currently being used for dissemination cultural heritage sites. The case study of the Castello Farnese, an old XVI century heritage site in Piacenza (Italy), test the adoption of two distinct free and open-source JavaScript WebGL, Potree and Cesium, for the rendering of photogrammetric and laser scanning georeferenced scaled products and for the integration of narrative features such as annotations, camera animations, texts, and other multimedia contents. Potentials and limitations of both tools are discussed in detail, highlighting how they can be implemented for enhancing user experience in virtual tour and exploration of 3D products. In order to guarantee replicability for other case studies, source code of the implemented application is shared on GitHub along with its documentation for contributions.


INTRODUCTION
The constant evolution of urban landscapes and the reinvention of spaces set new challenges for the preservation and enhancement of Cultural Heritage (CH). This is particularly evident for hidden sites that are strongly affected by urban transformations and whose changes in time and space are not clearly documented through traditional dissemination approaches (Hassan and Fritsch, 2019). Such situations highlight the need for identifying technologies and defining methodologies able to easily reconstruct sites of interest but specially to disclose their history and emphasize their relationship to the place where they are located and the communities that inhabit it. Unmanned Aerial Vehicle (UAV)-photogrammetry and Terrestrial Laser Scanning (TLS), in combination with web interactive platforms like Web-based Graphic Libraries (WebGL), can fill the gap between the physical reality and the digital world, documenting existing artifacts and preserving their history (Vennarucci et al., 2021, Gagliolo et al., 2017, Gagliolo et al., 2018. Sharing digital twins of monuments or CH sites with a wider audience opens several opportunities in different areas, ranging from geomatics to urban planning, but also to tourism and architecture. Indeed, the accessible accurate 3D model of an ancient building with data in the form of pointclouds and 3D triangulated meshes provides essential information for studying adequate restoration measures, making it possible to adopt Building Information Modelling (BIM) standards (Dursun et al. 2022, Patrucco et al., 2022. Moreover, this data can be further enriched through the application of state-of-the-art machine and deep learning algorithms that allow for first identifying critical structural components and then evaluate the need of targeted interventions , Matrone et al., 2020. Under this perspective, recent progresses in the field of Virtual Reality (VR) and Extended Reality (XR) also exploit the potential of the real-time integration of survey data with real world elements for the improvement of site maintenance management processes (Teruggi et al., 2021). On a different scale, georeferenced reconstructions also allow to understand dynamically and interactively the evolution of the context in which an historical site is located, supporting decision making processes in the field of urban planning (Quintilla-Coston et al., 2022). The development of geodatabases that enable the interaction between 2D and 3D products, as well as their exploration, not only facilitate a virtual inspection of the data but also foster the collaboration in digitisation of consequent interventions and site evolutions in time (Malinverni et al., 2019). Lastly, virtual scene reconstructions and visits implemented in dedicated platform suggests alternatives or complementary approaches to traditional in-situ tourism promotion, as well as relevant digital storytelling solutions for the exploration of sites with difficult accessibility for different reasons, ranging from areas affected by military interventions to pandemic restrictions (e.g. COVID-19) (Trichopoulos et al., 2023). Additionally, merging data coming from different sources in a unique coherent reference system on a shared environment provides both support to collaborative a posteriori studies of cultural heritage (Bent et al., 2022) and the blending of geometric and historical-cultural context information (Elbshbeshi et al., 2023, Banfi et al., 2023. This article illustrates possible methodologies for building interactive solutions to document CH through the customization of digital open-source platforms that allows for both technical inspection and immersive storytelling purposes. The platforms considered in this study are Potree and Cesium JS. They allow experienced users to make measurements and export products such as cross-sections, as well as audience without any technical background to explore the 3D model of the surveyed structure, reliving its history. The solutions were tested on the site of an Italian castle from the XVI century starting from 3D data acquired by in-situ surveys with UAV-photogrammetry and TLS.

3D STORYTELLING TECHNOLOGIES
The growing availability of tools for immersive technologies has led research to investigate potential solutions for digital storytelling of CH sites (Muenster, 2022). Moreover, the integration of photogrammetry and laser scanning techniques allows for a realistic rendering of the surveyed environment and enables users to interact with digital models reconstructed from actual surveys of the site (Gabellone, 2023). Starting from pictures, point clouds and meshes, such applications are able to recreate a virtual environment that is explorable, through predefined indications and taking advantages of survey data itself (e.g. georeferenced products, oriented or 360 images). The state-of-the-art of immersive technologies highlights the adoption of game engines for storytelling purposes, custom Web Graphic Libraries (WebGL) and 3D web repositories with different level of accessibility and openness.

Proprietary solutions
The use of commercial software for cultural heritage site exploration is being documented in literature. Virtual 3D dashboards such as Matterport (Kocaturk et al., 2023), widely adopted in the real estate field, represent valuable option for integrating in a single place accurate reconstruction of a site, 360 degrees images and metrics on floor and object dimensions. Other approaches, however, could offer more customizable solutions, defining specific tools that unlock different ways of experiencing the 3D environment for the user. Game engines engage users with a gamified perspective, making it possible tto adopt headsets, special equipment that, if worn by the gamer, enable Virtual Reality (VR) capabilities and interactivity with the scene itself. CH 3D platforms make use of these solutions, especially for virtual guided tour of museum of archaeological sites based on workflows developed on top of Unity (Unal et al., 2018) and Unreal Engine (Dhanda et al., 2019, Notarangelo et al., 2023. However, such applications may not be flexible and easy-to-implement solutions due to the high cost of the required specialised equipment. Moreover, VR platforms do not currently allow sharing the platform on the web, engaging collaboratively many users, and involving them in cooperative and narrative scene annotation and exploration.

Open-source tools
As highlighted in Sec. 2.1, immersive experiences lack some custom functionalities for an effective storytelling of CH sites which may require some coding skills, implying the definition of coding solutions. Concerning open-source solutions, Godot (Popovici et al., 2022), is a customisable game engine that support the development of both 2D and 3D interactive experience. Despite a dynamic community of developers, Godot still lacks advanced 3D functionalities able to unleash the potential of VR approaches. Alternatively, other interactive solutions to document and explore 3D objects are mainly based on Web Graphic Libraries (WebGL) (Nishanbaev, 2020), cross-platform web standards developed that supports and facilitates 3D rendering in most web browsers. One of the first tools of this type was x3dom, launched in 2009 and widely adopted for reconstructing simple websites that allows the exploration of 3D objects or simple scenes (Boutsi et al., 2019). More recently, other JavaScript library that make use of WebGL technologies have been developed for optimising the visualisation of common photogrammetric and laser scanning 3D products. A first solution of this type is Potree (Schütz, 2016), an open-source 3D web viewer developed in JavaScript language that is optimised for rendering large point clouds. The library permits to easily customise the visualisation, selecting 3D objects in the scene (e.g., clouds, vector data, oriented images) and giving users the ability to make measurements, annotations, and cross-sections on the elements. Due to its flexibility of use, this tool is widely adopted for different purposes, ranging from architecture applications, structural health monitoring and technical analysis data gathering (Bergerot et al., 2022). Similarly, another JavaScript-based WebGL called Cesium JS allows to build interactive web applications for rendering a large variety of 2D and 3D geospatial data, including orthophotos, meshes, digital elevation models and point clouds. Such flexibility in the management of different file formats allows to easily integrate Cesium in entirely free open-source software (FOSS) workflow, usually based on the definition of geodatabase for collecting and managing large amount of data for promotion and dissemination of touristic or cultural heritage sites (Capolupo et al., 2022, La Guardia & Koeva, 2023.

METHODOLOGY
This work illustrates a methodology for the implementation of WebGL-based platforms that allows for an interactive exploration of large 3D model of cultural heritage site. In particular, the proposed approach evaluates the adoption of two different free and open-source solutions -Potree and Cesiumfor the integration of different product formats resulting from photogrammetric and laser scanning surveys, testing narrative capabilities through WebGL. The workflow for implementing a 3D interactive interface was defined as follows ( Figure 1): 1.
in situ survey and final products generation 3.
web platform implementation and documentation The application of the proposed methodology follows the execution of an in-situ survey based on photogrammetric and laser scanning acquisitions. Hence, the starting point for the development of web interactive platforms for 3D navigation of the site is represented by georeferenced point clouds, meshes and images oriented on the 3D model reconstructed through Structure from Motion. All the obtained products must be coregistrated in the same reference system: this represents an essential condition for enabling the possibility to insert them in the same scene, maintaining position and scale coherence. Hence, the development environment for the platform is ready for the implementation that consists in a combination of HTML5, CSS and JavaScript scripts respectively for defining the web page general structure, the appearance and style of depicted features and the functions that make it possible to interact with the entities inserted in the 3D scene. For the case study, Potree and Cesium were chosen for their basic functions that already allow for easily loading and managing 3D georeferenced data, as they natively implement other geospatial libraries such as proj4, OpenLayers and geopackage. Potentials and limitations of the two WebGL platforms are tested using native functionalities and simple combination of them aimed at narrating the history of the side, with a special focus on its spatial component. In particular, Potree is used for its essential viewer that already embeds an OpenLayers mini-map visualisation regarding the geolocation of the objects in the scene, such as point clouds, oriented images and annotations ( Figure 2). The basic structure of Potree viewer also includes a sidebar with different default sections that contain measurement, object appearance and filter tools and controls. The point clouds in the scene are first converted with the freely available Potree Converter engine. Similarly, Cesium JS consists of a main viewer container with a 3D globe view (Figure 3) that includes a geocoding search box, navigation instructions, basemap and terrain selection. In the default composition of the graphic user interface, it is not present a sidebar nor a set of tools for measurements. Cesium is able to manage a wide variety of data formatpoint clouds, 3D tiles, BIM features, vector and raster data, web servicesbut is particularly optimised for rendering meshes. Data assets can be loaded from a local storage or from a server. However, through Ion, Cesium allows a free limited cloud storage of assets, enabling the loading of them on the scene simply using a developer key and a unique object identifier. It is worth to mentions that the maintaining company of Cesium JS has already implemented a non-open-source storytelling platform called Stories that allows a limited control on scene transitions and object management. A comparison between the two platform is conducted considering their differences in dealing with and rendering various data formats. The potential of integrating and expanding such platforms in other immersive and VR experiences is also evaluated. The sample code implemented for both the case study applications is also shared openly in dedicated public GitHub repositories containing working examples and project. The documentation with guidelines for implementation and reproducibility is also built on top of the open-source tool Sphinx and hosted on ReadTheDocs (Potree code: https://github.com/labmgf-polimi/potree-chtemplate, Cesium code: https://github.com/labmgf-polimi/cesium-chtemplate).

THE CASE STUDY
The described methodology was adopted for the Castello Farnese, commissioned by duke Pier Luigi Farnese in the XVI century and built in the western part of Piacenza city. Today it is the site of the North Heavy Maintenance Pole (former Military Arsenal). As a result of a process of dismantling, only 3 ramparts of the original 5 are now visible together with one of the curtain walls ( Figure 4). Also, only one indoor rampart is accessible, containing an exhibition with documents and artifacts related to the history of Piacenza. First, an historical study of the artifact was conducted with direct and undirect documentation of the site history. Cartographies preserved in the official Italian State Archives of Parma made it possible to reconstruct the construction and deconstruction steps of the surveyed artifact, providing a preliminary basis for both evaluating its context and planning the subsequent survey. The in-situ survey consisted of a combination of different techniques: a traditional topographic survey (total station + GNSS), UAV photogrammetry and TLS for a complete 3D reconstruction of the remaining elements ( Figure 5).
The International Archives of the Photogrammetry, Remote Sensing and Spatial Information Sciences, Volume XLVIII-M-2-2023 29th CIPA Symposium "Documenting, Understanding, Preserving Cultural Heritage: Humanities and Digital Technologies for Shaping the Future", 25-30 June 2023, Florence, Italy The materialization of a topographic network by using a total station defined a local referenced system. Within the local refence system, a series of targets and/or natural features were measured and adopted as Ground Control Points (GCPs) or Check Points (CPs) for the UAV photogrammetric block. This was carried out with off-the-shelves UAVs DJI Mavic 2 Pro and DJI Phantom 4 RTK, carrying compact RGB cameras and that allowed for the acquisition of images of the outdoor environment. The acquired images were processed with a traditional Structure from Motion approach (SfM) (Westoby et al., 2012) with Agisoft Metashape (Agisoft, 2022). Additionally, TLS allowed for a fast acquisition of dense point clouds of both outdoor and indoor spaces. Finally, measuring of 3-5 targets with a topographic-grade GNSS antenna allowed for roto-translating the local reference system to the global system WGS84 -UTM Zone 32 N. After an appropriate georeferencing, combining different survey techniques together made it possible to achieve a complete reconstruction of site with centimetric accuracy, evaluated on 10 CPs in a Root Mean Square Error (RMSE) of 0.03 m. The point clouds resulting from the photogrammetric and TLS acquisitions were compared, evaluating cloud-to-cloud distances on overlapping regions to assess the quality and the coherence of the products. After that, point clouds were integrated and used for deriving other 3D products, such as triangulated meshes and tiled models (i.e., hierarchical data structure for storing large 3D models though a regular grid structure). After 3D modelling of the construction and deconstruction phases of the castle based on historical documentation, these products, together with 3D model of each historical construction step, were included in the web platforms for digital twin exploration with storytelling features. Hence, two previously introduced open-source tools with different peculiarities were evaluated: Potree and Cesium.

Potree
The first platform implements Potree native functions as well as custom functionalities that aim to simplify the exploration of the 3D digital model of the site with different scenes using point clouds. This goal was achieved using a combination of annotation actions triggered by the user click on a given hotspot inside the 3D scene; oriented images to document and narrate the photogrammetric process; pop-up windows that make possible to see in more details images or to include text contents; shortcut buttons used to simplify into a single command more operations. The work has been articulated on 2 perspectives with different navigation features, dividing the entire model into 2 scenes: bastions outdoor, with an overview of the surveyed structure, and San Giacomo bastion indoor, with products deriving from the TLS survey. The home page of the platform also embeds a set of buttons that allow users to toggle the visibility of drone pictures used for the photogrammetric reconstruction, reload the page in case of connection issue, show detailed instructions on how to explore the scene, open the full-screen visualisation of the viewer. The code written in HTML5, CSS and Javascript languages and an example of the folder structure with a working example have been published open source in a dedicated Github repository, making the Potree template easily reproducible by users interested in adopting this approach. Instructions on how to interpret, customISE and implement the code are also included in the project documentation website hosted on a ReadTheDocs instance, built using the Sphinx Python library.

Annotations
Georeferenced annotations are one of the main native features of Potree, allowing to define the position and the title of a label within the 3D scene. They are always linked to a description box that could be customized as well with HTML5 and CSS, embedding desired multimedia elements. For the case study, these elements represented the starting point for implementing a series of so-called "actions", pre-defined operations and animations that could be triggered by the user input. For example, intuitive icons inserted in the annotation title are used to trigger the change of view from the outdoor to the indoor scene of the San Giacomo bastion (Figure 7 and 8), defining in the code the target coordinates and the new camera position. A similar approach was defined for camera animations in the indoor scene. Indeed, the user by clicking the annotation icon activate the camera movement inside the digital model, simulating a virtual walking tour of the structure as well as guiding the site exploration with pre-fixed visit paths. Moreover, the visibility of particular annotations linked to hidden scene objects (e.g. old passages, traces of supports) is changed only through the execution of particular actions, motivating the user to explore the scene in a gamified approach.

Oriented images
In order to combine the historical storytelling with the divulgation of the 3D reconstruction process of the site, oriented images (i.e., images for which correct location and orientation of the camera during the acquisition is known, e.g., by SfM) are included in the outdoor scene. The feature can be enabled through a camera icon on top-right of the interface resulting in the visualisation of green-bordered rectangles positioned around the model. Each of these shapes correspond to an undistorted high-resolution image taken by the drone and used in the photogrammetric processing phase to reconstruct the 3D model inserted in the Potree scene. By clicking on a rectangle, the interface switch to the image view (Figure 9), allowing the user to zoom in the picture that is aligned to the model thanks to the use of the camera calibration and image orientation information included in the code. This view also makes possible to execute geometric measurements (point picking, distance and area calculation, cross-section extractions, volume computations) directly on the image using the native Potree tools. Such observations are automatically back-projected on the 3D model and could also been exported by users interested in further processing of the data, facilitating a-posteriori collaborative analysis.

Figure 9
Detailed view of an undistorted high-resolution UAVphoto oriented on the model on the Potree-based platform. Through the toolbar on the left, it is possible to directly calculate distances and areas from the selected images, tracing on it lines and polygons of interest.

Pop-up windows
Descriptive information as well as images, videos and other embeddable media content can be inserted inside dedicated popup windows that appears when an annotation is clicked. This operation is useful to temporarily interrupt the navigation of the 3D model and carefully analyse a photo, a video or a text that further details the historical and cultural context of the cultural heritage site. For example, the implementation of a slide-show feature in this case study allows the user to understand how the indoor environment of a bastion is composed (Figure 10), even without a 3D reconstruction of the inside rooms (e.g., if they are not accessible at the time of the survey).

Figure 10
Pop-up window with image slideshow visible on the scene after clicking on a given annotation action on the Potreebased platform.

Cesium
On the other hand, 3D tiled models (i.e., hierarchical data structure for storing large 3D models though a regular grid structure) built from photogrammetry and TLS point clouds and meshes were included in the Cesium-based interface ( Figure  11). The configuration of an additional sidebar on the left of the scene allowed for a definition of a series of actions, ranging from the access to additional project information, authors credits and details in other web pages. This section of the web page could be personalised depending on user needs with other multimedia files (e.g.: logo, links etc.). Moreover, such element served as a navigate section for implementing also pre-fixed tour features. In addition to the current state of the structure retrieved from the in-situ survey, 3D georeferenced models of the construction and deconstruction phases of the Castello Farnese were loaded and overlaid to a Bing satellite imagery basemap. A series of points of interest were defined in the scenes, consisting in a set of point entities that are used for identifying relevant portions of the structure within the whole surveyed scene, such as ramparts, walls and entrance of the ancient castle. To each of these elements a unique title and an explicative description is associated, providing the input elements for the content of the respective narrative panels, active on the scene when the entities is selected or when the camera view transition on them. Figure 11. Homepage for the Potree-based interactive platform of Farnese Castle, overlayed to Bing satellite imagery.

Site storyline
Historical 3D models based on the ancient maps and plans of the Piacenza city were loaded in the scene and their visibility options linked to click events occurring on a storyline list included in the custom sidebar. This was made possible after a georeferencing procedure in the CloudCompare environment applied to 3D models built with SketchUp based on the historiographic investigation conducted in the preliminary phase of the survey ( Figure 12). Hence, each model was loaded in Cesium JS, overlayed to the Satellite Bing imagery and its visibility connected to the input click of the user exploring the scene. For example, in this way users by clicking on a specific phase of the site construction or deconstruction ( Figure 13). Also, through a dedicated button that activate or deactivate the visibility of the current remaining elements of the castle overlayed to the other models, it is possible to make an interactive comparison between the different steps, allowing users to interactively track the extension of the site in time. A fixed camera view pre-defined by the platform developer additionally provides a view on the entire old structure, providing insightful hints on how the whole CH heritage site is inserted in the current urban environment. Such feature is particularly useful to divulgate through an intuitive image how the city itself has evolved in comparison with the CH site. Figure 13. Example of 3D visualisation of models based on ancient project plan of Castello Farnese through the Cesiumbased site construction storyline selection.

Pre-defined scenes
The possibility of exploring the site through a guided tour inside the virtual reconstructed scene is ensured by the adoption of multimedia panels with pre-defined scenes. This feature consists in the appearance of descriptive panels when a specific element of the scene is selected from the list on the sidebar. Once selected, a camera animation is triggered, moving the view to a new targeted position pre-defined by the developer. At the same time, the history and the characteristics of such entities are shown in the panel, that could be customised through HTML5 coding according to the developer needs, including texts, pictures, videos, and other media content ( Figure 14). The adoption of buttons for moving between consecutive panels or timeline steps also allows to guide the final users through pre-defined views, defining a specific tour within the scene, activating the visibility of needed narrative panels and avoiding the possibility that the audience gets lost in the 3D scene exploration. To obtain such features, the action linked to the buttons should point to the next or previous portion of interest in the model, implementing a camera transition to the position of the target and defining the new position of the camera in the scene. Once triggered, such action will also change the content of the descriptive panel, showing the description of the new camera target. As in the case of Potree, the source code of the tested application is available on the dedicated GitHub repository together with a link to a working example and instructions on how to implement one.

CONCLUSIONS
The case study of Castello Farnese in Piacenza illustrated the potentials of two different JS libraries, Potree and Cesium, for CH storytelling purposes. Testing the two open-source solutions for 3D interactive navigation and storytelling enabled the evaluation of their functionalities and the best audience for them. Potree allows for implementing technical tools such as measurements and cross sections on the model, allowing users already familiar with point clouds to execute simple operations and extract data. However, through the customisation of dynamic annotations and predefined animations, Potree makes the 3D navigation accessible also to non-expert users. The major limitation of its customisation however is linked to the difficulties in efficiently managing meshes that, if not properly subsampled, increase substantially the rendering time of the 3D scene. On the contrary, the rendering of such features in Cesium through its feature tiling system allows for an optimised exploration of object of this type, such as .obj format models based on the historical investigation. Moreover, Cesium also supports the management of BIM data. Such features also make it possible to include additional product of this type, enriching the narrative content of the CH site through the 3D digital documentation of restoration or maintenance project design.
Additionally, the overlay to a satellite imagery used as base map represents an immediate way to communicate the urban transformations of the area, highlighting differences not only in time but also in extensions of the CH site. Future developments for exploiting the storytelling functionalities of the two platforms consist of the evaluation of their integration in a unique webpage, combining each tested features and adding other type of data such as shapefile or geopackages for understanding how they could further support the narrative. Moreover, VR capabilities of Cesium JS could be further investigated by testing the adoption of the dedicated plugin for implementation in both Unreal and Unity engine. These additional immersive features also provide opportunities for education and research and can contribute to the sustainability and conservation of cultural heritage. Indeed, through the possibility to inspect the evolution of the site in a unique platform, they could suggest alternative approaches for collaborative thinking of targeted interventions in the city context for the valorisation of the CH heritage with future urban planning measures.