No description available.

In this study a 3D-application was developed to use for visualizing a website and its visitors in real time. The 3D application was developed to be used in websites developed in the CMS Episerver. This study has investigated the benefits of being able to see how website visitors navigate between webpages in real time, how scalable the implemented 3D application is, if its possible to develop a 3D application that can be implemented in Episerver websites and what the benefits of using 3D compared to 2D or text logs for the end user are. The 3D visualisation was built using the JavaScript library Babylon.js and works by modifying the Episerver Controller class to store relevant visitor data each time a visitor makes a HTTP request to the webserver. The data is then used with Babylon to render animations and visitor representations in the 3D application. Results show that a real time view of a website can be beneficial to be able to see load distribution, where visitors are positioned before restarting the server, to be used in user tests and in customer service cases and that the majority of questioned webadministrators thinks that it would be beneficial to be able to see their visitors in real time. Results also show that the application is not very scalable and that the use of 3D may not be beneficial for the end user. Finally recommendations for future development is presented and discussed. / I detta projekt utvecklades en 3D-visualisering av en webbplats vars syfte var att synliggöra besökares rörelser på webbplatsen i realtid. Visualiseringen skulle utvecklas på ett vis som gav enkel implementation på webbplatser byggda i Episerver. Studien undersöker huruvida det är möjligt att utveckla en 3D- visualisering för Episerver, eventuella fördelar med att se besökare i realtid, hur skalbar applikationen är samt vilka fördelar 3D har för slutanvändaren. 3D- visualiseringen byggdes i JavaScript-biblioteket Babylon.js och fungerar genom att modifiera Episervers controller-klass till att spara nödvändig information från besökaren vid varje förfrågan till servern. Datan används till att rita ut och animera besökares positioner på den 3D-renderade webbplatsen. Resultaten visar att det kan vara användbart att se besökare i realtid för att se lastdistribution på webbplatsen, för att undvika att besökare är i kritiska lägen vid omstart av servern, för att handleda besökare i kundserviceärenden eller för att samla information vid användartest. Vidare visar resultaten att applikationen inte är särskilt skalbar och att 3D inte är ger mervärde för slutanvändaren annat än för imponatoreffekt.

3D JavaScript frameworks are used for creating interactive 3D in web applications. There are two prominent frameworks: Babylon.js and Three.js. They are often compared to one another where performance and ease of use are mentioned as important factors.  A web developer could face choosing a 3D framework. This thesis aims to aid in that process. It investigates how Babylon.js compares to Three.js when it comes to performance such as memory use and frames per second for the end-user consuming a web app. It also investigates how they compare when it comes to ease of use for the developer in terms of initial learnability.  For the performance part, a web app with a minimalistic one box animation was created with each framework and deployed on Netlify. The web app was accessed with a browser’s developer tools to record memory and frames per second. For the ease of use part, observation sessions were made with nine developers who were tasked with getting a basic 3D model up and running locally with each framework with the official documentation as a starting point, one hour limit respectively.  Results showed that both frameworks performed equally when it came to frames per second, and Babylon.js used 2,2 MB, 46 %,  more memory. Only five out of eight or 63 % of the participants managed to implement a 3D model in Babylon.js and five out of nine or 56 %  in Three.js. Three.js scored slightly higher on ease of use than Babylon.js, but neither framework scored high on the overall scale. Participants favoured Babylon.js when asked to choose. However, almost all had a frustrating experience with both during the sessions. Performance is similar except for memory use when it comes to lightweight implementations in these frameworks. Initial learnability could be a gatekeeper. If users do not get past the first hurdle fast with quick feedback that a framework works in the most basic sense, a conceivable risk is they could give up and never use it.

Denna studie jämför skillnader i FPS mellan de två WebGL-biblioteken Three.js och Babylon.js. Prestandan som mäts är hur många bilder per sekund, eller FPS (engelska frames per second) som en webbapplikation med 3D-grafik klarar att rendera. Prestandamätningarna utförs på en 3D-modellvisare som implementeras i både Three.js och Babylon.js. Testerna utförs på en bärbar dator med Windows 10. Hypotesen antar att Three.js inte kommer att prestera bättre än Bablyon.js Resultatet från studien visar dock att Three.js presterar bättre än Babylon.js. Studiens syfte är att ge utvecklare en uppfattning om vilket WebGL-bibliotek som är mest lämpligt att använda vid exempelvis utveckling av en e-handelssida där produkter har 3D-förhandsvisningar. Studien kan användas som grund eller inspiration för framtida forskning inom samma område.

This thesis describes the process of creation of a game for web browsers using Babylon.js framework. It also touches on subjects of 3D graphics on the web, 3D animation and structure of web applications. Game itself is created using Typescript language and it is shared using a Node.js module as its web server. It is a fighting game for two players, where their characters fight using martial arts.

Denna studie jämför två olika 3D-ramverk i form av A-Frame med Entity component system och Babylon.js utan Entity component system för att undersöka hur arkitekturen i ramverket påverkar renderingstiden. För att mäta renderingstiden mäts frames per second på ett utvecklat tower defense spel per ramverk med 3D-grafik i webbläsaren Google Chrome. Detta är i form av ett tekniskt experiment för att utesluta utomstående variabler. Det utvecklades tre nivåer av komplexitet inom spelen för att undersöka hur komplexiteten påverkar renderingshastigheten men efter mätningarna visade det sig att de olika nivåerna av komplexitet i artefakterna hade ingen signifikant påverkan på resultatet. Dock fanns det en signifikant skillnad mellan de olika ramverken där A-Frame med Entity component system fick sämre resultat. För vidare arbeten behöver antalet webbläsare i experimentet utökas samt en högre nivå av komplexitet testas för att få mer verklighetstrogna resultat. / <p>Stavningsvarierade titlar på svenska och engelska:</p><p>Prestandajämförelse mellan webbaserade 3D-ramverk med olika arkitekturer</p><p>Performance comparison between web-based 3D frameworks using different architectures</p>