Creating an Appealing 3D-Visualization Tool for Baseboards in the Web Browser Lars Bergman
Total Page:16
File Type:pdf, Size:1020Kb
LiU-ITN-TEK-A--20/028--SE Creating an Appealing 3D-visualization Tool for Baseboards in the Web Browser Lars Bergman 2020-06-12 Department of Science and Technology Institutionen för teknik och naturvetenskap Linköping University Linköpings universitet SE-601 74 Norrköping, Sweden 601 74 Norrköping LiU-ITN-TEK-A--20/028--SE Creating an Appealing 3D-visualization Tool for Baseboards in the Web Browser Examensarbete utfört i Medieteknik vid Tekniska högskolan vid Linköpings universitet Lars Bergman Handledare Henry Fröcklin Examinator Niklas Rönnberg Norrköping 2020-06-12 Upphovsrätt Detta dokument hålls tillgängligt på Internet – eller dess framtida ersättare – under en längre tid från publiceringsdatum under förutsättning att inga extra- ordinära omständigheter uppstår. Tillgång till dokumentet innebär tillstånd för var och en att läsa, ladda ner, skriva ut enstaka kopior för enskilt bruk och att använda det oförändrat för ickekommersiell forskning och för undervisning. Överföring av upphovsrätten vid en senare tidpunkt kan inte upphäva detta tillstånd. All annan användning av dokumentet kräver upphovsmannens medgivande. För att garantera äktheten, säkerheten och tillgängligheten finns det lösningar av teknisk och administrativ art. Upphovsmannens ideella rätt innefattar rätt att bli nämnd som upphovsman i den omfattning som god sed kräver vid användning av dokumentet på ovan beskrivna sätt samt skydd mot att dokumentet ändras eller presenteras i sådan form eller i sådant sammanhang som är kränkande för upphovsmannens litterära eller konstnärliga anseende eller egenart. För ytterligare information om Linköping University Electronic Press se förlagets hemsida http://www.ep.liu.se/ Copyright The publishers will keep this document online on the Internet - or its possible replacement - for a considerable time from the date of publication barring exceptional circumstances. The online availability of the document implies a permanent permission for anyone to read, to download, to print out single copies for your own use and to use it unchanged for any non-commercial research and educational purpose. Subsequent transfers of copyright cannot revoke this permission. All other uses of the document are conditional on the consent of the copyright owner. The publisher has taken technical and administrative measures to assure authenticity, security and accessibility. According to intellectual property law the author has the right to be mentioned when his/her work is accessed as described above and to be protected against infringement. For additional information about the Linköping University Electronic Press and its procedures for publication and for assurance of document integrity, please refer to its WWW home page: http://www.ep.liu.se/ © Lars Bergman Linköping University | Department of Science and Technology Master’s thesis, 30 ECTS | Medieteknik 202020 | LIU-ITN/LITH-EX-A--2020/001--SE Creating an appealing 3D- visualization tool for baseboards in the web browser Skapande av ett tilldragande 3D-visualiserings verktyg för lister i webbläsaren Lars Bergman Supervisor : Henry Fröcklin Examiner : Niklas Rönnberg Linköpings universitet SE–581 83 Linköping +46 13 28 10 00 , www.liu.se Upphovsrätt Detta dokument hålls tillgängligt på Internet - eller dess framtida ersättare - under 25 år från publicer- ingsdatum under förutsättning att inga extraordinära omständigheter uppstår. Tillgång till dokumentet innebär tillstånd för var och en att läsa, ladda ner, skriva ut enstaka ko- pior för enskilt bruk och att använda det oförändrat för ickekommersiell forskning och för undervis- ning. Överföring av upphovsrätten vid en senare tidpunkt kan inte upphäva detta tillstånd. All annan användning av dokumentet kräver upphovsmannens medgivande. För att garantera äktheten, säker- heten och tillgängligheten finns lösningar av teknisk och administrativ art. Upphovsmannens ideella rätt innefattar rätt att bli nämnd som upphovsman i den omfattning som god sed kräver vid användning av dokumentet på ovan beskrivna sätt samt skydd mot att dokumentet ändras eller presenteras i sådan form eller i sådant sammanhang som är kränkande för upphovsman- nens litterära eller konstnärliga anseende eller egenart. För ytterligare information om Linköping University Electronic Press se förlagets hemsida http://www.ep.liu.se/. Copyright The publishers will keep this document online on the Internet - or its possible replacement - for a period of 25 years starting from the date of publication barring exceptional circumstances. The online availability of the document implies permanent permission for anyone to read, to down- load, or to print out single copies for his/hers own use and to use it unchanged for non-commercial research and educational purpose. Subsequent transfers of copyright cannot revoke this permission. All other uses of the document are conditional upon the consent of the copyright owner. The publisher has taken technical and administrative measures to assure authenticity, security and accessibility. According to intellectual property law the author has the right to be mentioned when his/her work is accessed as described above and to be protected against infringement. For additional information about the Linköping University Electronic Press and its procedures for publication and for assurance of document integrity, please refer to its www home page: http://www.ep.liu.se/. © Lars Bergman Abstract Today a lot of libraries, tools and techniques exist to create visual appealing renders for the web. In this thesis, a prototype for visualizing baseboards in the web browser was developed. The prototype demonstrates how certain libraries and techniques were used in order to achieve a generalized, appealing and realistic visualization of the baseboards in a 3D-visualization. This paper also covers why certain libraries and techniques were used for this prototype. The resulting prototype, use Three.js and takes advantage of PBR, different mapping methods and lighting sources that can be changed during runtime through a GUI. To get results on different aspects, such as the visual appeal, how realistic, and what lighting sources worked best for the prototype, a web-survey was sent out and the results evaluated. The evaluation showed that the usage of PBR, a roughness-metalness workflow, environment mapping, physical correct lighting and a point light solution in Three.js all made a good job in creating an appealing, generalized and realistic visualization tool for the web. Acknowledgments I would like to thank Valbo Trä for suggesting and making this master thesis possible. A big thank you goes to my supervisors at Valbo Trä Nisse Eriksson and Mikael Helmersson for discussions, feedback and ideas, as well as more project related advice and encouragement. I would like to thank Patrick Andersson at 100 Procent media as well for more technical details regarding the project. Also I want to thank my thesis examiner Niklas Rönnberg and assistant Henry Fröcklin at Linköping University, for guiding me in the right direction for this master thesis and re- port. Lastly a thank you to Camilla Forsell at Linköping University for helping me with the structure of the web survey. iv Contents Abstract iii Acknowledgments iv Contents v List of Figures vii List of Tables viii 1 Introduction 1 1.1 Visualization tool for browser . 1 1.2 Research questions . 2 1.3 Limitations . 2 1.4 Structure of report . 2 2 Related Work 3 2.1 An optimal solution for implementing a specific 3D web application . 3 2.2 Ambient Occlusion for Dynamic Objects and Procedural Environments . 3 2.3 Photorealistic Texturing for Modern Video Games . 4 2.4 IKEA - Home planner . 4 2.5 Three.js - Physically accurate incandescent bulb . 4 2.6 Babylon.js - Physical based rendering . 4 2.7 Xeogl.js - Importing and loading a more complex model and using different materials . 4 3 Background 5 3.1 HTML . 5 3.2 Javascript and Libraries . 5 3.3 WebGL . 6 3.4 Lightings . 8 3.5 Ray-tracing . 9 3.6 PBR - Physically Based Rendering . 9 3.7 3D-models, maps and textures . 10 4 Method 13 4.1 PBR . 13 4.2 Libraries . 13 4.3 Lighting . 14 4.4 Mapping and textures . 15 4.5 Web-survey . 15 4.6 Camera and movement in the scene . 15 v 5 Implementation 16 5.1 Localhost server - Node.js . 16 5.2 Creating the scene . 16 5.3 Lighting . 17 5.4 Baseboards . 17 5.5 PBR . 18 5.6 Mapping and textures . 18 5.7 GUI . 19 5.8 Shadows . 19 6 Result and discussion 21 6.1 Prototype . 21 6.2 Web-survey results . 25 6.3 Survey evaluation . 27 6.4 Discussion . 28 7 Conclusions and future work 30 7.1 Conclusions . 30 7.2 Future work . 31 Bibliography 32 vi List of Figures 3.1 Scene node map for Three.js, showing the render flow . 6 3.2 Shows browser support of WebGL 1.0. 7 3.3 Shows browser support of WebGL 2.0. 7 3.4 Difference between a perspective and an orthographic camera. 8 3.5 Shows how roughness and metalness affects a material. 10 3.6 Image showing the two most common PBR workflows Metalness/Roughness and Specular/Glossiness. 11 3.7 Image showing a cube map. 12 5.1 Artefacts can be seen on the side of the baseboard when using a normal map, inside the red rectangle. 19 6.1 Resulting prototype, showing the base model, a baseboard, the skybox and the two windows containing the GUI and performance. 22 6.2 Resulting prototype, showing a white baseboard in close-up. 22 6.3 GUI components . 23 6.4 Image showing off the shadows. Note that there are two light sources in the scene. One spotlight and one point light. The spotlight is casting the sharpest shadow and the point light the lesser shadow. The model floating in the middle of the room was added to show the shadows more clearly. 23 6.5 Shows four images of different roughness and metalness values. The only param- eters changing in the images are the metalness and roughness values. Note that both the scene and baseboard have the same roughness and metalness values here, but they can be different.