“Gateway to the Past”: Designing AR-enriched Brno City Guide to Historical Gates Masaryk University Faculty of Informatics Bachelor’s Thesis Spring 2020 Júlia Gonová Declaration Hereby I declare that this thesis is my original authorial work, which I have worked out on my own. All sources, references, and literature used or excerpted during elaboration of this work are properly cited and listed in complete reference to the due source. Júlia Gonová Supervisor: MgA. Helena Lukášová, ArtD. Acknowledgements Firstly, I would like to thank my supervisor, MgA. Helena Lukášová, ArtD., for her kind guidance, advice and support throughout this whole process. My thanks also goes to the employees of NPÚ ÚOP in Brno and Muzeum města Brna for providing me with relevant historical information. Last but definitely not least, I want to express my gratitude to my parents for everything they have given me and for never once wavering in their conviction that I will finish this work, and my brothers, for helping, supporting, and believing in me in their own brotherly way. Abstract This work focuses on the design and development of an interactive city history guide using augmented reality. To overcome the need for special devices or dedicated applications, the augmented reality aspect of this work is facilitated through a platform-independent web application. The printed guide provides basic information about the main topic, the historical gates of Brno, as well as their likenesses as 2D images. At the same time, the web application enriches the experience by supplying interactive 3D models of the gates in augmented reality. Index terms augmented reality, web augmented reality, webAR, web application, 3D modelling, historical architecture, history, architecture, design, graphic design, JavaScript, HTML Contents 0 Introduction 1 1 Augmented reality and its uses 3 1.1 Augmented reality 4 1.1.1 Uses of AR 4 1.1.2 Types of AR based on the tracking mode 6 1.1.3 AR mediums and disadvantages 8 1.2 WebAR 8 1.2.1 The AR.js library 9 2 Historical research about the city gates 11 2.1 Měnínská brána 13 2.2 Židovská brána 14 2.3 Ferdinandova brána 15 2.4 Brněnská brána 15 2.5 Veselá brána 16 2.6 Běhounská 16 3 Creation of the 3D models of the gates 19 3.1 Creating blueprints in Adobe Illustrator 20 3.2 Modelling in 3Ds Max 21 3.3 Sculpting in Sculptris 23 3.4 Selecting the model format for WebAR 24 3.5 Texturing in Blender 24 3.5.1 UVW Unwrapping 24 3.5.2 Choosing colours and materials 25 3.5.3 Software and techniques 26 3.5.4 Retouching the models for better texturing 27 4 Designing a city history guide 29 4.1 Design of pictograms used as AR markers 30 4.2 Design and layout of the guide 31 4.3 Typography of the guide 33 4.4 Contents of the guide 34 4.5 Map design 34 4.6 Assembling the final booklet 36 5 Implementation of the webAR application 37 5.1 Implementing a basic webAR application 38 5.2 Implementing the user interface 39 5.3 Implementing controls 39 5.4 Workflow of testing 40 5.5 Encountered problems, issues and bugs 41 5.6 Deployment and use of the web application 43 Conclusion 45 Bibliography 47 Electronic attachments 51 0Introduction For years now, modern technology has been continuously providing us with unique new ways of preserving history and presenting it to the public. In particular, life-like 3D digital models of architecture, whether standing or long-buried, allow for a more personal connection to the past than literature or flat imagery ever could. So many buildings remain no more than a few drawings and descriptions. However, we now have a unique opportunity to breathe life into these forgotten pieces of architecture, thanks to the growing capabilities of not only modelling software, but also smart devices. Like most medieval cities, Brno had its fortifications and gates leading in and out of it, but nowadays few people know of them. Although the gates had to give way to the city’s expansion long before they could be photographed, and drawings of them are few and not always clear, there is enough material to give us an idea of how they looked and where they stood. They were all unique in their use and design, and all but one of them met the same fate during the 19th century — they were torn down to allow Brno to expand. The last remaining gate, the Měnínská gate, underwent so much change that its current appearance does not say much of its past. Brno has its fair share of monuments to admire, but the forgotten gates are sadly 2 underrepresented. Thus, the main goal of this work is to use modern means to present them in an accessible, interactive way. To do so, I will design a graphic city guide to present basic information about the gates and hold their simplified representations in the form of a set of pictograms. Each pictogram will serve as a marker for a platform-independent web application that will display a 3D model of the given gate in augmented reality (AR). The app will provide some basic controls over the models, such as zooming and rotation. The 3D models will be created as accurately as possible based on historical drawings, literary mentions, and the few remaining pieces of the gates. The first chapter introduces AR both in general and in the context of web applications. The second chapter provides an overview of the available historical information about the gates. The third chapter deals with creating 3D models, while the fourth chapter presents the graphic design of the printed guide. The fifth chapter describes the process of implementing and testing the webAR application. Augmented reality and 1 its uses 1.1 Augmented reality Augmented reality (AR) is the enrichment of a real-world environment by computer-generated data, which can be visual or auditory. In comparison with virtual reality (VR), the real-world environment is not entirely substituted with a digital one. AR alters or adds to real-world objects and places, and thus provides the user with additional information and interaction. This work describes augmented reality, its uses, types, advantages and disadvantages only briefly, as these topics have been previously covered in other works.1 Instead, the focus of this work will be on WebAR and the circumstances and issues specific to graphic design and 3D modelling in conjunction with WebAR. 1.1.1 Uses of AR AR can enrich life in many different ways and areas, from entertainment through education to engineering. It is an excellent way of making advertisements more eye-catching and effective, and even cut down on the amount of space they take up in the 4 real world (and consequently lower the price of the ad), since they can be more detailed in the virtual one. Another area in which AR can be helpful is education — it can improve the quality and enjoyment of learning by allowing for quick, simple, and interactive ways to view the study material (such as displaying 3D models of internal organs, for example [1]). Interior designers, architects or engineers can also see the results of their work in a real-world environment before they create the actual physical product. Moreover, AR can be used to complete an artist’s vision and give their art new depth, and in conjunction with that, help to present history and historical architecture to tourists in novel ways. AR in history and architecture There have been multiple projects utilising AR to present history and architecture to the public. For example, an ongoing project called SensiMAR [2] uses AR, speakers, and a machine producing 1 For example, see J. Vavrík’s Model of the Historical Building in Augmented Reality, Masaryk University, Faculty of Informatics, 2019. smells to present the historical site of the House of Cantaber in the Conimbriga Ruins in Portugal. The SensiMAR application, developed by Anabela Marto, shows the user a 3D rendering of the building as it once was, overlayed over the current ruins. As a 360-degree experience, it allows the user to walk around the ruins and explore the site. It is enriched with an animation of Romans walking around and the sound of them talking, wagons riding by, and the smell of the fish market that used to be nearby. Another example is an application [3] developed in 2019 by Ahmed Emara, which uses AR to overlay ancient ruins in Alexandria, Egypt, with a virtual rendering of what the tomb once looked like. It completely replaces the surrounding ruins with the created 3D objects, and it features atmospheric sound and animated fire. Augtraveler [4] from 2019, is an educational travel application developed for tourists visiting India’s cultural heritage sites, and it is available both for iOS and Android devices. 5 It features many different augmented 3D models, audio, text and pictures. The application presents information about various subjects in the real-world environment, and offers closer looks Fig. 1.1: Screenshot from at detailed models of buildings or artefacts. Figure 1.1 shows an Augtraveler video [4] example of the application’s features [4]. BAMPFA AR — Augmented Timeline is a project led by architect Luisa Caldas [5]. Her team created an iOS application for interactive storytelling about the history of the new university building. The application uses AR to present the building at different stages of its existence, with digital models superimposed onto physical artifacts or models of the building.