Away with apps? Interactive web 3D driven by relational databases Jelle Vermandere Away with apps? Interactive web 3D driven by relational databases. Jelle Vermandere Student number: 01306207 Supervisors: Willem Bekers, Prof. ir.-arch. Ruben Verstraeten Counsellor: Nino Heirbaut Master's dissertation submitted in order to obtain the academic degree of Master of Science in de ingenieurswetenschappen: architectuur Academic year 2019-2020 The author gives permission to make this master dissertation available for consultation and to copy parts of this master dissertation for personal use. In all cases of other use, the copyright terms have to be respected, in particular with regard to the obligation to state explicitly the source when quoting results from this master dissertation. 13/01/2020 Foreword This thesis aims to make the process of adding 3D models to relational databases easier while providing more functionality. Before I explain this, I would like to thank everyone who made my life easier. First of all, my supervisors Willem Bekers and Ruben Verstraeten for their valuable guidance sessions, their inspiring ideas and their support in my journey to the completion of this thesis. I would also express my gratitude towards my favourite spelling checkers Lotte and Tessa for their extreme focus on letters and punctuation marks and Jonathan for the more rigorous language corrections. Special thanks goes to my sister Floor for being my lay-out support and showing me the wonderful world of web development. Thanks to the numerous people who created forum posts and online tutorials who helped me solve many problems. I have learned many new skills along the way, many of which I did not even know existed. I also want to thank my friend Sytse for keeping me physically fit in between the long and sometimes frustrating coding sessions by being my climbing buddy. Lastly, an enormous thank you to my parents for always being there. They have given me everything I need in my journey to adulthood and allowed me to pursue my passions and dreams. Without them, I would have never been where I am today. Table of Contents Defining the challenge: Introduction 15 Architectural Databases 15 Database websites 15 App based 3D model viewing 16 Mixed reality 17 Augmented reality examples 17 Providing a solution: The website 19 Objective: no more apps 19 Workflow 20 Collecting information 20 Creating the data 20 Filling the database 20 Linking the data 20 Displaying on the website 20 Modeller vs Curator vs User 21 Organisation of the thesis 21 3D model creation 21 Database creation 21 Website creation 21 Case Study 22 Le Corbusier 22 Villa Savoye 22 The Philips pavilion 23 The Chapel Notre Dame du Haut 23 Software used 24 3D model creation and export 24 Database creation and management 24 Website creation and hosting 24 Creating 3D models for the web 25 Modelling: Creating 3D geometry 26 Different types of 3D modelling 26 Modelling for real time rendering 27 Modelling for the section plane 27 Texturing: Creating a material 28 UV layout 28 PBR Materials 31 Texture baking 33 Lighting: defining the lights 34 Real time lights 34 Image-based lighting 34 Rendering: calculating the final image 35 Real time rendering 35 Post-processing 36 Exporting: choosing a file type 38 Optimizations 39 3D model 39 Textures 40 Constructing a database for the web 41 What is a (relational) database? 41 Structured query language SQL 41 Not only SQL 44 Choosing a Database Framework 44 MySQL 44 NodeGoat 44 Integration in the website 44 Database structure 45 Collecting and storing information 46 Keeping it up to date 46 Building the website 47 Dynamic websites 48 Responsive websites 48 Choosing the coding languages 49 HTML 49 PHP 49 Bootstrap 50 Creating a working environment 51 Setting up a local server 51 Setting up an online server through Heroku 51 Database integration 52 Establishing the connection 52 Interacting with the database: CRUD 52 File renaming system 53 Alternative option: Nodegoat 54 3D model integration 55 Testing different Technologies 55 Programming the 3D viewport 57 Programming the section plane 59 The viewport 60 Augmented reality integration 61 Augmented reality 61 Testing different technologies 62 Programming The AR experience 64 Programming the QR code generator 65 The AR experience 66 Website Structure 67 Different pages 67 The navigation bar 68 The home page 68 The search page 69 The person page 69 The building page 70 The AR page 70 The submit page 71 Conclusion 72 The finished product 72 Workflow system 73 Applications 74 Future expandability 74 Appendix 75 References 75 Websites 75 Books/ Papers 76 Frameworks 77 Images 77 Source code 77 Example catalogue 78 AWAY WITH APPS? INTERACTIVE WEB 3D DRIVEN BY RELATIONAL DATABASES Jelle Vermandere Supervisors: Willem Bekers, Ruben Verstraeten Counsellor: Nino Heirbaut Abstract- Architectural databases mostly consist of text and 2D plans. Adding 3D models can create a better understanding of the buildings. This thesis documents the creation of a website, in which interactive 3D models are linked to relational databases. By providing guidelines and best practices about the creation of these 3D models, this thesis allows modellers to create 3D models that are compatible with all the provided features. By keeping in mind the fact that this website can be used with very large databases, an effort has been made to automate as much of the process as possible. The resulting website can be used for exhibitions, archiving and much more. Keywords- Relational database, 3D model, Real time rendering, Website, Augmented reality DEFINING THE CHALLENGE: Everything that is produced for this thesis and the website is made with open source or free software. INTRODUCTION This ensures the future expandability of the website is not limited by expensive programs. The ever increasing amount of architectural data needs to be stored in online databases in order to be accessible and searchable. The data mostly consists of text and architectural plans, because storing and conserving one of the most useful documents in architectural presentations, the scale model, is very inefficient. This is where virtual 3D models can help fill the need for a better understanding of the buildings. The website is a combination of different Furthermore, placing these virtual models in the technologies. Because of the rapid development real world with the aid of a mobile device, can of these kinds of technologies, most parts are provide a very similar experience to a physical interchangeable in case a better alternative scale model, with the added benefits of accurate becomes available. material representation, animations and more. This technology is called Augmented reality. CREATING 3D MODELS FOR THE WEB Creating 3D models that are fully compatible with all the features of the website will require some specific needs. Displaying a 3D model on a screen requires three main parts: a 3D form, textures and a PROVIDING A SOLUTION: renderer. All these parts have different parameters THE WEBSITE and functions that need to be optimised in order to provide a smooth experience on the website. This thesis aims to lower the barrier of interacting with 3D models as much as possible by providing a full web based solution. This means that there is no need to download any extra apps or programs on the user’s device. The website links a database and 3D models that are connected to specific buildings 3D form Textures Renderer of that database. For storing the final 3D models, the popular and efficient GL Transmission Format (glTF) file format was chosen. This format is built for fast rendering and is widely adopted on most platforms. 10 CONSTRUCTING A Furthermore, every type of data has a dedicated page. That page will also show all the connected DATABASE FOR THE WEB people and buildings. This way, the user can explore the data and find new relations. This includes The database is an integral part of the website buildings, the centre piece of the website. The structure, because all the content of the website is connection with the 3D models is a integral part of stored in it. It also holds the references to the 3D this thesis. models in order to make sure the correct models The website has a page for viewing the 3D models are linked to the buildings. The database is built with in a exhibition context. The page is linked to the the open standard “Serial Query Language”. This camera of the mobile device of the visitor. With the allows multiple databases to be linked together. By aid of special bar codes (QR codes), the user will linking the datasets together, relations can be set be able to view the 3D models in augmented reality. up. Building ID Name Architect ID Built Date 1 Philips Pavilion 1 1958 2 Villa Savoye 1 1931 3 .. .. .. .. .. .. .. Architect ID Name Birthday Nationality 1 Le Corbusier 06/10/1887 French 2 Jelle 26/06/1995 Belgian 3 .. .. .. .. .. .. .. These relations form the basis for large scale discoveries of new connections between buildings, architects, locations, time periods, and anything The website also has a submit page. Here, the 3D that is added to the database. models and their information can be added to the database. The whole process of linking the 3D models to the database, setting up the different data pages and generating the markers for the augmented reality experience is automated. This BUILDING THE WEBSITE allows the website to easily scale towards a large amount of different buildings. The website allows the end users to explore all the data, present in the database, in a visual way. The 3D models will provide the extra information simple text and images can not provide.