This thesis is about designing and creating 3D visualisation of interior localization using Sewio system. Visualisation is presented as web application with WebGL technology. WebGL deployment is simplified with Three.js library. For future scalability of the application, I deal with integration of Three.js into Model-View-Controller architecture. The last part of the thesis is about additional sensors and their use to make the localization more precise. There is a barometric senzor making vertical localization possible and inertial sensors useful for determining rotation of localized devices.

This master thesis deals with the large terrain rendering in real time using WebGL. The thesis also deals with ways of measuring and representation of terrain height data. The paper also compares several frameworks for WebGL and also describes the practical use of HTML5 technologies such as WebWorkers. Furthermore, it also compares the performance and compatibility of current web browsers with HTML5 technologies.

Utvecklingen av datorer och deras förmåga ökar klyftan mellan datorer och skapar en stormångfald av hårdvarutillgänglighet. Kapaciteten som datorer besitter varierar kraftigt ochdärmed även förmågan att hantera komplexa applikationer. Moderna applikationer erbju-der inställningar som användare kan anpassa för datorn, något som kräver att användarenhar tillräcklig kunskap för att förstå inställningarnas e ekt. Att välja ut de optimala in-ställningarna för datorn är en process som är både svår och tidskrävande. Detta arbetegranskar hur ett dynamiskt adaptivt system automatiskt kan anpassa inställningarna förapplikationen medan den kör, utan manuell extern inverkan. Systemet mäter kontinuerligtapplikationen och individuella teknikers prestanda. Baserat på mätresultat anpassar detadaptiva systemet applikationens inställningar. Genom att abstrahera funktionaliteten attjustera applikationen kan datorns kapacitet utnyttjas, utan varken användarens kunskapeller påverkan. Arbetet undersöker hur olika tekniker kan in uera applikationens prestandaoch genomför tester av ett dynamiskt anpassande systems förmåga att skräddarsy appli-kationen för exekveringsmiljön. / The development of computers and their ability increases the gap between computers andcreate a wide variety of hardware availability. The capacity that computers possess varyconsiderably and thus the ability to handle complex applications. Modern applicationsprovides settings that users can customize for the computer, which requires the user tohave su cient knowledge to understand the attitude of the e ect. To select the optimalsettings for your PC is a process that is both di cult and time consuming. This thesisexamines how a dynamically adaptive system can automatically adjust the settings for theapplication while it is running, without manual external impact. The system continuouslymonitors the application and individual technologies performance. Based on measurementsthe adaptive system can customize applications settings. By abstracting the functionalityto adjust the application the computer's capacity is utlizied, without neither the user'sknowledge or in uence. The thesis examines how various technologies can in uence ap-plication performance and conducts tests of a dynamically adaptive system's ability tocustomize the application for execution environment.

Med användning av ramverk kan förenkling av utritningen med pixel- och vektorgrafik i webbläsaren ske vid användning av WebGL API:t och Canvas 2D API:t. Men problemet är, att en dålig utritningshastighet är inget som vill upplevas när en 2D scen ritas ut i en webbapplikation. Genom att jämföra olika ramverk mot varandra, som använder sig av WebGL API:t eller Canvas 2D API:t, togs det reda på vilket av dessa ramverk som var snabbare i utritning. Tre ramverk valdes ut till studien för att göra mätningar på. Det implementerades en webbapplikation för att jämföra hur lång tid en utritning tar i de valda ramverken vid olika scenarier. Resultatet visade att ett hybridramverk som använde sig av förstnämnda API:t och föll tillbaka på andranämnda API:t var snabbare i 9 av 10 scenarier. I en fortsatt studie skulle flera ramverk kunna jämföras och även jämföras i olika användningsfall för att se hur ramverken presterar i dessa.

Este trabalho faz parte de um projeto maior, o electronic Physician Annotation Device (ePAD). O ePAD permite a criação de uma base de conhecimento médico usando anotações semânticas sobre lesões em imagens radiológicas, usando uma plataforma Web. Essas anotações servirão para identificar, acompanhar e reason sobre lesões tumorais em pesquisas médicas (especialmente sobre câncer). A informação adquirida e persistida pelo sistema permite avaliação automática por computadores; recuperação de imagens hospitalares e outros serviços relacionados a exames médicos. O ePAD é um desenvolvimento conjunto de grupos de pesquisas do ICMC-USP e do Department of Radiology da Stanford University. O principal trabalho, apresentado neste texto, é um novo conjunto de funcionalidades na Web para adicionar a marcação de lesões em imagens radiológicas em três dimensões ao ePAD. Elas permitirão a obtenção de dados mais precisos acerca de medidas tridimensionais de lesões como volume, posição e cálculo de maior diâmetro. O objetivo é facilitar o trabalho dos profissionais de radiologia na análise de diagnósticos e acompanhamento de lesões produzindo um acompanhamento mais acurado da evolução de doenças como o câncer. Anotações podem ser conectadas a lesões e conter informações semânticas, usando termos biomédicos da ontologia RadLex. Essas novas funcionalidades são baseadas em HTML5, com o auxílio de WebGL para visualização e manipulação de objetos 3D. As maiores contribuições deste trabalho são o software para visualização de séries de imagens radiológicas em 3D usando planos ortogonais, os protótipos de vídeo mostrando as três possíveis interfaces para marcação de lesões em 3D, a pesquisa com radiologistas (usando os protótipos de vídeo) para determinar que o cursor esférico era a melhor interface para marcar lesões em 3D e o protótipo dessa interface no ePAD. Este trabalho contou com a ajuda de usuários do Department. of Radiology da Stanford University e do Hospital das Clínicas da Universidade de São Paulo em Ribeirão Preto. / This work is part of a larger project, the electronic Physician Annotation Device (ePAD) project. The ePAD allows the creation of a medical knowledge base using semantic annotation on lesions found on radiological images using the Web platform. The annotation will serve to identify, follow-up and reason about tumor lesions in medical research projects (specially about cancer). The information acquired and persisted by the system allows automatic evaluation by computers; retrieval of hospital images and other services related to medical exams. ePAD is a joint development of the ICMC-USP and the Department of Radiology of the Stanford University research groups. The main work, presented here, is a new set of functionalities on the Web to add recording of lesions on radiological images in three dimensions to ePAD. They will lead to more accurate data about three dimensional lesion measurements, such as volume, position and longest diameter calculations. The objective is to ease the work of radiology professionals doing diagnostic analysis and lesion tracking producing more accurate follow-ups of disease evolution, such as of cancer. Annotation can be attached to lesions and hold semantic information, using biomedical ontology terms from RadLex. These new functionalities are based on HTML5 with the help of WebGL for visualization and manipulation of 3D objects. The main contributions of this work are the software for visualization of radiological image series in 3D using orthogonal planes, the video prototypes showing the three possible interfaces to mark lesions in 3D, the survey with radiologists (using the video prototypes) to determine that the spherical cursor was the best interface to mark lesions in 3D and the prototype of this interface in ePAD. This work received help from users of the Department of Radiology of the Stanford University and the Clinics Hospital of Ribeirão Preto of the University of São Paulo.

Este trabalho faz parte de um projeto maior, o electronic Physician Annotation Device (ePAD). O ePAD permite a criação de uma base de conhecimento médico usando anotações semânticas sobre lesões em imagens radiológicas, usando uma plataforma Web. Essas anotações servirão para identificar, acompanhar e reason sobre lesões tumorais em pesquisas médicas (especialmente sobre câncer). A informação adquirida e persistida pelo sistema permite avaliação automática por computadores; recuperação de imagens hospitalares e outros serviços relacionados a exames médicos. O ePAD é um desenvolvimento conjunto de grupos de pesquisas do ICMC-USP e do Department of Radiology da Stanford University. O principal trabalho, apresentado neste texto, é um novo conjunto de funcionalidades na Web para adicionar a marcação de lesões em imagens radiológicas em três dimensões ao ePAD. Elas permitirão a obtenção de dados mais precisos acerca de medidas tridimensionais de lesões como volume, posição e cálculo de maior diâmetro. O objetivo é facilitar o trabalho dos profissionais de radiologia na análise de diagnósticos e acompanhamento de lesões produzindo um acompanhamento mais acurado da evolução de doenças como o câncer. Anotações podem ser conectadas a lesões e conter informações semânticas, usando termos biomédicos da ontologia RadLex. Essas novas funcionalidades são baseadas em HTML5, com o auxílio de WebGL para visualização e manipulação de objetos 3D. As maiores contribuições deste trabalho são o software para visualização de séries de imagens radiológicas em 3D usando planos ortogonais, os protótipos de vídeo mostrando as três possíveis interfaces para marcação de lesões em 3D, a pesquisa com radiologistas (usando os protótipos de vídeo) para determinar que o cursor esférico era a melhor interface para marcar lesões em 3D e o protótipo dessa interface no ePAD. Este trabalho contou com a ajuda de usuários do Department. of Radiology da Stanford University e do Hospital das Clínicas da Universidade de São Paulo em Ribeirão Preto. / This work is part of a larger project, the electronic Physician Annotation Device (ePAD) project. The ePAD allows the creation of a medical knowledge base using semantic annotation on lesions found on radiological images using the Web platform. The annotation will serve to identify, follow-up and reason about tumor lesions in medical research projects (specially about cancer). The information acquired and persisted by the system allows automatic evaluation by computers; retrieval of hospital images and other services related to medical exams. ePAD is a joint development of the ICMC-USP and the Department of Radiology of the Stanford University research groups. The main work, presented here, is a new set of functionalities on the Web to add recording of lesions on radiological images in three dimensions to ePAD. They will lead to more accurate data about three dimensional lesion measurements, such as volume, position and longest diameter calculations. The objective is to ease the work of radiology professionals doing diagnostic analysis and lesion tracking producing more accurate follow-ups of disease evolution, such as of cancer. Annotation can be attached to lesions and hold semantic information, using biomedical ontology terms from RadLex. These new functionalities are based on HTML5 with the help of WebGL for visualization and manipulation of 3D objects. The main contributions of this work are the software for visualization of radiological image series in 3D using orthogonal planes, the video prototypes showing the three possible interfaces to mark lesions in 3D, the survey with radiologists (using the video prototypes) to determine that the spherical cursor was the best interface to mark lesions in 3D and the prototype of this interface in ePAD. This work received help from users of the Department of Radiology of the Stanford University and the Clinics Hospital of Ribeirão Preto of the University of São Paulo.

Web applications are becoming increasingly sophisticated and functionality that was once exclusive to regular desktop applications can now be found in web applications as well. One of the more recent advances in this field is the ability for web applications to render 3D graphics. Coupled with the growing number of devices with graphics processors and the ability of web applications to run on many different platforms using a single code base, this represents an exciting new possibility for developers of 3D graphics applications. This thesis aims to explore and evaluate the technologies for 3D graphics that can be used in web applications, with the final goal of using one of them in a prototype application. This prototype will serve as a foundation for an application to be included in a commercial product. The evaluation is performed using general criteria so as to be useful for other applications as well, with one part presenting the available technologies and another part evaluating the three most promising technologies more in-depth using test programs. The results show that, although some technologies are not production-ready, there are a few which can be used in commercial software, including the three chosen for further evaluation; WebGL, the Java library JOGL and Stage 3D for Flash. Among these, there is no clear winner and it is up to the application requirements to decide which to use. The thesis demonstrates an application built with WebGL and shows that fairly demanding 3D graphics web applications can be built. Also included are the lessons learned during the development and thoughts on the future of 3D graphics in web applications.

This thesis covers the utilization of N buffers in order to reduce resource contention on an abstract WebGL machine, and subsequently freeing up machine processing time. The buffers touched are frame buffers and vertex buffers. The paper also briefly covers the purpose and function of N buffering in relation to graphics and the function of a WebGL machine, the research and production of benchmark prototypes, some relevant benchmark results, and analysis and conclusions. The conclusion is made that the use of N>1 buffering is a potentially viable strategy for increasing WebGL performance, and some theories are outlined and suggestions given for further research to be made for the resolving of how this performance gain may be improved. / Denna uppsats granskar nyttjandet av N buffrar för att minska uppkomsten av resurskonflikter på en abstrakt WebGL maskin, och således frigöra processtid på maskinen i fråga. De typer av buffrar som vidrörs är så kallade frame buffers och vertex buffers. Uppsatsen går också igenom syftet och funktionen hos N buffrar i relation till grafik och funktionen hos en WebGL maskin, förstudien kring och produktionen av prestandatest-prototyper, en del relevanta mätresultat, samt analys och slutsatser. Slutsatsen nås att nyttjandet av N>1 buffrar är en potentiellt gångbar strategi för ökandet av prestanda hos WebGL, och en del teorier presenteras och förslag ges kring ytterligare studier för attöka prestanda ytterligare.

Background. For rendering graphics on the web, WebGL has been the standard API to employ over the years. A new technology, WebGPU, has been set to release in 2023 and utilizes many of the novel rendering approaches and features common for the native modern graphics APIs, such as Vulkan. Currently, very limited research exists regarding WebGPU:s rasterization capabilities. In particular, no research exists pertaining to its capabilities when used as a rendering backend in game engines.Objectives. This paper aims to investigate performance differences between WebGL and WebGPU. This is done in the context of the game engine Godot, and the measured performance is that of the CPU and GPU frame time. The tests consist of six games for analyzing real-world cases and a number of synthetic test cases that target specific parts of the rendering pipeline. To perform the comparisons a WebGPU backend Rasterizer was implemented with the intended scope of being ableto render basic 2D games.Method. The existing WebGL Rasterizer in Godot was deconstructed to match the scope of the intended rendering functionality. The WebGPU Rasterizer was then implemented in its image and the performance of the implementations was measured in different scopes. These scopes include the frame time on the GPU and CPU and some essential rendering functions on the CPU side. Lastly, the means were calculated, and a t-test was performed to validate the significance of the difference between Rasterizers.Results. The results show that WebGPU performs better than WebGL when used as a rendering backend in Godot, for both the games tests and the synthetic tests. The comparisons clearly show that WebGPU performs faster in mean CPU and GPU frame time. This held true also for 95% lowest frame time. The results varied for the cases of the mean 1% high frame time, with WebGPU generally performing better. The results for the essential rendering functions saw WebGL performing consistently better.Conclusions. In conclusion, WebGPU outperformed WebGL. In most of the tests conducted, substantially and with high statistical significance. In order to better realize the performance benefits of WebGPU in the environment of game engines the implementation could be further expanded on in order to support more advanced games and 3D scenes. Still, the findings of this thesis show WebGPU as a strong contender to WebGL for web rendering. / Bakgrund. För att rendera grafik på webben har WebGL varit det vanliga API:et att använda under åren. En ny teknik, WebGPU, är planerad att släppas 2023 och använder många av de nya renderingstekniker- och funktioner som är vanliga för moderna grafik-API:er, som Vulkan. För närvarande finns mycket begränsad forskning om WebGPU:s rasteriseringsförmåga. I synnerhet finns ingen forskning gällande dess användning som renderingsbackend i spelmotorer.Syfte. Detta arbete syftar till att undersöka prestandaskillnader mellan WebGL och WebGPU. Det görs i sammanhanget av spelmotorn Godot, och den uppmätta prestandan är bildtid på CPU:n respektive GPU:n. Testerna består av sex spel för att analysera mer verkliga sammanhang samt ett antal syntetiska testfall som riktar sig mot specifika delar av renderingspipelinen. För att utföra jämförelserna implementerades en WebGPU rasteriserare med den begränsade förmågan att kunna rendera grundläggande 2D-spel.Metod. Den befintliga WebGL-rasteriseraren i Godot demonterades för att matcha omfattningen av den avsedda funktionaliteten. WebGPU-rasteriseraren implementerades sedan i dess avbild och prestandan för implementationerna mättes i de olika testen. Mätningarna inkluderar bildtiden på GPU och CPU samt några viktiga renderingsfunktioner på CPU-sidan. Slutligen beräknades medelvärden och ett t-test för att validera signifikansen av skillnaden mellan rasteriserarna.Resultat. Resultaten visar att WebGPU presterar bättre än WebGL när den används som renderingsbackend i Godot, både för speltesterna och de syntetiska testerna. Jämförelserna visar tydligt att WebGPU presterar genomsnittligt bättre. Detta gällde även för de 95% lägsta bildtiderna. Resultaten varierade mer för fallen med den genomsnittliga 1% höga bildtiden. Resultaten för de specifika renderingsfunktionerna visade dock att WebGL konsekvent presterade bättre.Slutsatser. Sammanfattningsvis överträffade WebGPU WebGL. I de flesta genomförda tester avsevärt och med hög statistisk signifikans. För att bättre inse prestandafördelarna med WebGPU i spelmotormiljö kan implementeringen utökas ytterligare för att stödja mer avancerade spel och 3D-scener. Ändå visar resultaten i denna avhandling att WebGPU är ett bra alternativ till WebGL för webbrendering.

This thesis presents an exploration into current web browser technologies for graphicsdevelopment, and offers a framework-like solution to integrate WebGL basedgraphical features into any web application based on those findings. It is builtlargely of the 2017 investigative graduate work done at Explizit Solutions (an ITfirm based in Skellefteå, Sweden), where the goal was to discover how 3D graphicstechnology in web browsers could be incorporated into and improve the front-endof their booking system services. A refined version of the solution produced in thatwork is presented, discussed and evaluated in this dissertation along with the investigativework done to produce it.