Razvoj spletne aplikacije za upodabljanje gibanja v stvarnem času : diplomsko delo

Kalan, Lovro (author), Jakus, Grega (mentor)

Cilj diplomske naloge je raziskati področje upodabljanja podatkov in računalniške grafike ter s pomočjo pridobljenega znanja razviti spletno aplikacijo za upodabljanje gibanja togih predmetov v stvarnem času. V prvem delu diplomske naloge sta obravnavani področji upodabljanja podatkov in računalniške grafike. Opisana je vloga grafičnih elementov v upodobitvah, predstavljenih je nekaj uveljavljenih vrst upodobitev podatkov, razložen je vpliv interaktivnosti in dinamičnosti upodobitev. V poglavju o računalniški grafiki je analiziran proces ustvarjanja in upodabljanja navideznega trirazsežnega prostora. Opisana je predstavitev trirazsežnih predmetov, vpliv osvetljevanja na odboje svetlobe od površin v prostoru, projekcija trirazsežnega prostora v dvorazsežno sliko in ustvarjanje animirane grafike. Drugi del diplomske naloge zajema razvoj spletne aplikacije za prikazovanje poljubnega števila dvo- in trirazsežnih upodobitev podatkov. Najprej je opisan razvoj uporabniškega vmesnika z uporabo JavaScript ogrodja Vue.js. Sledi implementacija pretoka podatkov od strežnika do aplikacije z uporabo protokola WebSocket. Nato je predstavljen razvoj modula za centralizirano upravljanje stanja aplikacije oziroma spremenljivk, s katerimi je nadzorovano delovanje aplikacije ob dogodkih, ki vplivajo ne njeno stanje, ne glede na njihov vir (izvirajo lahko iz novih podatkov v pretoku ali pa jih proži uporabniška interakcija). Na koncu s primeroma ponazorimo še razvoj trirazsežne upodobitve podatkov gibanja teniškega loparja v stvarnem času s pomočjo knjižnice Three.js in črtnega diagrama podatkov o hitrosti gibanja teniške žogice s knjižnico Plotly.js.

• Language: Slovenian
• Keywords: upodabljanje, spletna aplikacija, računalniška grafika, pretok podatkov, Vue.js, Three.js
• Work type: Undergraduate thesis
• Typology: 2.11 - Undergraduate Thesis
• Organization: FE - Faculty of Electrical Engineering
• Place of publishing: Ljubljana
• Publisher: [L. Kalan]
• Year: 2021
• Number of pages: XVI, 56 str.
• PID: 20.500.12556/RUL-128355
• UDC: 004.9(043.2)
• COBISS.SI-ID: 69835779
• Publication date in RUL: 09.07.2021

KALAN, Lovro, 2021, Razvoj spletne aplikacije za upodabljanje gibanja v stvarnem času : diplomsko delo [online]. Bachelor’s thesis. Ljubljana : L. Kalan. [Accessed 28 March 2025]. Retrieved from: https://repozitorij.uni-lj.si/IzpisGradiva.php?lang=eng&id=128355

Secondary language

• Language: English
• Title: Development of a web application for real-time motion visualization : univerzitetni študijski program prve stopnje Multimedija

Abstract

The goal of the thesis was to research the field of data visualization and develop a web application that visualizes the movement of rigid objects from data received in real time. The first part of the thesis examines the fields of data visualization and computer graphics. This part explains the role of graphic elements, interactivity and animations in visualizations, and presents some established types of data visualizations. The chapter of computer graphics analyzes the process of building a virtual three dimensional space and rendering it to a two dimensional projection. It explains the presentation of virtual three dimensional objects, influences of light on the surfaces of objects, projections of three dimensional spaces to two dimensional images and creation of animated graphics. The second part of the thesis describes the development of a web application which enables users to create multiple two and three dimensional visualizations from a real time stream of data. Firstly, the chapter describes the development of the graphical user interface with the JavaScript framework Vue.js. Secondly, it presents the implementation of a real time data stream from a server to the visualization application using the WebSocket protocol. Next described is the centralized state management system of the developed application, which is used to control the application from a single point, no matter where the source of a state mutating event occurs (it can be caused either by new data in the data stream or by user interaction). Finally, we use code examples to explain the development of a tennis racket movement visualization using a JavaScript library Three.js, and development of a dynamic line diagram which visualizes the speed of a moving tennis ball using the external library Plotly.js.

• Keywords: visualization, web application, computer graphics, data stream, Vue.js, Three.js