Master’s Thesis Czech Technical University in Prague Faculty of Electrical Engineering F3 Department of Computer Graphics and Interaction Visualization of Prague Castle Bc. Antonín Smrček Study Programme: Open Informatics Field of Study: Computer Graphics and Interaction January 2016 Supervisor: prof. Ing. Jiří Žára, CSc. Acknowledgement / Declaration I would like to thank prof. Ing. Jiří I hereby declare that I have completed Žára, CSc., for supervision of my the- this thesis independently and that I have sis. He provided me with invaluable in- listed all the literature and publications sights, feedback on work in progress and used. his guidance was especially important I have no objection to usage of this in finishing stages of the project. My work in compliance with the act §60 thanks are also due to all friends who Zákon č. 121/2000Sb. (copyright law), helped me with the user testing. Finally, and with the rights connected with the I want to particularly thank my mother copyright act including the changes in for her support throughout my studies. the act. In Prague on January 11, 2016 ........................................ v Abstrakt / Abstract Tato diplomová práce se zabývá vý- This thesis describes a development vojem webové aplikace která vizualizuje of the web-based 3D virtual walk ap- prostředí Pražského hradu a umožňuje plication which visualizes the Prague 3D virtuální procházku v rámci jeho Castle and provides the users with an prostor. Důraz je kladen na grafic- information about interesting objects kou kvalitu a výkon aplikace. Obdobné in the area, with focus on graphical systémy pro vizualizaci měst jsou podro- quality and performance of the ap- beny analýze a jsou diskutovány možné plication. Similar city visualization volby technologií pro implementaci. Je applications are analyzed and choice of vysvětlen proces návrhu a implementace technologies used for the implementa- uživatelského rozhraní, stejně tak jako tion is discussed. Process of the user zvolený přístup ohledně modelování, interface design and implementation is začlenění moderních vizuálních efektů explained, as well as the approach taken a dosažení výkonnostních optimalizací. in modeling, incorporating modern vi- Finální aplikace je podrobena uživa- sual effects and achieving performance telskému a výkonnostnímu testování optimizations. We have performed user a je provedeno srovnání s obdobnými testing and also measured the applica- vizualizačními aplikacemi. tion’s performance. Finally, we compare Klíčová slova: Pražský hrad, webová the application to other visualization vizualizační aplikace, virtuální pro- applications. cházka, WebGL, Three.js Keywords: Prague Castle, web-based Překlad titulu: Vizualizace Pražského visualization, virtual walk, WebGL, hradu Three.js vi Contents / 1 Introduction ........................1 4.1 Choice of technology ........... 41 1.1 Thesis structure ..................1 4.2 Application requirements ...... 41 2 Visualization systems analysis.....3 4.2.1 Functional require- 2.1 Goals .............................3 ments ..................... 41 2.2 Map services .....................4 4.2.2 Non-functional re- 2.2.1 Google Maps ...............4 quirements ............... 42 2.2.2 Google Earth...............5 5 Software structure ............... 43 2.2.3 Mapy.cz .................. 10 5.1 Architecture requirements ..... 43 2.2.4 Here ...................... 11 5.2 Components .................... 45 2.2.5 Comparison of map 6 Virtual content creation ......... 48 services ................... 12 6.1 Goals ........................... 48 2.3 Standalone presentations ...... 15 6.2 Choosing the content cre- 2.3.1 Virtual Old Prague ...... 16 ation programs ................. 50 2.3.2 Saint Jean Cathedral .... 18 6.3 Extent of the content creation . 50 2.3.3 Interactive demos by 6.4 References for the content Bitmanagement Soft- creation......................... 51 ware ...................... 20 6.5 Textures creation .............. 51 2.3.4 3D tours by Internet 6.5.1 Hardware limitations .... 51 Dominion ................. 24 6.5.2 Acquiring photographs 2.3.5 3D Ancient Wonders..... 27 for textures ............... 52 2.3.6 Timewalk................. 28 6.5.3 Creating textures from 2.3.7 Comparison of stan- photographs .............. 53 dalone applications ...... 29 6.5.4 Retouching textures in 2.4 Conclusion of similar sys- GIMP .................... 54 tems analysis ................... 30 6.5.5 Tileable textures ......... 55 3 Technology analysis .............. 32 6.5.6 Approximating com- 3.1 Goals ........................... 32 plex objects by textures . 58 3.2 VRML .......................... 33 6.6 Models creation ................ 60 3.3 X3D (X3DOM) ................ 33 6.6.1 Modeling process out- 3.4 Adobe Flash.................... 34 line ....................... 60 3.5 Google Native Client .......... 34 6.6.2 Creating details .......... 60 3.6 WebGL + JavaScript com- 6.6.3 Handling two-sided pilable language ................ 35 faces ...................... 61 3.6.1 TypeScript ............... 35 6.6.4 Productivity tips ......... 61 3.6.2 Dart ...................... 36 6.6.5 Environment modeling .. 62 3.6.3 Google Web Toolkit ..... 36 6.7 Exporting from SketchUp ..... 64 3.6.4 Emscripten ............... 36 6.7.1 Issues with exporting .... 65 3.7 Comparison of technologies.... 37 6.8 Statistics ....................... 66 3.7.1 Choosing JavaScript- 7 User interface .................... 67 compilable program- 7.1 Goals ........................... 67 ming language............ 38 7.2 UI functionality ................ 68 3.7.2 Middleware above We- 7.3 Implementation, design and bGL ...................... 38 UI behavior .................... 70 3.8 Conclusion of technology 7.3.1 Technologies and li- analysis ......................... 40 braries .................... 70 4 Project specification ............. 41 vii 7.3.2 Left part of HUD and 11.2.2 Results .................. 126 virtual keyboard ......... 73 11.2.3 Conclusion .............. 128 7.3.3 Viewpoint change ........ 73 11.3 Performance testing........... 129 7.3.4 Map ...................... 74 11.3.1 Conclusion .............. 130 7.3.5 Minimap.................. 76 12 Conclusion ....................... 131 7.3.6 Interaction with ob- 12.1 Future work ................... 132 jects of interest........... 77 References ....................... 133 7.3.7 Translation mechanism .. 79 A Abbreviations .................... 139 8 Collision detection ............... 83 B Additional images ............... 140 8.1 Goals ........................... 83 C Screenshots and comparisons .. 143 8.2 Collision detection ap- D Installation manual .............. 150 proaches ........................ 84 D.1 Running the application ...... 150 8.3 Heightmap implementation.... 88 D.1.1 Running the applica- 8.3.1 Creation of the tion locally .............. 150 heightmap ................ 89 D.2 Requirements and trou- 8.3.2 Using the heightmap..... 90 bleshooting .................... 151 8.3.3 Heightmap layers ........ 92 D.2.1 Minimum computer 8.4 Principles of the applica- configuration ............ 151 tion’s collision detection ....... 93 D.2.2 Supported web 8.5 Implementation of collision browsers ................. 151 detection ....................... 95 D.2.3 Graphic card drivers .... 151 9 Performance optimizations ...... 99 E User manual ..................... 152 9.1 Goals and considerations ...... 99 F Contents of the enclosed 9.2 Three.js and meshes ........... 99 DVD-ROM....................... 158 9.3 Rendering approaches ........ 101 9.3.1 Naive rendering ap- proach ................... 101 9.3.2 Improved rendering approach – Mesh merg- ing ....................... 105 9.3.3 Mesh merging – several groups ................... 112 9.4 Possible performance im- provements in the future ..... 114 10 Lighting and visual improve- ment techniques................. 116 10.1 Goals .......................... 116 10.2 Illumination models........... 116 10.3 Shadows ....................... 119 10.4 Lighting and other tech- niques.......................... 122 10.5 Reducing rendering artefacts . 123 11 Testing ........................... 125 11.1 Goals .......................... 125 11.2 User testing ................... 125 11.2.1 Testing scenario ......... 125 viii Tables / Figures 2.1. Comparison of map services ... 12 2.1. Google Maps 3D (bird’s eye) 2.2. Comparison of standalone – Prague Castle ..................6 visualization applications ...... 29 2.2. Google Earth – Prague Castle ...8 3.1. Comparison of technologies .... 37 2.3. Google Earth – virtual walk 3.2. Comparison of JavaScript- in the Prague Castle .............9 compilable languages........... 38 2.5. Mapy.cz – Prague Castle 2 .... 10 3.3. Comparison of middleware 2.4. Mapy.cz – Prague Castle....... 11 above WebGL .................. 39 2.6. Here – Prague Castle .......... 13 6.1. Tileable vs single textures 2.7. Visual comparison of map comparison ..................... 56 services ......................... 14 8.1. Collision events’ properties 2.8. Virtual Old Prague ............ 17 summary........................ 98 2.9. Virtual Old Prague – options.. 18 9.1. Time complexity – naive ren- 2.10. Saint Jean Cathedral........... 19 dering approach ............... 105 2.11. 3D City Visualization .......... 21 9.2. Time complexity – Mesh 2.12. City visualization with night merging ........................ 111 simulation ...................... 22 9.3. Time complexity – Mesh 2.13. Cathedral ....................... 23 merging with groups .......... 112 2.14.