Linköping University | Department of Computer and Information Science Master thesis, 30 ECTS | Datateknik 2021 | LIU-IDA/LITH-EX-A--21/016--SE Development of a 3D viewer for showing of house models in a web browser – A usability evaluation of navigation techniques Utveckling av en 3D visare för visning av husmodeller i en web- bläsare Pål Kastman Supervisor : Anders Fröberg Examiner : Erik Berglund Linköpings universitet SE–581 83 Linköping +46 13 28 10 00 , www.liu.se Copyright © 2021 Pål Kastman This work is licensed under CC BY 4.0 https://creativecommons.org/licenses/by/4.0/, unless otherwise stated. Abstract The architectural industry today struggles with how to best show their models to interested suitors opposite the construction industry which have the advantage of the fact that they can build physical models of houses which they can then show. This is where BIM comes into the picture. By extracting the graphics from these models and visualising them in a web browser this study has by creating a viewer with different navigation techniques sought to find out which techniques where most efficient for navigating models in the viewer. This was done with the help of user tests which results show that when it comes to projections, users were more efficient with perspective projection than orthogonal projections, however, user interviews show that users could still find a use for orthographic projection as it was better for displaying floor plans. Egocentric perspective were more efficient than allocentric perspective, but most users preferred egocentric perspective inside the models and allocentric projection outside of it. As for clipping objects and using clip planes, it is a closer race as users completed the task faster with clip plane but to a greater extent with culling of objects. However, most users wanted to use both technologies at the same time so that they could complement each other. Acknowledgments I would like to thank Erik Berglund and Anders Fröberg for their guidance and feedback during this work. I also want to give a special thanks to my family and friends for having kept inspiring me to finish this. iv Contents Abstract iii Acknowledgments iv Contents v List of Figures vii List of Tables viii Glossary ix 1 Introduction 1 1.1 Background . 1 1.2 Motivation . 1 1.3 Aim............................................ 2 1.4 Research questions . 2 1.5 Delimitations . 2 2 Theory 4 2.1 Spatial memory and virtual environments . 4 2.2 Navigation techniques . 5 2.2.1 Egocentric and Allocentric Perspectives . 5 2.2.2 Gimbal Lock . 6 2.3 Culling and Clipping . 6 2.4 Graphical projections . 6 2.4.1 Projection plane . 6 2.4.2 Ray . 7 2.4.3 Parallel projection . 7 2.4.4 Perspective projection . 8 2.5 Usability testing . 9 2.5.1 Summative studies . 9 2.5.2 Formative studies . 9 2.5.3 Usability testing metrics . 10 2.5.4 Planning the tests . 10 2.6 Usability measures . 11 2.6.1 Performance measures . 11 2.6.2 Perception-based measures . 12 2.7 Confidence intervals . 12 2.8 Test data . 13 2.8.1 Binary data . 13 2.8.2 Continuous data . 13 v 3 Method 15 3.1 Prestudy . 15 3.2 Implementation . 15 3.3 Usability study . 16 3.3.1 Test model . 16 3.3.2 Test users . 16 3.3.3 Test sessions . 16 3.3.4 User Tests . 16 3.3.5 User interviews . 17 4 Results 18 4.1 Prestudy . 18 4.2 Implementation . 18 4.2.1 Camera control . 20 4.2.2 Clip plane control . 20 4.2.3 Graphical projections . 21 4.3 Usability Study . 22 4.3.1 User Tests . 22 4.3.2 User Interviews . 24 5 Discussion 26 5.1 Method . 26 5.2 Results . 27 5.2.1 Prestudy . 27 5.2.2 Implementation . 28 5.2.3 Evaluation . 28 5.3 Societal and ethical aspects . 30 6 Conclusion 31 Bibliography 32 A Appendix A – Test plan 35 A.1 Purpose . 35 A.2 Research questions . 35 A.3 Method . 35 A.4 User profiles . 35 A.5 Tasks list . 36 A.6 Test environment & equipment . 36 A.7 Evaluation method . 36 A.8 Deliverables . 37 B Appendix B – Interview questions 38 vi List of Figures 1.1 Architectural models . 2 2.1 Six degrees of freedom of a ship . 5 2.2 View Frustum . 6 2.3 Various projections of cube above plane . 7 2.4 Axonometric projections . 8 2.5 Vanishing Points . 8 2.6 Problems found against users tested on in formative testing. 10 4.1 GUI used for testing . 19 4.2 Right click menu. 19 4.3 Clip plane control. 21 4.4 Implemented graphical projections . 22 4.5 Task success results . 23 4.6 Time on task results . 24 vii List of Tables 4.1 Characteristics of test participants . 23 viii Glossary BIM Building information modeling. 1, 2, 27 CAD Computer-aided design. 15 CSS Cascading style sheets. 15 DoF Degrees of freedom. 4, 5, 6 FPV First-person view. 5 glTFTM Graphics Language Transmission Format. 2, 28 GUI Graphical user interface. 15, 18, 20 HTML Hypertext Markup Language. 15 IFC Industry Foundation Classes. 27, 28 ISO International Organization for Standardization. 10 SaaS Software as a service. 1 VE Virtual Environment. 2, 4, 5, 31 VR Virtual Reality. 2, 27 WebGL Web Graphics Library. 1, 2, 15, 28 ix 1 Introduction This master thesis was done in collaboration with Sandell Collection AB – an architecture firm based in Stockholm, Sweden. From now on, this firm will be referred to as the client. 1.1 Background When buying a house in Sweden today, the customer normally contacts a building contractor which in turn contacts an architecture firm. This process makes it difficult for architecture firms to influence the customer to choose their designs. If the architecture firms wants to show their designs to the customer directly, they basically have two alternatives. They can either construct a miniature model of the design (see figure 1.1), or they can show a computer model of the design. Both of these alternatives means that they would have to invite all customers, one by one, to show the models at their office. That would be very time-consuming, and hence, very expensive too. If instead, they were able to make the models available online, so that anyone interested could explore them in their own pace, they would not only be able to save time, but they could also reach more potential buyers. 1.2 Motivation Building Information Modelling (BIM) is the process of collecting all the information about a building in one place. The data is stored in a BIM file that works as a database for the building. The database can be used to visualise the building in 3D as it contains all the geometries and coordinates of all the objects in the building. This makes it possible for architects, engineers and contractors to work collaboratively and in real-time on the same model. The software that is used by architects, to work in the BIM files are desktop applications that are very advanced and also very expensive, examples of these are Autodesk Revit1 and RhinoCeros2. 1https://www.autodesk.com/products/revit 2https://www.rhino3d.com/ 1 1.3. Aim (a) Interior model of a condo (b) Exterior model of a building Figure 1.1: Physical architectural models that can be shown to potential customers to promote the sale of a building. In (a) the focus is on the interior of the building, whereas in (b) the exterior is shown instead. There also exist some applications that are Software as a service (SaaS) applications (Au- todesk Forge3, bimsync4). These use Web Graphics Library5 (WebGL) which is a JavaScript6 library for visualising 2D and 3D graphics directly in a web browser without the need to in- stall additional software. These could.