remote sensing
Article An Integrated Approach to 3D Web Visualization of Cultural Heritage Heterogeneous Datasets
Argyro-Maria Boutsi *, Charalabos Ioannidis and Sofia Soile School of Rural and Survey Engineering, National Technical University of Athens, 15780 Zografou, Greece; [email protected] (C.I.); soile.sofi[email protected] (S.S.) * Correspondence: [email protected]; Tel.: +30-210-772685
Received: 30 September 2019; Accepted: 24 October 2019; Published: 26 October 2019
Abstract: The evolution of the high-quality 3D archaeological representations from niche products to integrated online media has not yet been completed. Digital archives of the field often lack multimodal data interoperability, user interaction and intelligibility. A web-based cultural heritage archive that compensates for these issues is presented in this paper. The multi-resolution 3D models constitute the core of the visualization on top of which supportive documentation data and multimedia content are spatial and logical connected. Our holistic approach focuses on the dynamic manipulation of the 3D scene through the development of advanced navigation mechanisms and information retrieval tools. Users parse the multi-modal content in a geo-referenced way through interactive annotation systems over cultural points of interest and automatic narrative tours. Multiple 3D and 2D viewpoints are enabled in real-time to support data inspection. The implementation exploits front-end programming languages, 3D graphic libraries and visualization frameworks to handle efficiently the asynchronous operations and preserve the initial assets’ accuracy. The choice of Greece’s Meteora, UNESCO world site, as a case study accounts for the platform’s applicability to complex geometries and large-scale historical environments.
Keywords: 3D visualization; interactivity; data retrieval; ‘structure from motion photogrammetry; remote sensing archaeology; cultural heritage
1. Introduction Virtual reality, 3D graphics and digitized objects no longer require any expensive equipment or specialized hardware to be visualized. Their almost ubiquitous presence on the web has contributed to the comprehension of the third dimension by a wider audience. Exploiting users’ familiarization, the most prominent assets of the cultural heritage field are currently on the spotlight. Tangible heritage 3D models are of immense value, not only to the domain experts, but to anyone that can recognize their natural and cultural particularities. The distinctiveness of the represented object cannot be disputed or misinterpreted. Its inherited communicability reveals the cross-disciplinary information that lies to the aim of its digitation; geometric documentation, diagnosis and monitoring, conservation, natural disaster risk assessment, etc. [1]. The collaborative nature of these projects is enhanced as the 3D representations are common ground among the involved parts (professionals, researchers, institutions, organizations) for integrating and synthesizing various different approaches, methodologies and practices. Therefore, the perspective of their publication and online deployment covers a wider spectrum of applications for the cultural heritage community. It permits remote access, real-time co-operation, content updating and outward-looking policies. Especially when the supportive documentation data and textual information are appended to the visualization, the potential of transdisciplinary is maximized. The multi-level correlation of 3D and 2D cultural data elucidates technical assumptions and meanings, outlines the research findings and depicts the outcomes. For instance, it facilitates comparative surveys regarding
Remote Sens. 2019, 11, 2508; doi:10.3390/rs11212508 www.mdpi.com/journal/remotesensing Remote Sens. 2019, 11, 2508 2 of 26 seismic vulnerability or climate change impact to historical buildings by highlighting geometrical or structural changes [2]. Non-experts also profit from the openness of such projects and the reuse of cultural heritage information in 3D reconstructions, animations, virtual museums and narratives with multimedia content [3]. The actual potential landscape is expanded with search and retrieval services, contextualizing of digital resources and user interaction strategies. The most prominent efforts encompass partnerships among institutions, organizations and professional associations for digital libraries, 3D archives and organized repositories, such as CyArk, Europeana and Open Heritage 3D [4,5]. Research projects and individual scientific initiatives have also demonstrated pioneer work within these objectives. The Archaeo framework embraces collaborative research by publishing online ongoing field work documentation. Segmented 3D models of an archaeological site and its findings are embedded to a high-end 3D viewer and correlated with 2D GIS vector data and textual information derived by a MySQL database [6]. A multi-purpose platform is developed to promote the site of Nora and the Sanctuary of Aesculapius by University of Padova and 3DOM research group. It includes semantically enriched point-cloud visualization, a 2,5D WebGIS viewer and embedded photogrammetric 3D models of the sites’ artifacts for a scalable, interactive and contextual presentation [7]. Besides relevant seminal implementations in heritage datasets, the great abundance of related frameworks, platforms and applications can be misleading. Achieving a balance between 3D qualified displays and integrated advanced functionalities remains a challenge. Emphasizing to geometrically precise point clouds and meshes, they are the outreach of emerging methods (computer vision, reverse engineering, digital photogrammetry), cutting-edge technology (LiDAR, laser-scanners, UAVs) and spontaneous research. As their accuracy, size and complexity increase, so inadequate to manage them are the current technologies. Moreover, only a few can be considered as conclusive regarding the interactive, instructive and multidimensional aspect of the visualization. Such a centralized approach involves two main issues. Each factor of the problem is subject to its own commitments and sets specific constrains and difficulties. The first one concerns the process of rendering and displaying 3D content and therefore, the techniques and means of managing efficiently the third dimension. In the context of the current work, the open-source software 3D Heritage Online Presenter (3DHOP) and Three.js 3D graphics library undertake this heavy computation task along with their underlying streaming and rendering technologies (Nexus.js, WebGL API etc.). The interactive integration and coordination of the different data in a dynamic website is the second factor and the main subject to be addressed in this article. We have developed an online visualization platform oriented to large-scale archaeological sites and complex historical assets. Our approach surpasses built-in features and basic paradigms leveraging JavaScript and WebGL for maximum customization of the 3D environment. It is developed based on the following principles: Compliance with the principles of 3D Cultural Heritage archives Facilitation of 3D scene navigation and investigation of the supplementary documentation with new tools to both experts and simple users Modification, extension and testing of the 3DHOP and Three.js codebases Development of spatial and logical relations based on data interoperability across different collections and viewpoints Client-side architecture for optimal performance and responsiveness Sophisticated design and user-friendly Graphical User Interface (GUI) In particular, the overall aim is met by introducing these new tools and features: Interactive retrieval of multimedia information (3D models, images and text) from the 3D scene while freely exploring it Automatic navigation to predefined positions of the scene with brief descriptions for a narrative and comprehensive experience Annotations and text labels applied on points of interest of 3D models for semantic enrichment Concurrent visualization of 3D models of different level of detail, scale and format Remote Sens. 2019, 11, 2508 3 of 26
Handling 3D models by assigning JavaScript functions directly to source code and scripting based on their inherent properties Normalization of event model using jQuery library. The complete visualization infrastructure is implemented and assessed upon the archaeological site of Meteora, an area greater than 10 km2. The input data (3D models, ortho-photo maps and various image collections) are part of the 3D geometric documentation of the site, conducted by the Laboratory of Photogrammetry, National Technical University of Athens, Greece. The remainder of this paper is organized as follows: Section2 reviews existing solutions and their earlier related initiatives to reveal literature gaps or shortcomings. Section3 elucidates the main aspects of the problem, and introduces the proposed methodology and system’s structure. The subsequent Section demonstrates the case study and the input data along with their acquisition and processing pipeline. In Section5, the implementation process and its results are analyzed, including the design of the graphical user interface and the development of advanced tools and features. Finally, Section6 evaluates the performance of the web platform by examining factors like loading times and network load.
2. Related Work Focusing on the rendering and visualization pipeline, the current development platforms with corresponding implementations are presented and evaluated in this section. For consistency purposes we only report the works that followed photogrammetric methods for data collection and processing in the context of 3D geometric documentations. Along with a brief description of compression and streaming techniques, the paper’s contribution is highlighted and the choice of 3DHOP and Three.js library is justified.
2.1. 3D Web Publishing The first approaches of 3D content on the web combined user interfaces such as OpenGL, Direct 3D or Java 3D with ISO VRML and X3D standards [8]. A common requirement was the partial or exclusive use of add-ons beyond the software and the browser. Until 2011, the lack of standardization and the diverging implementations prevented the consideration of 3D content as an internet media. The advent of WebGL standard introduced an intrinsic and cross-platform technical visualization environment and pushed the development of supportive libraries, open-source frameworks and commercial software. Synergetic approaches for precise 3D representations of the field employ low-level programming libraries like Three.js [9], Babylon.js [10] and Scene.js [11] with the higher-lever frameworks and software Potree [12], 3DHOP [13], X3DOM [14], Sketchfab or alternatively Unity3D. Some of them configure an adaptive user interface with predefined functions while other abstract WebGL concepts to offer shading and rendering methods as well as animations, math routines, loaders and scene components [15–17]. Each solution entails different code literacy skills, technological pipeline, data size and formats but eventually all succeed in their applicability area. There exists a considerable body on literature dedicated to Cultural Heritage 3D resources deploying either one exclusively or a combination of these utilities [18–20]. 3DHOP and Potree are free and open-source software packages for point cloud rendering and high-resolution 3D datasets respectively. Both have been proven competent to challenging use cases such as 4D–3D heritage sites [21,22] or 3D archaeological stratigraphy [23]. The progressive streaming of X3DOM has proven appropriate for case studies where virtual large-scale archaeology [24], geospatial data [25] and scanned museum artifacts [26] are presented in a basic viewer. A consolidated geometric documentation with textual descriptions linked on spots is presented in a modular framework using JavaScript, HTML5 and WebGL. Rather than deploying the X3DOM model directly, XML files describe the configuration, content and semantics schema that was incorporated independently to a 3D viewer module. [27]. Sketchfab is a commercial platform that hosts the 3D assets of more than 500 cultural institutions but its navigation, labeling and scene editing services are determined by the membership plan users are purchasing [28]. The free Remote Sens. 2019, 11, 2508 4 of 26 option allows a partially adjustable interaction and a number of annotations on top of the 3D scene but no further modifications can be made [29,30]. An unconventional way of online 3D publishing is merging gaming technology with WebGL. The Unity3D commercial game engine is known for its advanced interaction capabilities like ground detection and animation events and its robust API for large and complex geometries. The created 3D scene is compiled to be compatible with WebGL leading to big file size and memory footprint unlike native JavaScript solutions. Arc-Team has published a virtual navigation application on a photorealistic 3D model of Punta Linke archaeological museum using Unity 3D. The tour simulates how the 3D scene looks from eye-height, imitating the human-like walking behavior while highlighted points of interest provide additional information [31]. Among the aforementioned development platforms, research specific to a visualization schema that unites the manifold of a geometric documentation dataset is scarcely considered. In general, they adhere to the default set of capabilities of web-publishing solutions rather than customize their built-in functionalities to their project’s requirements. This study seeks to correlate cultural resources with high variability of data types, formats and levels of precision on the basis of interaction, geospatial display and semantics. In the need of a flexible modular setup, both commercial software like Sketchfab, and Potree that is an exclusively point-cloud renderer are excluded.
2.2. 3D Online Streaming The concluding selection of the core display system depends upon its ability to manage large files and high-resolution 3D geometries. The large size complicates the web transmission phase and the rendering process. While WebGL provides instant access to graphics processor resources, the way data are transferred from a remote server to the local GPU is a purely programming matter. Loading each 3D model in its entirety implies transferring a file of hundreds of megabytes. This technique is ineffective, especially if the loading has to be completed in order to be able to visualize it. The fact that it is deployed by Unity3D for web publishing degrades its performance and confines its applicability. To address shortcomings and failures, robust 3D visualization systems utilize either multi-layer or multi-resolution data encoding. Other support progressive data transfer or suggest pre-processing compression techniques with good ratios [32]. Alliez and Desbrun introduced in 2001 a type of interactive encoding that enables progressive connectivity with the rendering system [33]. More recently, Gobbetti et al. proposed the parameterization of 3D models to an equivalent format that mimics the multi-resolution logic [34] and Lavoué et al. achieved a satisfying compression ratio of 3D meshes in a relatively short time through the conjunction of iterative simplifications with P3DW data encoding [35]. In 2015, Ponchio and Dellepiane developed a multi-resolution rendering paradigm that combines the progressive streaming of view-dependent representations of the mesh with data online compression/decompression [36]. This algorithm along with simplification, compression and displaying utilities compose a C++ and JavaScript library, Nexus.js and is exploited by the 3DHOP framework and Three.js library. The latter defines as well a Level of Detail (LOD) constructor that switches rendering between less or more detailed versions of the mesh based on the distance from the camera. Alternatively, the POP Buffer is a lightweight hybrid scheme that attains a fast-progressive transmission and basic multi-layer features [37]. This single-rate approach is taken by X3DOM framework that transfers directly to the GPU the stored quantized geometry but underperforms as regards compression rates. Concerning the prerequisites of a fast start-up time and a reduced network load, the multiresolution format seems to be the optimal solution for the analysis preservation of our high-resolution 3D models. And yet, 3DHOP framework excels in both performance and range of applicability. In comparison with X3DOM that also outstands in the field, 3DHOP has a flexible structure with simpler configuration setup and as mentioned above, better rendering capabilities. As it is tailor-made to detailed Cultural Heritage representations and supports modifications, it meets the standards of the proposed use cases. Remote Sens. 2019, 11, 2508 5 of 26
3. Methodology A detailed overview of the methodology followed with the core underlying components of the implementation is described in this section. After clarifying the problem formulation and the difficulties to be resolved in the current work, insights into the technological means are provided, comprising the multiresolution schema of Nexus.js library, the programming tools and the 3D visualization pipeline. The case study is presented with emphasis to data acquisition and processing workflow and finally, the architecture of the platform and its data structure are defined and analyzed.
3.1. Problem Definition The main problem in managing heterogeneous datasets of the Cultural Heritage lies in their size, especially when remote access and use over the Internet is entailed. Loading time, lossless transmission, network load and hardware limitations are consequent issues that dictate 3D visualization quality, website’s overall performance and eventually, user’s engagement and retention. The amount of 3D and 2D data largely determines their transmission speed to the client browser. This overall time is bound by the network bandwidth, namely, the maximum data rate which is specified by the Internet Service Provider (ISP). Exceeding the bandwidth limit creates congestion points and bottlenecks on the data transmission line. Congestion occurs once the router is running out of available buffer, an overflow which is likely to happen when large amounts of contents are transferred online. Therefore, the huge 3D models size leads to increased latency, packets loss and poor performance and the site ceases to be functional. In order to compensate for the transmission delay and network load, the total amount of the 3D models is often reduced. Depending on the editing software, the compression method and the development platform, the consequences may be loss of geo-referencing as most software impose their own coordinate systems and quality degradation related to geometry and texture. The perceived visual quality is inevitably equated with the visual fidelity of the original models. Its degradation does not justify their high-cost and time-consuming generation processes and is not consistent with their role as geospatial and geometrically accurate data. The end users take the visualized cultural assets at face value as the rendered appearance is not appealing and doesn’t correspond to a detailed and realistic representation. In addition, precise measurement tools cannot be implemented in the context of scientific and professional use. At the same time, the platform’s development must conform to the practices and the thematic design of an online 3D Cultural Heritage repository in order to fulfill its purposes. Besides the aforementioned visualization efficiency, basic practices encompass interactivity, data interoperability and information systems. Their objectives are user’s familiarization with the cultural resources via easy-to-use interaction components and accessible archiving, multidisciplinary knowledge transfer and obviously digital preservation of its prominent content. Common services comprise manipulation of the 3D scene (move, rotate and zoom) using the trackball, highlighted and clickable points of interest with aside relative information and textual labeling. The freely navigation is appropriate for artifacts, small-scale assets and flat surfaces but rather inadequate for large-scale monuments and complex geometries. Polymorphic and heterogeneous data are usually displayed on independent webpages accordingly to their visualization format or the type of information they educe. In the case of image and text incorporation to the 3D visualization page, they undertake a static role with a specific position outside the border of the 3D viewer. Such platforms are insufficient to spatially relate 3D and 2D information, failing to generate a two-way access and provide an exploratory examination of the data. In terms of programming technique, user interaction requires the design of a coordinated events’ system to avoid glitches and delays in response. The hierarchical model of the interface and the WebGL 3D specifications restrict some content and structure adjustments. Exceeding the canvas element and executing queries asynchronously, imitating multi-threading process without runtime errors would attain high-performance and advanced interaction. Remote Sens. 2019, 11, x FOR PEER REVIEW 6 of 26 interaction requires the design of a coordinated events’ system to avoid glitches and delays in response. The hierarchical model of the interface and the WebGL 3D specifications restrict some content and structure adjustments. Exceeding the canvas element and executing queries asynchronously, imitating multi-threading process without runtime errors would attain high-performance and advanced interaction.
3.2. Technical Pipeline
3.2.1. Multi-ResolutionRemote Sens. 2019, 11, 2508 Format 6 of 26 The multi-resolution approach ensures fast data transfer, rendering and loading, compensating for size3.2. and Technical complexity. Pipeline Generally, multi-resolution schemes divide geometry into smaller parts, an effective3.2.1. method Multi-Resolution for slow network Format connections as well. Different levels of detail correspond to each geometric part. The transmission is made on demand and the resolution is view-dependent. Only The multi-resolution approach ensures fast data transfer, rendering and loading, compensating the sections of the model that are absolutely necessary for the composition of each display are loaded for size and complexity. Generally, multi-resolution schemes divide geometry into smaller parts, and delivered.an effective The method advantages for slow of network this approach connections are as summarized well. Different in levels fast of start-up detail correspond time, minimized to networkeach load geometric and considerably part. The transmission good visual is madequality. on demandA low-resolution and the resolution version is of view-dependent. the model is readily availableOnly some the sectionsmilliseconds of the modelafter thatthe arestart-up. absolutely The necessary model is for gradually the composition refined of eachas new display parts are progressivelyare loaded loaded, and delivered. depending The advantages on the distan of thisce approach from arethe summarizedviewpoint inand fast start-upthe position time, and orientationminimized of the network camera. load andOur considerably visualization good system visual quality. exploits A low-resolution the multi-resolution version of the format model as an intrinsicis readilycomponent available of some the millisecondsNexus.js library, after the developed start-up. The by model Visual is gradually Computing refined Lab as new of partsCNR-ISTI. are Its progressively loaded, depending on the distance from the viewpoint and the position and orientation integrated distribution comprises simplification, compression and streaming utilities as well as an of the camera. Our visualization system exploits the multi-resolution format as an intrinsic component interfaceof thefor Nexus.jsthe converted library, developedmodels. It by streams Visual Computing directly for Lab online of CNR-ISTI. visualization Its integrated very large distribution 3D models, point cloudscomprises and simplification, texture maps compression with per-vertex and streaming attributes, utilities asa welltypical as an characteristic interface for the of converted scanned and image-basedmodels. photogrammetric It streams directly fordata. online The visualization data encodi veryng largeconstitutes 3D models, a pre-processing point clouds and phase texture where a sequencemaps of with sub-sampled per-vertex attributes, partitions a typical of the characteristic object, from of scanned coarse and image-basedto fine, is photogrammetricgenerated and their correspondingdata. The datarepresentations encoding constitutes of different a pre-processing resolutions phase where are a sequencestored ofin sub-sampledthe nxs structure. partitions The multiresolutionof the object, model from coarse can tobe fine, either is generated compressed, and their pruned corresponding or locally representations visualized of di ff(Figureerent 1). resolutions are stored in the nxs structure. The multiresolution model can be either compressed, pruned Compression is slightly lossy with visible results in small 3D models but attains better performance or locally visualized (Figure1). Compression is slightly lossy with visible results in small 3D models but and lessattains server-side better performance memory andconsumption. less server-side Pruning memory is consumption.a sort of optimization Pruning is a sortas it of reduces optimization the size of the filesas itand reduces assists the size in of the the filesappearance and assists inof thea appearancemore detailed of a more version detailed of version the ofobject the object in inwebsite initialization.website initialization.The streaming The involves streaming loading, involves loading,decompressing decompressing and sending and sending the the data data structure structure to the GPU. Theto the Nexus.js GPU. The is Nexus.js appended is appended to 3DHOP’s to 3DHOP’s codebase codebase and andprovides provides a loader a loader for for Three.js Three.js library. library.
FigureFigure 1. A 1.multi-resolutionA multi-resolution model model in in the the graphicalgraphical interface interface of nxsviewof nxsview tool. tool.
3.2.2. Front-End Development
Front-end programming defines the content and the design of the elements’ user interacts with in any browser with network access. The developed visualization platform is intended for real-time information retrieval and interactive functionalities; thus, it is hosted by a dynamic website. Remote Sens. 2019, 11, 2508 7 of 26
The front-end part is made up of the web markup HTML, CSS and principally of the programming language JavaScript. The rest is built upon Apache web server, MongoDB database and the server-side scripting language PHP. Its client-side part though outweighs the back-end. Specific JavaScript scripts control the response of the server to user requests for continuous updating of the dynamic website procedures. However, it cannot be predicted whether the result of running parallel processes will be successful. Apart from the single threaded JavaScript, the large number of files being accessed and processed and the sequential changes made to the DOM jeopardize its feasibility. In order to eliminate the risk, JavaScript’s methods for synchronizing and overlapping dynamic operations are examined, tested and applied. The event methods are essential for the responsiveness of the browser to interactive tasks and the synchronization technique. An event is a user-generated action that triggers a script to run and the encoded JavaScript responses that receive the action are called event handlers. The assignment is made with reference to the desired DOM object, and then a function is assigned to the corresponding event handler property. An open-source library that simplifies event handling and abstracts JavaScript scripting into simple and intuitive syntax is jQuery. The optimized and compressed format profits the delegation of browser events, the handling of the HTML page and the manipulation of the DOM. It is principally used for cross-platform web applications and jointly with AJAX it corrects the potential inconsistencies between browsers. The HTML
3.2.3. 3D Visualization Tools The visualization of the heterogeneous data is assigned to the 3DHOP framework and the Three.js graphics library, hence to the graphics rendering processes of the WebGL API. Every single technology is open-source with an active community of contributors, codebase transparency and scalable capabilities. They are all implemented in client-side facilitating the access and interaction between the different configuration levels. JavaScript bridges the gap between the underlying systems’ architecture and their supporting API layers. Therefore, 3D viewers tailored to the high standards of 3D Cultural Heritage archives can be created with the appropriate code adjustments and additions. 3DHOP framework, developed by the Visual Computing Laboratory of ISTI – CNR is devoted to interactive presentations of high-resolution 3D models and points clouds of the field [38]. Its 3D viewer is embeddable to any website without the need for a dedicated server and interoperates efficiently with HTML elements and real-time JavaScript updates. Its mathematical formulas and geometry routines are endorsed by SpiderGL, an open-source JavaScript library [39]. Among the ready-to-use tools and mid-level functionalities it offers, the following establish advanced interactivity and used in the 3D platform:
Highlighted and clickable geometry that serves as an annotation tool for points of interest Extraction of the original coordinates of any selected point on the model’s surface Euclidean distance measurement between two selected points Cross-section toolset for real-time orthogonal sections through the 3D scene or specific models
The developed platform is a high-level solution that leverages the capabilities of lower-level utilities to achieve the desired degree of customization [40]. The interdependency is scalable according to the level of programming and the expected usability. In particular, it adopts the Nexus’s streaming, rendering and displaying functions that uphold the visualization schema of the 3D models. On scene level, the proposed system partially interferes with the existing settings of 3DHOP and Three.js. It retains the key components of the scene graph, such as the hierarchical structures and the geometry definition and equally modifies some of the appearance properties. In regards to functionality, new programming models of dynamic manipulation of the 3D scene are created based on the build-in features and the native functions of 3DHOP. The degree of 3DHOP’s extension on the scope of interactivity is enhanced by a sophisticated and user-friendly graphical environment. Finally, on integration level, the current solution is independent of its structural components. The incorporation of a complete Remote Sens. 2019, 11, x FOR PEER REVIEW 8 of 26 regards to functionality, new programming models of dynamic manipulation of the 3D scene are created based on the build-in features and the native functions of 3DHOP. The degree of 3DHOP’s extensionRemote Sens. 2019on the, 11, 2508scope of interactivity is enhanced by a sophisticated and user-friendly graphical8 of 26 environment. Finally, on integration level, the current solution is independent of its structural components. The incorporation of a complete dataset, the investigation of correlation strategies with dataset, the investigation of correlation strategies with the 3D content and the final programming the 3D content and the final programming orchestration are autonomous issues, being developed orchestration are autonomous issues, being developed from scratch. As part of the integration, the from scratch. As part of the integration, the Three.js library is imported for the generation of multiple Three.js library is imported for the generation of multiple viewports on the same page. Besides the viewports on the same page. Besides the creation of advanced computer graphics, it maintains a creation of advanced computer graphics, it maintains a wide range of loaders for various types of wide range of loaders for various types of 3D data, including a compatible solution for Nexus.js. The 3D data, including a compatible solution for Nexus.js. The supplementary viewers aim to enhance supplementary viewers aim to enhance and clarify the main 3DHOP scene by replacing the ordinary and clarify the main 3DHOP scene by replacing the ordinary collections of images with collections of collections of images with collections of individual 3D models. In this way, 3D data of different scale, individual 3D models. In this way, 3D data of different scale, resolution and level of detail are directly resolution and level of detail are directly accessed. Figure 2 illustrates the various hierarchical levels accessed. Figure2 illustrates the various hierarchical levels of the platform’s components regarding of the platform’s components regarding our interference to each codebase. The utilities close to the our interference to each codebase. The utilities close to the bottom of the pyramid correspond to bottom of the pyramid correspond to low and mid programming levels with zero or little low and mid programming levels with zero or little modifications respectively. The 3D platform is modifications respectively. The 3D platform is the synergistic result of its inferior layers and the synergistic result of its inferior layers and comprises the visualization interface available to the comprises the visualization interface available to the end users. end users.
Figure 2. StructuralStructural schema schema of the visuali visualizationzation tools of the application.
3.3. System System Architecture Architecture The client-serverclient-server computingcomputing model model provides provides the the two-way two-way communication communication between between the userthe user and andthe website.the website. In the In current the current case thecase web the browser web browser undertakes undertakes the role the of therole client. of the The client. data The transfer data transferbetween between the server the and server the and client the is client assigned is assi togned the HyperTextto the HyperText Transfer Transfer Protocol Protocol (HTTP), (HTTP), the basic the basicarchitectural architectural structure structure of the Internet.of the Internet. HTTP messagesHTTP messages are a set are ofsequential a set of sequential requests and requests responses. and responses.The server The used server to read used the to HTTP read the protocol HTTP isprotocol the Apache is the HTTP Apache server, HTTP an server, open-source an open-source solution solutiondeveloped developed by the Apache by the SoftwareApache Software Foundation Foundation (ASF). It is(ASF). installed It is andinstalled maintained and maintained on the local on disk the localandaims disk toand serve aims users’ to serve requests users' andrequests promote and thepromote hosted the websites. hosted websites. In this project, In this the project, local the server local is serverthe development is the development and testing and environment. testing environment. The platform’s HTML,HTML, CSS,CSS, and and JavaScript JavaScript files, files, the the 3DHOP 3DHOP distribution, distribution, the the 3D 3D models models and and the thecomplementary complementary data data are stored are stored in the in Apache the Apache htdocs htdocs folder. Thefolder. distribution The distribution of the Three.js of the libraryThree.js is librarystored thereis stored as well there (Figure as well3). The(Figure configured 3). The localconfigured network local ensures network the clientensures/server the client/server interference interferenceto efficiently to simulate efficiently the simula website’ste the appearance website’s appearance and performance and performance before it is readybefore forit is hosting ready for on hostinga remote on web a remote server. Theweb IPserver. address The of IP the address site is replaced of the site by theis replaced localhost by address the localhost for instant address access for to instantthe files access on the to local the server.files on On the the local Internet server. level, On the communication Internet level, is initiatedcommunication by the browser is initiated so that by the browserserver is readyso that to the respond. server Initially,is ready theto respond. browser loadsInitially, the webthe browser site’s graphical loads the user web interface. site's graphical From the usermoment interface. of loading From and the as moment long as theof loading user is activeand as and long interacts as the withuser itsis active content, and the interacts client constantly with its content,sends requests the client to the constantly server. The sends server requests inspects to the the requests server. and The responds. server inspects The returned the requests information and responds.is stored by The the returned client. For information the proposed is stored system, by the th websitee client. isFor loaded the proposed using the system, standard the client-server website is communication that was described above. Interaction functions are just simple requests to the server.
The browser analyzes and executes the scripts it receives in response to its intrinsic script’s mechanism. Following the same logic, Nexus.js streams the multi-resolution models by sending their various Remote Sens. 2019, 11, x FOR PEER REVIEW 9 of 26 loaded using the standard client-server communication that was described above. Interaction functions are just simple requests to the server. The browser analyzes and executes the scripts it Remotereceives Sens. in2019 response, 11, 2508 to its intrinsic script’s mechanism. Following the same logic, Nexus.js streams9 of 26 the multi-resolution models by sending their various representations with sequential requests to the representationsbrowser. Through with the sequential HTTP protocol requests the toalgorithm the browser. gainsThrough random access the HTTP to binary protocol files the and algorithm receives gainsspecific random data partitions access to binary from fileseach and file; receives thus, specifictransferring data partitionsonly the fromnecessary each file;data thus, at a transferring time. The onlybrowser the successively necessary data loads at athe time. 3D Thedata browserby accele successivelyrating the server’s loadsthe hardware 3D data through by accelerating the WebGL the server’sAPI. When hardware the Three.js through user the interface WebGL is API. called, When the the scene Three.js graph user is updated interface without is called, the the requirement scene graph isto updateddraw the without entire 3D the scene requirement on each toframe. draw The the cl entireient does 3D scene not need on each to make frame. repeated The client requests does notfor needvisualization to make but repeated just one requests is enough for visualization to respond but to just Three.js. one is enoughThe response to respond time tothough Three.js. is Thenot responseimmediate. time An though equivalent is not Nexus immediate. loader An can equivalent compensate Nexus for loader this delay. can compensate In addition, for asynchronous this delay. In addition,server calls asynchronous by AJAX in serverconjunction calls by with AJAX jQuery in conjunction and the JSON with jQueryformat andestablish the JSON the formatconnection establish to a theMongoDB connection database’s to a MongoDB collection. database’s This part collection. of the Thisclient-server part of the system client-server is maintained system is maintainedfor a new fordeveloped a new developed tool and is tool presented and is presentedin the Section in the 5. Section 5.
Figure 3.3. SystemSystem architecture architecture and and functional functional relati relationshipsonships that that accomplish the server–client computing model.
As shown in Figure3, the platform’s homepage hosts two 3D model viewers, inherited by 3DHOP As shown in Figure 3, the platform's homepage hosts two 3D model viewers, inherited by and Three.js library. In total it comprises three webpages and various image collections. Predefined 3DHOP and Three.js library. In total it comprises three webpages and various image collections. points of the homepage’s 3D viewer are indicated as interlinks the user can follow to navigate the Predefined points of the homepage’s 3D viewer are indicated as interlinks the user can follow to subpages and digital image collections. The subpages are ancillary 3D repositories for the detailed 3D navigate the subpages and digital image collections. The subpages are ancillary 3D repositories for models and contain a 3DHOP viewer either with multimedia or a second Three.js viewer. the detailed 3D models and contain a 3DHOP viewer either with multimedia or a second Three.js 4.viewer. Case Study
4. CaseThis Study section gives initially a brief description of the study area emphasizing on historical and archaeological aspects. Then, the photogrammetric procedures of data acquisition and processing are This section gives initially a brief description of the study area emphasizing on historical and analyzed and the outcomes of the 3D geometric documentation are presented. Among the integrated archaeological aspects. Then, the photogrammetric procedures of data acquisition and processing Cultural Heritage dataset three case studies are demonstrated and used as inputs on the 3D platform: are analyzed and the outcomes of the 3D geometric documentation are presented. Among the (a) The archaeological site of Meteora (b) The Pixari pillar with the hermitages of St. Gregory (c) The integrated Cultural Heritage dataset three case studies are demonstrated and used as inputs on the old catholikon of the monastery of St. Stephen. The second and third case studies have been digitized 3D platform: (a) The archaeological site of Meteora (b) The Pixari pillar with the hermitages of St. both as part of the 3D model of the site and independently for high geometric and visual accuracy. Gregory (c) The old catholikon of the monastery of St. Stephen. The second and third case studies 4.1.have Study been Areadigitized both as part of the 3D model of the site and independently for high geometric and visual accuracy. Meteora is located near the town of Kalambaka, at the northwestern part of Thessaly, Greece. It4.1. constitutes Study Area a special geological phenomenon and hosts one of the most prominent monastic complexes of Orthodox religion in Greece. The giant rocks are molasses sediments that were formed at the end ofMeteora the Tertiary, is located 23 million near the years town ago of Kalambaka, and are mainly at the composed northwestern of sandstone part of Thessaly, and conglomerate. Greece. It Theconstitutes original a number special of geological monasteries phenomenon that were built and in hosts the 16th one century of the at most the top prominent of some pillars monastic was twenty-fourcomplexes of but Orthodox only six religion are preserved, in Greece. restored The giant and rocks functioning are molasses at the moment.sediments The that archaeological were formed site of Meteora was included in the UNESCO World Heritage List in 1988. The proposal, evaluation and selection were under the UNESCO cultural criteria (C 1–5) and the natural environment criterion Remote Sens. 2019, 11, x FOR PEER REVIEW 10 of 26
at the end of the Tertiary, 23 million years ago and are mainly composed of sandstone and conglomerate. The original number of monasteries that were built in the 16th century at the top of some pillars was twenty-four but only six are preserved, restored and functioning at the moment. Remote Sens. 2019, 11, x FOR PEER REVIEW 10 of 26 RemoteThe Sens.archaeological2019, 11, 2508 site of Meteora was included in the UNESCO World Heritage List in 1988.10 The of 26 proposal, evaluation and selection were under the UNESCO cultural criteria (C 1–5) and the natural at the end of the Tertiary, 23 million years ago and are mainly composed of sandstone and environment criterion (N 7). It has been also proposed as a geological heritage monument because of (Nconglomerate. 7). It has been The also original proposed number as a geologicalof monasteries heritage that monument were built because in the 16th of its century unique at geomorphic the top of its unique geomorphic and geological features. The Meteora rocks are considered part of the andsome geological pillars was features. twenty-four The Meteora but only rocks six are are preserved, considered restored part of and the Antichasiafunctioning mountain at the moment. range Antichasia mountain range and the whole region is designated as NATURA 2000 protected area. andThe thearchaeological whole region site is of designated Meteora was as NATURA included in 2000 the protected UNESCO area. World The Heritage St. Stephen List in monastery 1988. The The St. Stephen monastery is connected to female monasticism and one of the first founded. Its old is connected to female monasticism and one of the first founded. Its old main church (catholikon) proposal,main church evaluation (catholikon) and selection is a small, were single-naved under the basilica UNESCO with cultural narthex criteria with exceptional (C 1–5) and samples the natural of is a small, single-naved basilica with narthex with exceptional samples of post-Byzantine frescoes environmentpost-Byzantine criterion frescoes (N 7).(Figure It has 4) been. The also frescoes propos ofed theas a Virgingeological Blachernitissa heritage monument (Platytera) because on the of (Figureitssanctuary unique4). The ofgeomorphic frescoesthe church of and the and Virgingeolog the depictions Blachernitissaical features. of holy (Platytera)The founders Meteora on the Anthonyrocks sanctuary are and considered ofPhilotheus the church part and and of the thethe depictionsAntichasiaDormition of mountainof holy the Virgin founders range Mary Anthonyand are the the whole andmost Philotheus distinguished.region is anddesignated The the Dormitionwall as paintings NATURA of the and 2000 Virgin decorations protected Mary arewere area. the mostTheperformed St. distinguished. Stephen in two monastery phases. The wall It is was paintingsconnected built around and to female decorations the 14 monasticismth century were and performed and renovated one of in bythe two the first phases. monk founded. Philotheus It was Its built old th aroundmainin the church mid-16th the 14 (catholikon)century century. and is renovateda small, single-naved by the monk basilica Philotheus with innarthex the mid-16th with exceptional century. samples of post-Byzantine frescoes (Figure 4). The frescoes of the Virgin Blachernitissa (Platytera) on the sanctuary of the church and the depictions of holy founders Anthony and Philotheus and the Dormition of the Virgin Mary are the most distinguished. The wall paintings and decorations were performed in two phases. It was built around the 14th century and renovated by the monk Philotheus in the mid-16th century.
(a) (b)
FigureFigure 4. 4.The The old old catholikon catholikon ofof thethe MonasteryMonastery ofof St. Stephen: ( (aa)) Exterior; Exterior; (b (b) )Part Part of of the the nave nave where where thethe full-length full-length figures figures of of Saints Saints andand JesusJesus areare distinct.distinct. In the back back the the iconostasis iconostasis that that separates separates the the navenave from from the the sanctuary sanctuary is is distinguished. distinguished.
The cavernous asceticism(a) that began around the 11th century in Meteora(b is) of particular religious and cultural significance. The early ascetics established small prayer spaces within the natural cavities Figure 4. The old catholikon of the Monastery of St. Stephen: (a) Exterior; (b) Part of the nave where of the rocks and gradually organized ascetics as symbiotic places of worship, such as the Dupianite the full-length figures of Saints and Jesus are distinct. In the back the iconostasis that separates the skete in the 12th century. On the northeast side of Pixari rock, at a height of 40 m, the cave hermitage of nave from the sanctuary is distinguished. St. Gregory lies, a cluster of three hermitages with characteristic wood-beamed balconies (Figure5).
(a) (b)
Figure 5. (a) View of the rock of Pixari (b) The skete of Pixari with the three hermitages of St. Gregory and the characteristic wooden balconies and ladders.
The cavernous asceticism that began around the 11th century in Meteora is of particular
religious and cultural significance. The early ascetics established small prayer spaces within the natural cavities of the(a) rocks and gradually organized ascetics as symbiotic(b) places of worship, such as FigureFigure 5.5. ((aa)) ViewView ofof thethe rockrock ofof PixariPixari ((bb)) TheThe sketeskete ofof PixariPixari withwith thethe threethree hermitageshermitages ofof St.St. GregoryGregory andand thethe characteristiccharacteristic woodenwooden balconiesbalconies andand ladders.ladders.
TheThe firstcavernous one is atasceticism a height ofthat 25 m,began the secondaround one the at 11th 35 m century and the in third Meteora at 40 mis fromof particular the foot ofreligious the pillar. and The cultural wooden significance. balcony isThe well early preserved ascetics as established the acute angle small that prayer Pixari spaces forms within with thethe natural cavities of the rocks and gradually organized ascetics as symbiotic places of worship, such as
Remote Sens. 2019, 11, 2508 11 of 26 ground protects it from rain water and prevents corrosion. In 1972, when monks of the Great Meteoron monastery climbed into these caves they discovered a chapel decorated with relatively well-preserved 14th-century frescoes. The three sides of this small church are built of stone and the fourth one is carved in the rock.
4.2. Data Acquisition-Processing The geometric documentation of Cultural Heritage sites of great extent and morphological peculiarities requires special planning for 3D representations of high fidelity and resolution. Besides visual quality, a geometrically accurate topology is vital for the acquisition of precise metric information. A second priority is the deployment of low-cost, fast and automated techniques for data acquisition and processing. For mapping and 3D modeling large and inaccessible areas with the aforementioned requirements and specifications the method of Aerial Photogrammetric Survey was exploited. The area to be surveyed comprised 10 km2 of significant variations in altitude, dense vegetation and a 6 km2 archaeological site with a big number of landmarks. Therefore, it was captured by manned aircraft system and a definitive number of ground control points (GCPs) was used to ensure accuracy in spite of the topological variations. Almost 2500 both vertical and oblique images were acquired over the site. The Structure from Motion (SfM) and MultiView Stereo (MVS) techniques were used for images alignment and formation of the sparse point cloud and dense point cloud in the Agisoft Metashape software. The editing, optimization and refinement of the dense point cloud and the generation of the high-resolution 3D mesh were undertaken by the Geomagic Wrap 3D scanning software. The surface color information was applied by the initial images. Considering the need of 3D models of different level of detail and scales but equally, high accuracy and photo realism, the Pixari rock and the old catholicon of the Monastery of St. Stephen were also documented. Two more methods were integrated at the data acquisition phase; close-range and unmanned aerial photogrammetry. The data processing until the generation of the photo-textured 3D models employed the same pipeline. In addition to the 3D products, site plans, ortho-photos and ortho-photo maps were generated.
4.3. Input Data and Basic Configuration Based on the scale and level of detail, the 3D model “Meteora” constitutes the core of the visualization and the development of new tools and functionalities. The integration of the rest documentation outputs forms a coherent Cultural Heritage archive on the basis of the spatial interconnections that derive from it. In addition to “Meteora”, the platform is enriched with the following assets: 3D models: Part of Pixari rock and separately the interior and exterior of the old catholicon of St. Stephen’s Monastery Images: Ortho-photos, engravings and historical photographic evidence and photographic documentation of monuments’ exterior and interior Text: Information, explanations and brief descriptions The 3D models’ properties and characteristics can be observed in Table1.
Table 1. Characteristics of the 3D models that are integrated in the web platform.
Meteora Pixari Interior of St. Stephen Exterior of St. Stephen 75M faces 17M faces 32M faces 46M faces Geometry 40M vertices 7M vertices 17M vertices 23M vertices RGB data Color per vertex Texture mapping Color per vertex Color per vertex Format ply obj ply ply Original size 2.37 GB 354 MB 650 MB 914 MB
The 3D data are subject to a pre-processing phase in order to be initiated into the visualization pipeline. They are converted to the Nexus multiresolution format prior to their progressive streaming Remote Sens. 2019, 11, x FOR PEER REVIEW 12 of 26
Table 1. Characteristics of the 3D models that are integrated in the web platform.
Meteora Pixari Interior of St. Stephen Exterior of St. Stephen 75M faces 17M faces 32M faces 46M faces Geometry 40M vertices 7M vertices 17M vertices 23M vertices RGB data Color per vertex Texture mapping Color per vertex Color per vertex Format ply obj ply ply Original size 2.37 GB 354 MB 650 MB 914 MB The 3D data are subject to a pre-processing phase in order to be initiated into the visualization Remote Sens. 2019, 11, 2508 12 of 26 pipeline. They are converted to the Nexus multiresolution format prior to their progressive streaming and adaptive rendering to the 3D platform. The Nexus library supports both ply and obj andfile adaptiveformats renderingwith per-vertex to the 3Dcolor platform. and texture The Nexus mapping library respectively. supports both In ply the and case obj of file Pixari, formats a withpreparation per-vertex is needed color and in textureorder to mapping be compatible respectively. with conversion’s In the case of prerequisites. Pixari, a preparation The accompanied is needed intexture order toimage be compatible should be with per-wedge conversion’s since prerequisites. the algorithm The re-calculates accompanied the texture vertex image normal should during be per-wedgeprocessing. since After the conversion, algorithm the re-calculates 3D models the are vertex pruned normal rather during than be processing. compressed After for conversion,lossless size thereduction 3D models and areeventually, pruned rather attain than the beeligible compressed encoding for for lossless online size visualization. reduction and The eventually, 3D models attain of theMeteora, eligible Pixari encoding and the for exterior online visualization.of St. Stephen’s The catholikon 3D models are ofpresented Meteora, in Pixari the 3DHOP and the framework’s exterior of St.environment Stephen’s catholikon in the main are page presented and the in subpages the 3DHOP of the framework’s 3D platform environment accordingly. in theThemain data pageentry andand thescene subpages declaration of the happen 3D platform in three accordingly. independent The HTML data entryfiles using and scene the basic declaration 3DHOP’s happen interface. in three The independentdefault graphical HTML user files interface using the of the basic visualization, 3DHOP’s interface. including The the default toolbar graphical and the 3D user canvas interface can ofbe theobserved visualization, in Figure including 6 (a, b theand toolbarc). The and basic the 3D 3D viewer canvas is can formatted be observed from in a FigureCSS file6a–c. based The on basic the 3Dresponsive viewer is design. formatted Among from other, a CSS fileit determines based onthe the responsive position and design. appearance Among style other, of it its determines elements theincluding position the and toolbar appearance with its style individual of its elements fields. includingThe 3D model the toolbar of the with interior its individual of St. Stephen’s fields. Thecatholikon 3D model is ofadded the interior and loaded of St. Stephen’sas custom catholikon Nexus geometry is added andto the loaded Three.js as custom framework Nexus in geometry another toHTML the Three.js file (Figure framework 6). in another HTML file (Figure6).
(a) (b)
(c) (d)
FigureFigure 6. The 6. 3DThe inputs 3D inputs of the of developed the developed platform platform in the in 3DHOP’s the 3DHOP’s basic basic user user interface interface (a) 3D (a) 3Dmodel model of the of archaeologicalthe archaeological site of Meteora site of Meteora(b) 3D model (b) 3D of model the exterior of the of exterior St. Stephen’s of St. Stephen’s old catholikon old catholikon (c) 3D model (c) 3D of Pixarimodel rock ( ofd)Pixari 3D model rock of (d )the 3D interior model ofof theSt. Stephen’s interior of old St. Stephen’scatholikon. old catholikon.
5. Web Platform
5.1. Data Structure and Graphics User Interface Prior to the 3D platform’s design, it is necessary to gather and organize its content logically. The old catholikon of the Monastery of St. Stephen and the Pixari rock with the skete of Osios Gregorios are located in the 3D model of the archaeological site of Meteora. The opportunity to represent this spatial relationship in a practical context is offered by coinciding a cartographic and knowledge base in Remote Sens. 2019, 11, x FOR PEER REVIEW 13 of 26
5. Web Platform
5.1. Data Structure and Graphics User Interface Prior to the 3D platform’s design, it is necessary to gather and organize its content logically. The old catholikon of the Monastery of St. Stephen and the Pixari rock with the skete of Osios Gregorios areRemote located Sens. in2019 the, 11 3D, 2508 model of the archaeological site of Meteora. The opportunity to represent this13 of 26 spatial relationship in a practical context is offered by coinciding a cartographic and knowledge base in the 3D environment of the platform. The 3D model of Meteora serves the function of being the corethe of 3D the environment visualization of theschema platform. from Thewhich 3D the model rest of data Meteora derive serves as logical the function and spatial of being entities. the core Therefore,of the visualization the model of schema Meteora from is integrated which the restto the data homepage, derive as Pixari logical in and the spatial first subpage entities. and Therefore, the interiorthe model with the of Meteora exterior isofintegrated St. Stephen to catholikon the homepage, is the Pixariother insubpage. the first subpage and the interior with theThe exterior user is of redirected St. Stephen to catholikon the supplementary is the other repo subpage.sitories through links on the 3D scene of the homepage.The These user is internal redirected links to theare supplementaryassigned on th repositoriese position of through the relative links case on the studies 3D scene on the of the generichomepage. model Theseof Meteora internal and links are areavailable assigned after on specific the position tools’ of activation. the relative Textual case studies information on the genericand imagemodel collections of Meteora are available and are available to every page after thro specificugh tools’navigation activation. bars, menu Textuals, buttons information and semantic and image links.collections Design’s are aim available is a user-friendly to every page and through sophisticated navigation graphical bars, menus, interface buttons with and a semanticsimple and links. consistentDesign’s data aim isstructure. a user-friendly A sense and of sophisticated predictabilit graphicaly is intended interface so withas th ae simpleuser can and estimate consistent the data positionstructure. of every A sense element of predictability of the website is intended and its functi so asonality. the user This can estimateobjective the is met position when of the every layout element is operational.of the website It is andof common its functionality. perspective This and objective styling is metfor whenthe whole the layout repository. is operational. Every page It is contains of common theperspective title and a andtop stylingmargin, for the the side whole panel, repository. a bottom Every margin page and contains a main the 3D title scene. and Image a top margin, and 3D the modelsside panel,collections, a bottom buttons, margin menus, and atext main and 3D figure scene.s are Image placed and out 3D modelsof the canvas, collections, which buttons, defines menus, the 3Dtext space. and The figures only are exception placed outis the of thetoolbar’s canvas, posi whichtion defineswithin the the canvas 3D space. for Thedirect only correlation exception and is the easetoolbar’s of use. A position elements’ within hierarchy the canvas is maintained for direct and correlation priority is and given ease to of the use. 3D A visualization. elements’ hierarchy Such a is 3Dmaintained repository design and priority facilitates is given both to novice the 3D users visualization. and domain Such experts a 3D repositorywith its simple design data facilitates inquiring both throughnovice 3D users models. and domain experts with its simple data inquiring through 3D models. TheThe homepage homepage of ofthe the 3D 3D platform platform is is shown inin FigureFigure7 .7. Its Its sidebar sidebar consists consists of aof drop-down a drop-down menu menuwith with general general information, information, a collection a collection of orthophoto of orthophoto maps maps that coverthat cover the entire the entire area andarea threeand three buttons buttonswith diwithfferent different interactive interactive roles. The roles. first The provides first accessprovides to supplementaryaccess to suppl galleriesementary of historicgalleries images of historicand vintageimages illustrations, and vintage the illustrations, second activates the se acond new tool;activates the interactivea new tool; data the retrieval interactive from data the 3D retrievalscene andfrom the the third 3D ascene guided and webpage the third tour. a guided The toolbar webpage is composed tour. The by toolbar the interaction is composed functionalities by the interactionof the 3D functionalities space and each of icon’sthe 3D styling space correspondsand each icon’s to thestyling role corresponds it performs. to the role it performs.
FigureFigure 7. Cont. 7. Cont .
Remote Sens. 2019, 11, 2508 14 of 26 Remote Sens. 2019, 11, x FOR PEER REVIEW 14 of 26 Remote Sens. 2019, 11, x FOR PEER REVIEW 14 of 26
(a)(a) (b)(b)
FigureFigure 7. 7.Homepage Homepage of of the the 3D 3D platform platform withwith details from from the the side side column: column: (a ( )a tabs) tabs with with map map location location andand brief brief description description of of the the purpose purpose andand methodologymethodology ( (bb))) various variousvarious image imageimage galleries. galleries.galleries.
OnOn the the homepage homepage all all the the toolstools areare pre-builtpre-built an andandd ready-to-use ready-to-use by by 3DHOP 3DHOP except except for for two two new new addedadded utilities: utilities: the the the automatic automatic navigation navigationnavigation and and the the activationactivation ofof text text labe labels.labels.ls. The The webpage webpage with with the the documentationdocumentation of of the the Pixari Pixari rock rock andand itsits hermitageshermitages isis structured structured as as shown shown in in Figure Figure 8.8 8.An. AnAn image image image fieldfieldfield and and an an intrusive intrusive menu menu with with fourfour categoriescategories comprise comprise the the sidebar. sidebar. In In particular, particular, the the dropdown dropdown navigationnavigation bar bar provides provides access access toto textualtextual informationinformation on on historic, historic, religious religious and and cultural cultural aspects aspects of of thethe hermitageshermitages hermitages and and collectionscollections collections of of thethethe photographicphotographicphotographic documentation documentation of of the the landmark. landmark. The The last last assets assetsassets areare displayed displayed in in the the image image fieldfield field whichwhich dynamicallydynamically changes changes its its content content according according to touser’s user’s choices. choices. The complete archiving of the old catholikon of the monastery of St. Stephen is presented in the third The complete archiving archiving of of the the old old catholikon catholikon of ofthe the monastery monastery of St. of Stephen St. Stephen is presented is presented in the in third the webpage of the platform (Figure 9). The exterior model of the old catholikon is displayed on a thirdwebpage webpage of the of platform the platform (Figure (Figure 9). 9The). The exterior exterior model model of ofthe the old old catholikon catholikon is is displayed onon aa 3DHOP’s viewer while its interior is visualized by Three.js. The pattern that defines the page’s data 3DHOP’s viewer while its interior is visualized by Three.js. The pattern that definesdefines the page’s data structure is slightly different. With the incorporation of the second viewer, dual importance is structure isis slightly slightly di ffdifferent.erent. With With the incorporationthe incorporation of the of second the second viewer, viewer, dual importance dual importance is conveyed is conveyed to 3D space and the 3D models have a stronger visual force. The rest of the content is toconveyed 3D space to and 3D thespace 3D and models the have3D models a stronger have visual a stronger force. Thevisual rest force. of the The content rest isof organizedthe content into is organized into two semantic elements: a top navigation bar and a horizontal image slider at the twoorganizedbottom. semantic into elements: two semantic a top navigationelements: a bar top and naviga a horizontaltion bar image and a slider horizontal at the bottom.image slider at the bottom.
Figure 8. The second page of the 3D platform that hosts the documentation data of Pixari rock. Figure 8. The second page of the 3D platform that hosts the documentation data of Pixari rock.
Figure 8. The second page of the 3D platform that hosts the documentation data of Pixari rock.
Remote Sens. 2019, 11, 2508 15 of 26 Remote Sens. 2019, 11, x FOR PEER REVIEW 15 of 26
FigureFigure 9. 9.The The third third page page of of the the 3D 3D platform platform that that hosts hosts the the documentation documentation datadata ofof thethe oldold catholikoncatholikon of St.of Stephen St. Stephen monastery. monastery.
5.2.5.2. Dynamic Dynamic Multimedia Multimedia Incorporation Incorporation AA 3D 3D repository repository of of the the cultural cultural heritageheritage fieldfield cannot be be regarded regarded as as a aqualified qualified and and constructive constructive solutionsolution unless unless it integratesit integrates multimedia. multimedia. Image Image and and text text clarify, clarify, enhance enhance and and enrich enrich the the visualized visualized 3D content.3D content. Especially Especially if a comprehensive if a comprehensive presentation presentation of the products of the of aproducts geometric of documentation a geometric is intended,documentation the heterogeneous is intended, dataset the heterogeneous should be exposed dataset in its should entirety. be Theexposed platform in incorporatesits entirety. The image collectionsplatform andincorporates textual information image collections the user and has textual direct information access while the browsing user has it. direct Many access of the while current digitalbrowsing archives it. Many of the of field the sharecurrent this digital practice. archives This of multimedia the field share display this practice. is esthetically This multimedia pleasing and display is esthetically pleasing and useful but does not correspond to the spatial dimension of the useful but does not correspond to the spatial dimension of the visualized data. The approach applied visualized data. The approach applied to Pixari’s 3D model in the platform’s subpage attempts to to Pixari’s 3D model in the platform’s subpage attempts to tackle this deficiency. It is proposed that the tackle this deficiency. It is proposed that the aggregate data’s presentation is on the basis of their aggregate data’s presentation is on the basis of their relative topology and emerge from a dynamic relative topology and emerge from a dynamic scheme. The functionality aims to showcase the scheme. The functionality aims to showcase the hermitage of Saint Gregory and the inner chapel hermitage of Saint Gregory and the inner chapel located in one of the caves. located in one of the caves. At first, a multi-level menu with slider effects is created in the side panel of the subpage. Creating such a navigation bar by declaring each category and subcategory via the table element of HTML and using the scroll and click effects with either CSS or jQuery is relatively simple. A more pertinent strategy is the association of the information provided by the menu sections to the relevant 3D spot of the scene. The plan leverages a native functionality from the 3DHOP’s scene setup; the hotspot. Small spherical geometries are placed on the natural cavities of the hermitage and declared as spots in the field of scene objects. When the hotspot tool is enabled, the spheres are highlighted and inherit the clickable attribute. Their selection invokes a set of dynamic events: smooth animation that brings the view to the hotspot and toggling of the side menu’s sections (Figure 10). The menu’s content, which provided general facts prior to the tool’s activation, is adapted to the corresponding information for the featured landmark. Historical and cultural information, ortho-photos and other photographic evidence configure and enrich each one of its customized versions. The text is displayed in dialog popup windows while images either in a slider on the side panel of the webpage or in their full size though redirection to the digital image galleries of the platform. The dynamically modification of the navigation bar by assigning specific content to each hotspot is based on JavaScript conditions and jQuery events. Each hotspot is declared as a case of the switch statement and each case encloses the code with the actions enabled if this hotspot is clicked. The menu index is updated via jQuery selectors and the click, toggle and toggleClass events. As more and more click event handlers Figure 10. Real-time adjustment of menu contents and its corresponding information for the selected are added, it is necessary to unregister previous handlers by the .off(click) statement. hotspot.
Remote Sens. 2019, 11, x FOR PEER REVIEW 15 of 26
Figure 9. The third page of the 3D platform that hosts the documentation data of the old catholikon of St. Stephen monastery.
5.2. Dynamic Multimedia Incorporation A 3D repository of the cultural heritage field cannot be regarded as a qualified and constructive solution unless it integrates multimedia. Image and text clarify, enhance and enrich the visualized 3D content. Especially if a comprehensive presentation of the products of a geometric documentation is intended, the heterogeneous dataset should be exposed in its entirety. The platform incorporates image collections and textual information the user has direct access while browsing it. Many of the current digital archives of the field share this practice. This multimedia display is esthetically pleasing and useful but does not correspond to the spatial dimension of the visualized data. The approach applied to Pixari’s 3D model in the platform’s subpage attempts to tackle this deficiency. It is proposed that the aggregate data’s presentation is on the basis of their relativeRemote Sens. topology2019, 11 , 2508and emerge from a dynamic scheme. The functionality aims to showcase the16 of 26 hermitage of Saint Gregory and the inner chapel located in one of the caves.
FigureFigure 10. 10. Real-timeReal-time adjustment adjustment of menu of menucontents contents and its corresponding and its corresponding information information for the selected for the hotspot.selected hotspot.
5.3. Development of New Tools The fact that in the archaeological site of Meteora the unique natural landscape is intertwined with one of the most important Orthodox religious monuments accounts for its choice as a case study for the 3D platform. The developed tools correspond to an insightful interpretation of the historical, physical and cultural aspects of the site. The spatial distribution of historical and archaeological sights within its borders requires specific mechanisms in order to be perceived and valued. The aim of both academic and public engagement predisposes to increased difficulty regarding the diffusion of the diversified information. Two new types of 3D scene navigation and annotation utilities are developed for exploratory investigation of the archaeological site and parse of the documentation data: the first involves a narrative tour through a predefined route and the second an interactive data retrieval directly from the 3D scene. The textual and graphic label assignment enhances the cartographic interpretation and serves the function of embellishing. The additions and extensions made are applicable to any specific-domain heterogeneous dataset with a spatial reference.
5.3.1. Automatic Navigation A completely free navigation to the 3D space with the trackball is likely to disorient or confuse the user but it definitely does not convey any kind of information. An opportunity to explore all the points of interest of a Cultural Heritage site in short time with descriptive captions is presented by the tool of automatic navigation. The mechanism that simulates immersive virtual tours is applied to the 3D models of Meteora and Pixari of the homepage and subpage respectively. Every tour is assembled by sequential seamless animations of the scene that either magnify a certain focus point or provide a wider view. The camera frames the areas of interest above eye-level and from high angle conveying an omniscient perspective and surmounting the problem of non-visible. Close-ups and tilted camera angles help maneuver through the very rugged nature and change dynamically the center of attention. At the same time, brief information is automatically generated and synchronized with the relevant frame (Figure 11). Therefore, the tool offers a narrative navigation, highlighting the name and historical aspects of the landmark or toponym displayed each time. The tour through the 3D model of Meteora invokes a transition from the town of Kalampaka and the six functioning monasteries to the sketes and the remains of old churches and chapels. Remote Sens. 2019, 11, 2508 17 of 26 Remote Sens. 2019, 11, x FOR PEER REVIEW 17 of 26
Remote Sens. 2019, 11, x FOR PEER REVIEW 17 of 26
FigureFigure 11.Figure 11.SnapshotSnapshot 11. Snapshot during during during the the automatictheautomatic automatic navigation navigation navigation while wh wh cameraileile camera camera frames frames frames pillars pillars with pillars with remains remains with of ofremains sketes. of sketes. sketes. The tour on Pixari initiates from ground level at eye’s sight and is gradually elevated with smooth rotationsThe and tour movements on Pixari of initiates the 3D from scene. ground This mechanismlevel at eye’s is sight performed and is gradually either within elevated the containerwith The smoothtour on rotations Pixari and initiates movements from of groundthe 3D scene. level This at mechanismeye’s sight is performedand is gradually either within elevated the with of the scene in normal display or in full screen. The user has the potential to pause or stop it at any smooth rotationscontainer of and the scenemovements in normal of display the 3D or inscene. full screen. This The mechanism user has the is potential performed to pause either or stop within the time. The movement of the camera to the predefined positions subsequently is triggered by setTimeout, containerit of at anythe time.scene The in movement normal display of the camera or in to full the screen.predefined The positions user has subseq theuently potential is triggered to pause by or stop a JavaScript time function. A vector with the six parameters of the trackball state represents the it at any time.setTimeout, The movementa JavaScript oftime the function. camera A to vector the predefined with the six positions parameters subseq of the uentlytrackball is state triggered by currentrepresents position the and current is declared position as and a functionis declared variable as a function of a native variable method of a native of 3DHOP method forof 3DHOP animations. setTimeout,Thus,for an animations. arraya JavaScript with allThus, desired time an array framesfunction. with is created allA desiredvector and parsedframeswith bytheis conditionalcreated six parameters and statements.parsed ofby theconditional The setTimeouttrackball state representsmethodstatements. the executes current The the setTimeoutposition anonymous and method function is declared executes sequentially the as ana onymousfunction at each function variable location sequentially andof a with native at a specificeach method location time of step3DHOP for animations.(Figureand 12 with). The Thus,a syntaxspecific an of time thearray subtitles’step with(Figure synchronizationall 12). desired The syntax frames exploits of the issubtitles’ a conditionalcreated synchronization and statement parsed andexploits by setInterval, conditional a statements.anotherconditional JavaScriptThe setTimeout statement time function and method setInterval, as well. executes Theanother sequence the JavaSc anonymous ofript the time various function function descriptions as well. sequentially The is sequence executed at of ateach the specific location various descriptions is executed at specific intervals until the end of the tour. Whenever the function and intervalswith a specific until the time end ofstep the (Figure tour. Whenever 12). The the syntax function of ofthe the subtitles’ automatic synchronization navigation is called exploits the a of the automatic navigation is called the current index is updated according to the time elapsed current index is updated according to the time elapsed between two transitions. The visibility and conditionalbetween statement two transitions. and setInterval, The visibility another and duration JavaSc ofript each time description function are as toggled well. byThe the sequence fadeto of the duration of each description are toggled by the fadeto jQuery event. various descriptionsjQuery event. is executed at specific intervals until the end of the tour. Whenever the function of the automatic navigation is called the current index is updated according to the time elapsed var pos = [function() {presenter.animateToTrackballPosition([110, -10, 0, 0, 0, between two1.82 transitions.]);}, The visibility and duration of each description are toggled by the fadeto function() {presenter.animateToTrackballPosition([107.82, -20.65, 0, 0, 0, jQuery event.1.64 ]);}, function() {presenter.animateToTrackballPosition([97.96, -13.09, 0, 0, 0, var pos 1.30= [])function;}, () {presenter.animateToTrackballPosition([110, -10, 0, 0, 0, function() {presenter.animateToTrackballPosition([95.79, -34.17, 0, 0, 0, 1.82]);}1.30, ]) ;}, function function() {presenter() {presenter.animateToTrackballPosition.animateToTrackballPosition([96.13([107.82, -44.60, ,- 20.650, 0, ,0 ,0 , 0, 0, 1.64]);}0.94, ]) ;}, function function() {presenter() {presenter.animateToTrackballPosition.animateToTrackballPosition([106.56([97.96, -12.63, -13.09, -0.1,, 0-,0.2 0,, 0, 1.30]);}0.01, , 0.85]); }]
function var() loop {presenter = function. animateToTrackballPosition() { ([95.79, -34.17, 0, 0, 0, 1.30]);} , if (pos.length <= 0) function () return {presenter; .animateToTrackballPosition([96.13, -44.60, 0, 0, 0, 0.94]);} , (function chain(i) { if (i >= pos.length || typeof pos[i] !== 'function') function () { presenterreturn; .animateToTrackballPosition([106.56, -12.63, -0.1, -0.2, 0.01, 0.85 ]) ; }var] tim = window.setTimeout(function() { pos[i](); var loop = function chain(i +() 1) ; { if ( pos . length }, 1900 <=) ; 0 ) })(0); } return; Figure (functionFigure 12. The 12. The JavaScriptchain JavaScript(i) setTimeout {setTimeout method method iteratesiterates “p “pos”,os”, the the array array that that contains contains the theanonymous anonymous functions if (withi >= parameter pos.length a 3DHOP’s || expotypeofsed method, pos[i within] !== a callback'function function.') functions with parameter a 3DHOP’s exposed method, within a callback function. return;
var tim = window.setTimeout(function() { pos[i](); chain(i + 1); }, 1900); })(0); } Figure 12. The JavaScript setTimeout method iterates “pos”, the array that contains the anonymous functions with parameter a 3DHOP’s exposed method, within a callback function.
Remote Sens. 2019, 11, 2508 18 of 26
5.3.2. Interactive Data Retrieval from the 3D Scene Remote Sens. 2019, 11, x FOR PEER REVIEW 18 of 26 The coherence of every single dataset of the Cultural Heritage field, varying from archaeological 5.3.2. Interactive Data Retrieval from the 3D Scene recordings to diagnosis or restoration projects depends on its spatial dimension. The individual data, regardlessThe context, coherence type andof every format, single are associateddataset of with the specificCultural locations Heritage in thefield, physical varying space from of the studyarchaeological area. This apparent recordings connection to diagnosis can or conveyrestoration an projects accessible depends role toon theits spatial users dimension. of the 3D platform.The A strategyindividual to retrieve data, regardless the whole context, documentation type and data form ofat, the are repository associated from with theirspecific corresponding locations in positionthe physical space of the study area. This apparent connection can convey an accessible role to the users on the 3D scene is employed. The idea transforms the conventional text annotations to dynamic of the 3D platform. A strategy to retrieve the whole documentation data of the repository from their feature-linked labels that emerge from the interactive exploration of the 3D space. The tool is developed corresponding position on the 3D scene is employed. The idea transforms the conventional text on aannotations cartographic to dynamic base, represented feature-linked by thelabels 3D that model emerge of Meteorafrom the interactive of the homepage. exploration It of enhances the 3D the visualizationspace. The schema tool is developed with additional on a cartographic 3D viewports base, and represented establishes by thethe access3D model to theof Meteora subpages of the through interlinks.homepage. Once It enabled, enhances with the visua a smoothlization animation schema with the additional camera frames 3D viewports a section and of establishes the 3D scene the from highaccess angle. to From the thissubpages viewpoint through a wider interlinks. area canOnce be enabled, observed with and a thesmooth mechanism animation of interactivethe camera data retrievalframes initiates. a section Instead of the of3D highlighting scene from high or placing angle. From labels, this it isviewpoint proposed a wider a more area creative can be and observed interactive approachand the for mechanism prominent of andinteractive distinct data from retrieval their initiates. surroundings Instead of points highlighting of interest. or placing The indicationlabels, it is providedis proposed during a moving more creative the cursor and on interactive top of the approach scene. The for positionprominent where and thedistinct cursor from changes their into surroundings points of interest. The indication is provided during moving the cursor on top of the a hand pointer identifies a landmark whose documentation data can be accessed. This actually means scene. The position where the cursor changes into a hand pointer identifies a landmark whose that there are no constrains on the manipulation of the scene with the mouse. documentation data can be accessed. This actually means that there are no constrains on the Themanipulation user can of freely the sc exploreene with it, the examine mouse. the cursor’s behavior and select the landmarks that elicit his/her attention.The user can Once freely clicked, explore relative it, examine contextual the cursor’s information behavior appearsand select to the a dialoglandmarks box that on topelicit of the canvas.his/her The briefattention. description Once clicked, contains relative links contextual that redirect information to the subpages appears and to a thedialog photographic box on top collectionsof the of thecanvas. 3D platform. The brief The description static and contains passive links knowledge that redirect divulgation to the evolvessubpages to and an interactivethe photographic experience and thecollections spatial relationshipof the 3D platform. among theThe particles static an ofd thepassive platform knowledge turns intodivulgation logical. evolves Prior to to browsing, an a previewinteractive of the experience redirected and page the spatial is shown relationship so as the among users the anticipate particles and of the inspect platform its contentturns into before the navigation.logical. Prior At to the browsing, same time, a preview a customized of the redirect photographiced page is collection,shown so as which the users can anticipate be also displayed and inspect its content before the navigation. At the same time, a customized photographic collection, on an independent full-size viewer, is presented on the side panel. Replacing the image collection by which can be also displayed on an independent full-size viewer, is presented on the side panel. a collection of smaller-scale and more detailed 3D models of the dataset maximizes the platform’s Replacing the image collection by a collection of smaller-scale and more detailed 3D models of the potential.dataset The maximizes user can the interact platform’s with thepotential. 3D assets The within user can the interact new viewports with the 3D or onassets their within subpage’s the new viewer withviewports further functionalities or on their subpage’s (Figure 13 viewer). Such with a scalable further visualization functionalities communicates (Figure 13). Such the documentationa scalable outputsvisualization that emerge communicates from multiple the documentation data acquisition outputs techniques, that emerge time from periods multiple or data disciplines acquisition to the simpletechniques, user. The time experts periods can or comparedisciplines and to the extract simple the user. topological, The experts directional can compare and and metric extract relations the amongtopological, multi-resolution directional models. and metric The exploratory relations among analysis multi-resolution of the 3D scene models. and its supportiveThe exploratory dataset is implementedanalysis of on the top 3D ofscene Meteora and its model supportive and thedatase pointst is implemented of interest areon top the of six Meteora functioning model Monasteries,and the the rockpoints of of Pixari interest and are thethe six town functioning of Kalampaka Monasteries, and the Kastraki. rock of Pixari Their and characteristic the town of position,Kalampaka roof’s and Kastraki. Their characteristic position, roof’s color and assembly make them readily apparent color and assembly make them readily apparent and no highlighted geometry or label is needed for and no highlighted geometry or label is needed for interactivity. Under other conditions, a proper interactivity.indication Under is needed other for conditions, users’ usability. a proper indication is needed for users’ usability.
(a) (b)
Figure 13. Cont. Remote Sens. 2019, 11, 2508 19 of 26
Remote Sens. 2019, 11, x FOR PEER REVIEW 19 of 26
(c)
FigureFigure 13. 13.The The interactive interactive retrieval retrieval tooltool enablesenables the the ac accesscess to to heterogeneous heterogeneous data data via 2D via and 2D 3D and 3D viewportsviewports (a) Emulation(a) Emulation of of the the subpage subpage withwith thethe detailed documentation documentation of Pixari of Pixari rock rock (b) Image (b) Image collection of Roussanou Monastery (c) 3D models’ collection of St. Stephen’s Monastery. collection of Roussanou Monastery (c) 3D models’ collection of St. Stephen’s Monastery. The syntax of the new attribute is based on an anonymous JavaScript function and jQuery The syntax of the new attribute is based on an anonymous JavaScript function and jQuery events events applied to a HTML element of transparent geometry. The screen coordinates are related to applied to a HTML element of transparent geometry. The screen coordinates are related to the projected the projected spatial coordinates of the georeferenced 3D model and the desired positions are stored spatialin an coordinates array. An anonymous of the georeferenced JavaScript function 3D model is executed and the at desiredruntime along positions with arethe hover stored event. in an It array. An anonymoustracks the cursor JavaScript position, function parse the is array executed and decide at runtime when the along modal with pop-ups the hover have to event. be displayed. It tracks the cursorThree.js position, library parse set theup the array ancillary and decide visualization when theof the modal collection pop-ups of 3D have models. to be HTML displayed. elements Three.js librarywith set specific up the ancillarydimensions visualization are defined ofas thecontainers collection for ofthe 3D rendering models. HTMLand customization elements with of the specific dimensionsThree.js viewer. are defined The 3D as models containers are multi-resolution for the rendering and their and loading customization is managed of by the Nexus. Three.js viewer. The 3D models are multi-resolution and their loading is managed by Nexus. 5.3.3. Labeling System 5.3.3. LabelingThe most System common but efficient way to identify features of the 3D scene is labeling systems. Text strings or 2D graphical labels are placed on the surface of the 3D model for interpretation and The most common but efficient way to identify features of the 3D scene is labeling systems. clarification purposes. The scope and applicability area of this conventional technique is expanded Text strings or 2D graphical labels are placed on the surface of the 3D model for interpretation and by a more flexible and interactive schema with the following characteristics: clarification purposes. The scope and applicability area of this conventional technique is expanded by a more flexibleClickable and property: interactive The schemauser can withselect thethe labels following in order characteristics: to interact with the objects of other 3D viewers and the content of the page. ClickableBack-end property: support: The Text user descript can selections, thegeographic labels in coordinates order to interact and other with attributes the objects associated of other 3D viewerswith and each the label content are stored of the in page.a database. Back-endIt is implemented support: Text in the descriptions, 3D model of geographic the interior coordinatesof the old catholikon and other of St. attributes Stephen associatedmonastery with eachin label the arecontext stored of inthe a database.Three.js visualization pipeline. Parts of the Orthodox Church architecture, Itfrescoes is implemented and other indecorative the 3D model details of are the delineated interior of and the described. old catholikon Simple of spheres St. Stephen or planes monastery are in placed on the desired positions and a piece of text identifies each semantic region. The tags appear in the context of the Three.js visualization pipeline. Parts of the Orthodox Church architecture, frescoes such a way that they are always on the field of view of the camera. As the user manipulates the scene and otherby zooming, decorative pan details or rotating, are delineated the text andand described. graphics attached Simple sphereson it adjust or planes to the are placedreal-time on the desiredtransformations. positions and Equivalent a pieceof user’s text modifications identifies each of the semantic 3D view region. adjust Thethe visibility tags appear of the in church’s such a way that theyframing. are alwaysThe walls, on thethe fieldceiling of viewand the of thefloor camera. are becoming As the userinvisible manipulates once they the face scene the bycamera zooming, pan orpreventing rotating, the textobscuring and graphics of critical attached interior on parts. it adjust The toclickable the real-time property transformations. enables two dynamic Equivalent user’sactions modifications in the subpage: of the animations 3D view adjust of the the3DHOP’s visibility scene of and the content church’s update framing. of the The subpage. walls, When the ceiling and theuser floor selects are a becomingsphere, the invisiblecamera of once the exterior they face 3D the model camera frames preventing the equivalent the obscuring position with of criticala interior parts. The clickable property enables two dynamic actions in the subpage: animations of the 3DHOP’s scene and content update of the subpage. When user selects a sphere, the camera of the Remote Sens. 2019, 11, x FOR PEER REVIEW 20 of 26 smooth transition and a customized image gallery is shown (Figure 14). The index of the labels can be dynamically toggled as well with the geospatial coordinates of the center of the sphere. The text label assignment is not a simple programming task when it is independent of pre-built components and interferes with the 3D space. The HTML canvas element that hosts the 3DHOP’s viewer, cannot display at runtime both 2D and 3D context. This shortage can be handled by Three.js library. It’s ray casting method determines the clickable geometry by projecting a ray from the mouse position on the screen to the 3D scene. An anonymous function detects the sphere that the ray intersects within an accepted distance threshold and returns the point of collision. The label is created at this position based on the procedural text geometry of Three.js. The interaction with 3DHOP and HTML document is controlled by the JavaScript switch statement. Each clickable sphere Remoteis a case Sens. that2019, 11invokes, 2508 specific statements involving a native animation function of 3DHOP20 ofand 26 jQuery events. As regards to the back-end configuration, the text strings and the coordinates are retrieved and accessed by the query operations of MongoDB, a NoSQL database. AJAX requests are exteriorsent to the 3D server, model framesget the theaggregated equivalent data position as JSON with format a smooth then transitionparse it and and give a customized input to the image user galleryinterface. is shownThe connection (Figure 14 ).between The index AJAX of theand labels database canbe is dynamicallyhandled by toggleda server-side as well scripting with the geospatiallanguage, PHP. coordinates of the center of the sphere.
(a)
(b) Figure 14. (a) Text and graphic labels on the interior of the church and (b) the result of a click event Figure 14. (a) Text and graphic labels on the interior of the church and (b) the result of a click event to to a point of interest . a point of interest.
The text label assignment is not a simple programming task when it is independent of pre-built components and interferes with the 3D space. The HTML canvas element that hosts the 3DHOP’s viewer, cannot display at runtime both 2D and 3D context. This shortage can be handled by Three.js library. It’s ray casting method determines the clickable geometry by projecting a ray from the mouse position on the screen to the 3D scene. An anonymous function detects the sphere that the ray intersects within an accepted distance threshold and returns the point of collision. The label is created at this position based on the procedural text geometry of Three.js. The interaction with 3DHOP and HTML document is controlled by the JavaScript switch statement. Each clickable sphere is a case that invokes specific statements involving a native animation function of 3DHOP and jQuery events. As regards to the back-end configuration, the text strings and the coordinates are retrieved and accessed by the query operations of MongoDB, a NoSQL database. AJAX requests are sent to the server, get the aggregated data as JSON format then parse it and give input to the user interface. The connection between AJAX and database is handled by a server-side scripting language, PHP. Remote Sens. 2019, 11, 2508 21 of 26
6. Evaluation The web-based visualization of large and high-resolution 3D models requires a robust bandwidth, high hardware performance and fast data transmission in order to be optimized. The network speed of 12 Mbp/sec that ISPs typically provide is adequate for streaming 3D content without the risk of congestion. With WebGL API, GPU resources are directly accessed while transferring and rendering the 3D data. Therefore, the latency’s factor outweighs the other two regarding the 3D platform’s performance. The loading time gets even more important in the case of non-specialized users that are not disposed towards slow loading times, poor frame rates and delays in the visualization. Such a website is quickly abandoned and characterized as a bad user experience. The performance analysis is a crucial insight for the effectiveness of the developed tools and data structure and their impact to the 3D platform’s general responsiveness. Browser developer tools are used and all testing is done locally, with client and server running on the same network infrastructure. The test is executed on a conventional laptop with an Intel Dual Core i5-7200, CPU at 2.50 GHz, 8 GB of RAM and AMD Radeon ™ 520 Graphics (2 GB DDR3 exclusively), in Windows 10. Bandwidth throttling is used to simulate network download speed of 10 Mbit / s and the upload rate up to 0.7 Mbit/s. The throttling takes into account possible low bandwidths and latencies due to external network interference. The test results are executed by the DevTools in the latest version of three browsers (Google Chrome, Mozilla Firefox, and Microsoft Edge) and are presented in Table2.
Table 2. Comparing 3D platform’s pages loading time on three major browsers.
Browser Homepage Subpage 1 Subpage 2 Google Chrome 77 4.98 s 1.50 s 3.87 s Microsoft Edge 44 4.93 s 1.31 s 3.94 s Mozilla Firefox 69 4.80 s 1.36 s 3.73 s
In less than five seconds the homepage of the platform that comprises the largest amount of data needed from the default point of view are fully loaded. An equivalent excellent performance attains the subpages. The ideal website load time ranges from two to five seconds and a further delay in loading process impacts user engagement and the overall usability. The current speed marginally affects the performance but its optimization is a prerequisite in case of updating platform’s content with more data or several paradigms. Further analysis is needed to investigate which resources consume the most network load and to what extent they affect the overall loading speed of the 3D platform. Besides the XHR requests and responses, the multimedia assets likely consume lots of bandwidth and start-up time may be affected by code syntax and structure. The Network Monitor of Develop Tools includes a performance analysis tool in order to determine how long the browser takes to download these different parts of the website. The tool loads each page with an empty cache simulating the first time a user visits it. The metrics for the cached content are summarized in Figure 15. The resources are grouped by type and chart (a) illustrates the loading time and chart (b) the relative size of each type. The time taken in delivering the requested data, namely the xhr type, has the largest impact on platform’s responsiveness. The multi-resolution format and its rendering technique account considerably for this delay. Each request transfers a sufficient amount of each model’s partitions for the composition of the final 3D model. The streaming of the different versions of the 3D models at variable resolution is carried out by consecutive requests and browser-side responses. Instead of delivering a single chunk on the order of hundreds of megabytes, the view-dependent visualization leads to balanced compression and decompression rates and progressive loading. The efficacy of this mechanism to the overall performance is demonstrated in the considerable small size of xhr resources, as can be observed in the second chart of Figure 15. Remote Sens. 2019, 11, 2508 22 of 26 Remote Sens. 2019, 11, x FOR PEER REVIEW 22 of 26
1 60 0.9 50 0.8 0.7 40 0.6 0.5 30 0.4 20 0.3 0.2 10 0.1 0 0 xhr images js css html xhr images js css html Size (MB) Size Homepage Subpage 1 Time (sec)
(a) (b)
Figure 15. Cashed content used normally for each page of the platform:platform: ( a) Resources loading time (sec) (b) Size of data transferred (MB).(MB).
The images consume the largest portion of the av averageerage platform’s pay-load on the web which is unsurprising consideringconsidering their their quality quality level level and initialand initial size. JavaScript size. JavaScript scripts constitutescripts constitute also expensive also expensiveresources as resources they require as they downloading, require downloading, parsing and compiling parsing and prior compiling to their execution. prior to Antheir optimization execution. Anstrategy optimization for the website strategy responsiveness for the website and usabilityresponsiveness involves and the followingusability modifications:involves the following modifications:Compressing the multi-resolution models following their creation on the post-processing phase for fasterCompressing streaming the and multi-resolution adaptive rendering. models The following Nexus library their comprisescreation on an the effi post-processingcient compression phase and fordecompression faster streaming method and as adaptive well as a dedicatedrendering. Three.js The Nexus loader. library The good comprises compression an efficient rates, thecompression reduction andof original decompression files’ size method and the relativeas well as high a dedicated decompression Three.js speed loader. attain The better good performance. compression rates, the reductionOptimizing of original the front-end files’ size architecture,and the relative moving high inline decompression scripts and speed styling attain into externalbetter performance. files, jQuery reformatsOptimizing syntax orthe replaces front-end the architecture, long lines of codemoving with in shorterline scripts versions. and Curtailingstyling into the external inline scripts files, jQueryand using reformats AJAX methods syntax or for replaces manipulation the long the lines page of code content with improve shorter the versions. overall Curtailing page loading. the inline scriptsMinifying and using and AJAX compressing methods images for manipulation before adding the them page and content determining improve their the dimensions overall page so as loading.not to reflow the content while loading. Single image caching can assist decrease pare latency while loading.Minifying Delivering and compressing the files responsively images before also improves adding them performance and determining for the smaller their dimensions screens of tablets so as notand to smartphones. reflow the content while loading. Single image caching can assist decrease pare latency while loading.Finally, Delivering a demonstration the files of responsively the visualization alsoe ffiimprovesciency of performance the multi-resolution for the method smaller is screens conducted of tabletsin a section and ofsmartphones. the 3D model of Meteora. The parameters of this specific frame of the scene are stored in a vectorFinally, and seta demonstration as the default view. of the With visualization time step of efficiency 0.5 s from theof the homepage’s multi-resolution startup the method stages ofis conductedthe visualization in a section refinement of the 3D are model recorded of Meteora. (Figure 16 The). At parameters initial loading of this (0.5 specific s), a low-resolution frame of the scene and “rough”are stored version in a vector of the and 3D modelset as the is already default visible view. inWith the time homepage. step of The 0.5 speeds from ofthe rendering homepage’s and loadingstartup theis remarkable stages of the as at visualization two seconds refinement after homepage are recorded launch the (Figure high-resolution 16). At initial model loading is well (0.5 defined. s), a Thelow-resolution stages of the and progressive “rough” version refinement of the can 3D be mode observedl is already in Figure visible 15. The in the low homepage. analysis corresponds The speed ofto rendering the less detailed and loading and smaller is remarkable data chunks as at two of the seconds multi-resolution after homepage schema launch and the high-resolution visualization is modelimproved is well on-the-fly. defined. The stages of the progressive refinement can be observed in Figure 15. The low analysis corresponds to the less detailed and smaller data chunks of the multi-resolution schema and the visualization is improved on-the-fly.
Remote Sens. 2019, 11, 2508 23 of 26 Remote Sens. 2019, 11, x FOR PEER REVIEW 23 of 26
(a) (b)
(c) (d)
Figure 16. Visualization resultsresults of of a a detail detail of of the the 3D 3D model model of of Meteora Meteora after after (a) ( 0.5a) 0.5 s, ( bs,) 1(b s,) 1 (c s,) 1.5 (c) s1.5 and s (andd) 2 ( sd) from 2 s from homepage homepage launch. launch.
7. Conclusions Conclusions The developeddeveloped platform platform aims aims to ato centralized a centralized and sophisticatedand sophisticated visualization visualization of diverse of heritagediverse heritagedata emphasizing data emphasizing on user interaction on user and interaction knowledge and dissemination. knowledge Therefore,dissemination. the capabilities Therefore, of the capabilities3DHOP platform of the are3DHOP extended platform with neware extended interactive with features new interactive and manipulation features mechanismsand manipulation of the mechanisms3D scene. The of introduction the 3D scene. of The two introduction new types of of tools, two thenew automatic types of navigationtools, the automatic and the scene-based navigation andsearch the and scene-based retrieval, search provides and critical retrieval, oversight provides of critical the 3D oversight space and of the the spatial 3D space interconnection and the spatial of interconnectionthe information thatof the clarifies information it. The textualthat clarifies and graphical it. The textual labels depictand graphical an additional labels information depict an additionallayer that enablesinformation characterization layer that enables and instant characterization identification and in instant the context identification of the plenteous in the context cultural of theand plenteous historical cultural assets. Finally, and historical the incorporation assets. Finally, of the the Three.js incorporation viewer provesof the Three.js that two viewer visualization proves thatsystems two ofvisualization different specifications, systems of different technical specifications, backgrounds technical and capabilities backgrounds can beand synthesized capabilities intocan bea cohesive synthesized solution. into Thea cohesive successful solution. implementation The success offul these implementation features rests uponof these the features effectiveness rests ofupon the thedesigned effectiveness programming of the system designed and programming its ability to respond system to paralleland its andability dynamic to respond actions. to The parallel JavaScript and programmingdynamic actions. language The JavaScript endorses programming web development language with high-tech endorses featuresweb development and is recommended with high-tech to be featuresused to dynamicallyand is recommended manipulate to thebe used content to dynami of digitalcally Cultural manipulate Heritage the repositories. content of digital The evaluation Cultural Heritageof the platform repositories. is held byThe a performanceevaluation of analysis the platform by measuring is held the by loading a performance time of each analysis page andby measuringexamining the networkloading time load of of each its resources. page and examining the network load of its resources. The intrinsic openness of the platform is appealing to simple users and profitsprofits the scientificscientific community byby identifying, identifying, retrieving retrieving and re-usingand re-using the cultural the cultural resources. resources. The cognitive The and cognitive navigational and navigationaltools facilitate tools the deeperfacilitate and the broader deeper comprehension and broader comprehension of the physical, of historical the physical, and archaeologicalhistorical and archaeologicalaspects of the presentedaspects of objectsthe presented by the non-domainobjects by the experts. non-domain Similarly, experts. it fosters Similarly, collaboration it fosters on collaborationinformation sharing on information and synergies sharing across and a widersynergie ranges across of disciplines, a wider range including of disciplines, engineering, including natural engineering,science, education, natural media science, and ed economics.ucation, media It effi andciently economics. addresses It emerging efficiently issues addresses of the emerging Cultural issuesHeritage of the field, Cultural such Heritage as risk characterization,field, such as risk disastercharacteriz managementation, disaster and manage landscapement and dynamics landscape by dynamicsanthropogenic by anthropogenic and physical and factors. physical Structural factors. analysis Structural can anal beysis performed can be performed to 3D structures, to 3D structures, BIMs and BIMsCAD and models CAD models regardless regardless of geometric of geometric complexity, complexity, loading loading conditions conditions or or material material type. type. SeismicSeismic vulnerability, structural behavior,behavior, damage phenomena and other pathological changes changes can can be be precisely represented and measured on multi-LOD or time-series datasets. Their perception and interpretation is amplified by the use of the platform’s interactive and metric tools in virtue of their spatial consistency.
Remote Sens. 2019, 11, 2508 24 of 26 represented and measured on multi-LOD or time-series datasets. Their perception and interpretation is amplified by the use of the platform’s interactive and metric tools in virtue of their spatial consistency. Alternatively, view-based indexing and real-time segmentation are supported utilities for identification, monitoring and diagnosis of all 3D modeling formats. Its programming and styling principles could lie at the core of web virtual and augmented reality or supply other online repositories with predefined functions and design mechanisms. The following suggestions are made regarding further extensions and optimization plans of the presented work: Linking a relational database would provide semantically enhanced access to the existing digital resources. The back-end scheme that was partially implemented for the labeling system showcases the viability and practically of server-side configuration for visualization enrichment. Pre-processing geometric classification, annotations and management of the manifold content on a conceptual framework are incomplete at this development stage. The responsiveness of the developed tools on low-end and mid-range mobile devices could be examined to ensure that access and applicability are not restricted. Transitioning from React.js to React Native development is a proposed approach that could wrap Three.js functionalities and the associated data in a cross-platform application. The dynamic multimedia integration, its correlation strategies with the 3D scene and the navigation mechanisms could formulate mid-level solutions and define a higher programming level. Therefore, the platform would undertake the role of a web service or framework. With simple and automated procedures, they could be exploited by any user, regardless of programming skills as native utility functions for effortless customization. Investigating the compatibility and performance of ancillary data encodings and development platforms is recommended for the optimum visualization schema to attain immersive user’s experience. It is suggested to experiment with the multi-resolution format and progressive or compression techniques and test the combination use of interfaces and libraries of both imperative and declarative programming.
Author Contributions: Conceptualization, A.-M.B. and S.S.; Data curation, C.I. and S.S.; Funding acquisition, C.I. and S.S.; Methodology, A.-M.B.; Project administration, C.I. and S.S.; Resources, C.I. and S.S.; Software, A.-M.B.; Supervision, C.I.; Visualization, A.-M.B.; Writing–original draft, A.-M.B. and S.S.; Writing–review & editing, A.-M.B. and C.I. Funding: This research has been co-financed by the European Union and Greek national funds through the Operational Program Competiveness, Entrepreneurship and Innovation, under the call RESEARCH–CREATE–INNOVATE (project code: T1E∆K-02859). Acknowledgments: The authors acknowledge the society for the preservation and promotion of the Meteora Heritage “Meteoron Lithopolis” for multimedia provision and free access to useful information. Conflicts of Interest: The authors declare no conflict of interest.
References
1. Dall’Asta, A.; Leoni, G.; Meschini, A.; Petrucci, E.; Zona, A. Integrated approach for seismic vulnerability analysis of historic massive defensive structures. J. Cult. Herit. 2019, 35, 86–98. [CrossRef] 2. Fortunato, G.; Funari, M.F.; Lonetti, P. Survey and seismic vulnerability assessment of the baptistery of san giovanni in tumba (Italy). J. Cult. Herit. 2017, 26, 64–78. [CrossRef] 3. Moraitou, E.; Aliprantis, J.; Christodoulou, Y.; Teneketzis, A.; Caridakis, G. Semantic Bridging of Cultural Heritage Disciplines and Tasks. Heritage 2019, 2, 611–630. [CrossRef] 4. Freire, N.; Voorburg, R.; Cornelissen, R.; de Valk, S.; Meijers, E.; Isaac, A. Aggregation of Linked Data in the Cultural Heritage Domain: A Case Study in the Europeana Network. Information 2019, 10, 252. [CrossRef] 5. M’Darhri, A.A.; Baillet, V.; Bourineau, B.; Calantropio, A.; Carpentiero, G.; Chayani, M. Share-Publish- Store-Preserve. Methodologies, Tools and Challenges for 3D Use in Social Sciences and Humanities; PARTHENOS: Marseille, France, 2019; p. 94. 6. Jensen, P. Semantically Enhanced 3D: A Web-Based Platform for Spatial Integration of Excavation Documentation at Alken Enge, Denmark. J. Field Archaeol. 2018, 43, S31–S44. [CrossRef] Remote Sens. 2019, 11, 2508 25 of 26
7. Carraro, F.; Marinello, A.; Morabito, D.; Bonetto, J. New Perspectives on the Sanctuary of Aesculapius in Nora (Sardinia): From Photogrammetry to Visualizing and Querying Tools. Open Archaeol. 2019, 5, 263–273. [CrossRef] 8. Reddy, M.; Leclerc, Y.; Iverson, L.; Bletter, N. TerraVision II: Visualizing Massive Terrain Databases in VRML. IEEE Comput. Graph. Appl. 1999, 19, 30–38. [CrossRef] 9. Three.js. Available online: https://threejs.org/ (accessed on 17 October 2019). 10. Babylon.js. Available online: https://www.babylonjs.com/ (accessed on 17 October 2019). 11. SceneJS. Available online: http://scenejs.org/ (accessed on 17 October 2019). 12. Schütz, M. Potree: Rendering Large Point Clouds in Web Browsers. Diploma Thesis, Vienna University of Technology, Vienna, Austria, 2016; p. 92. 13. Potenziani, M.; Callieri, M.; Dellepiane, M.; Corsini, M.; Ponchio, F.; Scopigno, R. 3DHOP: 3D Heritage Online Presenter. Comput. Graph. 2015, 52, 129–141. [CrossRef] 14. Behr, J.; Eschler, P.; Jung, Y.; Zöllner, M. X3DOM: A DOM-Based HTML5/X3D Integration Model. In Proceedings of the 14th International Conference on 3D Web Technology—Web3D ’09, Darmstadt, Germany, 16–17 June 2009; ACM Press: Darmstadt, Germany, 2009; p. 127. [CrossRef] 15. Potenziani, M.; Callieri, M.; Dellepiane, M.; Scopigno, R. Publishing and Consuming 3D Content on the Web: A Survey. FNT Comput. Graph. Vis. 2018, 10, 244–333. [CrossRef] 16. Mwalongo, F.; Krone, M.; Reina, G.; Ertl, T. State-of-the-art report in web-based visualization. Comput. Graph. Forum 2016, 35, 553–575. [CrossRef] 17. Evans, A.; Romeo, M.; Bahrehmand, A.; Agenjo, J.; Blat, J. 3D Graphics on the Web: A Survey. Comput. Graph. 2014, 41, 43–61. [CrossRef] 18. Scopigno, R.; Callieri, M.; Dellepiane, M.; Ponchio, F.; Potenziani, M. Delivering and Using 3D Models on the Web: Are We Ready? Virtual Archaeol. Rev. 2017, 8, 1–9. [CrossRef] 19. Barrettara, M. New Methods for Sharing and Exhibiting 3D Archaeology. Posthole 2013, 31, 8–13. 20. Statham, N. Scientific Rigour of Online Platforms for 3D Visualization of Heritage. Virtual Archaeol. Rev. 2019, 10, 1–16. [CrossRef] 21. Rodríguez-Gonzálvez, P.; Guerra Campo, Á.; Muñoz-Nieto, Á.; Sánchez-Aparicio, L.; González-Aguilera, D. Diachronic Reconstruction and Visualization of Lost Cultural Heritage Sites. ISPRS Int. J. Geo-Inf. 2019, 8, 61. [CrossRef] 22. Abate, D.; Avgousti, A.; Faka, M.; Hermon, S.; Bakirtzis, N.; Christofi, P. An online 3d database system for endangered architectural and archaeological heritage in the south-eastern mediterranean. Int. Arch. Photogramm. Remote Sens. Spat. Inf. Sci. 2017, XLII-2/W3, 1–8. [CrossRef] 23. Galeazzi, F.; Callieri, M.; Dellepiane, M.; Charno, M.; Richards, J.; Scopigno, R. Web-Based Visualization for 3D Data in Archaeology: The ADS 3D Viewer. J. Archaeol. Sci. Rep. 2016, 9, 1–11. [CrossRef] 24. Lucci Baldassari, G.; Demetrescu, E.; Pescarin, S.; Eriksson, J.; Graf, H. Behind Livia’s Villa: A Case Study for the Devolution of Large Scale Interactive “in-Site” to “on-Line” Application. In Design, User Experience, and Usability. Web, Mobile, and Product Design; Marcus, A., Hutchison, D., Kanade, T., Kittler, J., Kleinberg, J.M., Mattern, F., Mitchell, J.C., Naor, M., Nierstrasz, O., Pandu Rangan, C., et al., Eds.; Springer: Berlin/Heidelberg, Germany, 2013; Volume 8015, pp. 238–247. [CrossRef] 25. Krämer, M.; Gutbell, R. A Case Study on 3D Geospatial Applications in the Web Using State-of-the-Art WebGL Frameworks. In Proceedings of the 20th International Conference on 3D Web Technology—Web3D ’15, Heraklion, Crete, Greece, 18–21 June 2015; ACM Press: New York, NY, USA, 2015; pp. 189–197. [CrossRef] 26. Hristov, P.I.; Petkov, E.G. Approach for mesh optimization and 3d web visualization. East. Acad. J. 2018, 3, 46–52. 27. Callieri, M.; Leoni, C.; Dellepiane, M.; Scopigno, R. Artworks Narrating a Story: A Modular Framework for the Integrated Presentation of Three-Dimensional and Textual Contents. In Proceedings of the 18th International Conference on 3D Web Technology—Web3D ’13, San Sebastian, Spain, 20–22 June 2013; ACM Press: New York, NY, USA, 2013; p. 167. [CrossRef] 28. Mi, X.; Pollock, B.M. Metadata Schema to Facilitate Linked Data for 3D Digital Models of Cultural Heritage Collections: A University of South Florida Libraries Case Study. Cat. Classif. Q. 2018, 56, 273–286. [CrossRef] Remote Sens. 2019, 11, 2508 26 of 26
29. Lloyd, J. Contextualizing 3D Cultural Heritage. In Digital Heritage. Progress in Cultural Heritage: Documentation, Preservation, and Protection; Ioannides, M., Fink, E., Moropoulou, A., Hagedorn-Saupe, M., Fresa, A., Liestøl, G., Rajcic, V., Grussenmeyer, P., Eds.; Springer International Publishing: Cham, Switzerland, 2016; Volume 10058, pp. 859–868. [CrossRef] 30. Ubik, S.; Kubišta, J. Scalable Real-Time Sharing of 3D Model Visualizations for Group Collaboration. In Cooperative Design, Visualization, and Engineering; Luo, Y., Ed.; Springer International Publishing: Cham, Switzerland, 2017; Volume 10451, pp. 244–251. [CrossRef] 31. Bezzi, L.; Bezzi, A.; Boscaro, C.; Feistmantl, K.; Gietl, R.; Naponiello, G.; Ottati, F.; de Guzman, M. Commercial Archaeology and 3D Web Technologies. J. Field Archaeol. 2018, 43, S45–S59. [CrossRef] 32. Siddeq, M.M.; Rodrigues, M.A. Novel 3D Compression Methods for Geometry, Connectivity and Texture. 3D Res. 2016, 7, 13. [CrossRef] 33. Alliez, P.; Desbrun, M. Progressive Compression for Lossless Transmission of Triangle Meshes. In Proceedings of the 28th Annual Conference on Computer Graphics and Interactive Techniques—SIGGRAPH ’01, Los Angeles, CA, USA, 12–17 August 2001; ACM Press: New York, NY, USA, 2001; pp. 195–202. [CrossRef] 34. Gobbetti, E.; Marton, F.; Rodriguez, M.B.; Ganovelli, F.; Di Benedetto, M. Adaptive Quad Patches: An Adaptive Regular Structure for Web Distribution and Adaptive Rendering of 3D Models. In Proceedings of the 17th International Conference on 3D Web Technology—Web3D ’12, Los Angeles, CA, USA, 4–5 August 2012; ACM Press: New York, NY, USA, 2012; p. 9. [CrossRef] 35. Lavoué, G.; Chevalier, L.; Dupont, F. Streaming Compressed 3D Data on the Web Using JavaScript and WebGL. In Proceedings of the 18th International Conference on 3D Web Technology—Web3D ’13, San Sebastian, Spain, 20–22 June 2013; ACM Press: New York, NY, USA, 2013; p. 19. [CrossRef] 36. Ponchio, F.; Dellepiane, M. Fast Decompression for Web-Based View-Dependent 3D Rendering. In Proceedings of the 20th International Conference on 3D Web Technology—Web3D ’15, Heraklion, Crete, Greece, 18–21 June 2015; ACM Press: New York, NY, USA, 2015; pp. 199–207. [CrossRef] 37. Limper, M.; Jung, Y.; Behr, J.; Alexa, M. The POP Buffer: Rapid Progressive Clustering by Geometry Quantization. Comput. Graph. Forum 2013, 32, 197–206. [CrossRef] 38. Potenziani, M.; Callieri, M.; Scopigno, R. Developing and Maintaining a Web 3D Viewer for the CH Community: An Evaluation of the 3DHOP Framework. In Proceedings of the Eurographics Workshop on Graphics and Cultural Heritage, Vienna, Austria, 12–15 November 2018; pp. 169–178. [CrossRef] 39. Di Benedetto, M.; Corsini, M.; Scopigno, R. Spidergl: A Graphics Library for 3d Web Applications. Int. Arch. Photogramm. Remote Sens. Spat. Inf. Sci. 2012, XXXVIII-5/W16, 467–474. [CrossRef] 40. Boutsi, A.-M.; Ioannidis, C.; Soile, S. INTERACTIVE ONLINE VISUALIZATION OF COMPLEX 3D GEOMETRIES. ISPRS Int. Arch. Photogramm. Remote Sens. Spat. Inf. Sci. 2019, XLII-2/W9, 173–180. [CrossRef]
© 2019 by the authors. Licensee MDPI, Basel, Switzerland. This article is an open access article distributed under the terms and conditions of the Creative Commons Attribution (CC BY) license (http://creativecommons.org/licenses/by/4.0/).