Details

Vozliščno zasnovan spletni urejevalnik za na platnu HTML upodobljene prilagodljive zvočno vodene animacije
ID Vučina, Tim (Author), ID Smrdel, Aleš (Mentor) More about this mentor... This link opens in a new window

.pdfPDF - Presentation file, Download (6,43 MB)
MD5: C3E1DEF333493F7A78E264E9554AFA84

Abstract
Obstoječa orodja za ustvarjanje prilagodljivih zvočno vodenih animacij so pogosto preveč zapletena, lastniška ali pa zahtevajo obsežno znanje programiranja. To magistrsko delo predstavlja VizEngine, odprtokodni spletni urejevalnik, ki je zasnovan kot dostopnejša alternativa na tem področju, s katerim si prizadevamo odpraviti to pomanjkljivost. Pri razvoju smo se odločili za hibridno arhitekturo, ki združuje plastno zasnovan sistem za sestavljanje z deklarativnim, vozliščno zasnovanim animacijskim mehanizmom. Ta pristop uporabnikom omogoča, da vizualno gradijo odzivna obnašanja, tako da neposredno povezujejo izhode zvočne analize z vizualnimi parametri. Prototipni sistem je implementiran s sodobnimi spletnimi tehnologijami, ki vključujejo knjižnico React za uporabniški vmesnik, knjižnico Three.js za 2D/3D upodabljanje (WebGL) in vmesnik Web Audio API za obdelavo zvoka. Evalvacija sistema je vključevala tako oceno izraznih zmožnosti (prek praktičnih kompozicij), kot podrobno, medplatformsko analizo zmogljivosti z uporabo profilirnika mehanizma (ang. in-engine profiler) po meri. Rezultati potrjujejo učinkovitost osrednje arhitekture: pokazali smo, da vozliščno zasnovan mehanizem povzroča minimalno računsko obremenitev, sistem pa dosega visoke povprečne frekvence sličic na različnih strojnih konfiguracijah. Analiza je kot glavna ozka grla, ki omejujejo stabilnost pod visoko obremenitvijo, opredelila specifične stroške upodabljanja komponent in spore za glavno nit (ang. main-thread contention), zlasti med sproščanjem pomnilnika JavaScript. Ključni prispevek dela sta funkcionalni prototip in arhitekturna zasnova, ki dokazujeta izvedljivost uporabe standardnih spletnih tehnologij za razvoj zmogljivih, razširljivih in dostopnih orodij za ustvarjanje zvočno odzivnih vizualizacij.

Language:Slovenian
Keywords:Zvočno vodene animacije, vozliščno zasnovan urejevalnik, React, Three.js, spletna vizualizacija, upodabljanje v realnem času, odprtokodna orodja
Work type:Master's thesis/paper
Typology:2.09 - Master's Thesis
Organization:FRI - Faculty of Computer and Information Science
Year:2025
PID:20.500.12556/RUL-177278 This link opens in a new window
COBISS.SI-ID:263011075 This link opens in a new window
Publication date in RUL:19.12.2025
Views:278
Downloads:136
Metadata:XML DC-XML DC-RDF
:
Copy citation
Share:Bookmark and Share

Secondary language

Language:English
Title:A Node-Based Web Editor for Customizable Audio-Driven Animations Rendered in HTML Canvas
Abstract:
Existing tools for creating customizable audio-driven animations often suffer from complexity, proprietary licensing, or the need for extensive coding skills. This thesis introduces VizEngine, an open-source, web-based editor designed to offer a more accessible alternative for this domain, with the aim of addressing this gap. VizEngine employs a hybrid architecture that integrates a layer-based compositing system with a declarative, node-based animation engine, enabling users to visually construct reactive behaviors by directly connecting audio analysis outputs to visual parameters. The prototype system implements this architecture using modern web technologies, primarily React for the user interface, Three.js for 2D/3D rendering via WebGL, and the Web Audio API for audio processing. The evaluation assesses the system's expressive capabilities through demonstrative compositions and includes a detailed, cross-platform performance analysis using a custom in-engine profiler. The results validate the efficiency of the core architecture, demonstrating that the node engine imposes negligible computational overhead and that the system achieves high average frame rates across different hardware configurations. The analysis also identifies component-specific rendering costs and main-thread contention—primarily during JavaScript garbage collection—as the main factors limiting stability under heavy load. The primary contribution is a functional prototype and an architectural design that demonstrates the feasibility of using standard web technologies to build performant, extensible, and accessible tools for creating audio-reactive visuals.

Keywords:Audio-Driven Animations, Node-Based Editor, React, Three.js, Web-Based Visualization, Real-Time Rendering, Open-Source Tools

Similar documents

Similar works from RUL:
Similar works from other Slovenian collections:

Back