„Wizualizacja Muzyki W Środowisku
Total Page:16
File Type:pdf, Size:1020Kb
Wydział Informatyki i Zarządzania kierunek studiów: Informatyka specjalność: Internet i technologie mobilne Praca dyplomowa - magisterska Wizualizacja muzyki w środowisku 3D Bartosz Tadeusz Grzyb słowa kluczowe: Wizualizacja muzyki Grafika 3D Technologie webowe Praca na temat analizy porównawczej technologii do tworzenia aplikacja do wizualizacji muzyki w środowisku 3D. Stworzenie prototypu aplikacji i przeprowadzenie badań wydajnościowych prototypu w danych środowiskach testowych. opiekun pracy Dr inż. Marek Kopel . ....................... ....................... dyplomowej Tytuł/stopień naukowy/imię i nazwisko ocena podpis Do celów archiwalnych pracę dyplomową zakwalifikowano do:* a) kategorii A (akta wieczyste) b) kategorii BE 50 (po 50 latach podlegające ekspertyzie) * niepotrzebne skreślić pieczątka wydziałowa Wrocław 2016 1. Spis treści Streszczenie ................................................................................................................................ 3 Wstęp .......................................................................................................................................... 4 1. Rozdział 1 Teoria ................................................................................................................ 5 1.1 Podstawowe pojęcia .................................................................................................... 5 1.1.1 Wizualizacja muzyki – definicja .......................................................................... 5 1.1.2 Czym jest grafika 3D? .......................................................................................... 5 1.2 Technologie ................................................................................................................. 6 1.2.1 WebGL ................................................................................................................. 6 1.2.2 JavaScript ............................................................................................................. 7 1.2.3 HTML5 ............................................................................................................... 11 1.2.4 Flash ................................................................................................................... 13 1.3 Przeglądarki ............................................................................................................... 15 1.3.1 Google Chrome .................................................................................................. 15 1.3.2 Mozilla FireFox .................................................................................................. 16 1.3.3 Opera Browser .................................................................................................... 17 1.3.4 Internet Explorer ................................................................................................ 18 1.4 Aplikacje .................................................................................................................... 21 1.5 Wnioski z części teoretycznej .................................................................................... 36 2. Rozdział 2 Badania ........................................................................................................... 39 2.1. Badania aplikacji ....................................................................................................... 39 2.1.1. Jednostki testujące .............................................................................................. 39 2.1.2. Kryteria oceniania .............................................................................................. 39 2.1.3. Badania ............................................................................................................... 42 2.2. Własna wizualizacja .................................................................................................. 51 2.2.1. Zadanie ............................................................................................................... 51 2.2.2. Opis wizualizacji i kod źródłowy ....................................................................... 51 2.2.3. Ocena wizualizacji i badania .............................................................................. 54 3. Rozdział 3 Analiza Badań ................................................................................................. 56 3.1. Oceny aplikacji .......................................................................................................... 56 3.1.1. Oceny końcowe .................................................................................................. 59 3.2. Analiza wydajności .................................................................................................... 60 3.2.1. Analiza badań jednostki stacjonarnej ................................................................. 61 3.2.2 Analiza porównawcza wyników badań jednostki stacjonarnej i laptopa ........... 64 3.2.3 Analiza badań urządzenia mobilnego................................................................. 68 1 4. Rozdział 4 Wnioski ........................................................................................................... 72 4.1. Część badawcza ......................................................................................................... 72 5. Podsumowanie .................................................................................................................. 74 6. Bibliografia ....................................................................................................................... 76 Załączniki ................................................................................................................................. 77 Kod źródłowy prototypu ............................................................................................... 77 2 Streszczenie Celem niniejszej pracy jest stworzenie analizy porównawczej narzędzi bądź technologii do tworzenia wizualizacji muzycznych w środowisku trójwymiarowym na przeglądarki internetowe. Pierwszą rzeczą wymaganą do poznania tematu tej pracy jest wstęp teoretyczny, który zawiera podstawowe informacje o wybranych technologiach – główne aspekty, krótka historia i omówienie poszczególnych bibliotek. Następnie przedstawiono wybrane aplikacje. Są to aplikacje wykorzystane do przeprowadzenia odpowiednich badań i zostały one wybrane przez autora tak aby jak najlepiej pokazać różne wizualizacje a jednocześnie aby można je było porównać. Ostatnim punktem części teoretycznej są wnioski. Tematem jest analiza porównawcza, także rozsądnym krokiem było przedstawienie wniosków na podstawie informacji teoretycznych. Pozwoli to porównać teorie z praktyką – którą uzyskano po przeprowadzeniu badań i ich analizie. Właśnie badania są następne w kolejności. Przetestowano wybrane aplikacje na różnych przeglądarkach internetowych i platformach: jednostce stacjonarnej o dużej mocny obliczeniowej, jednostce przenośnej o standardowej specyfikacji i na jednostce mobilnej tj. telefonie komórkowej. Zabieg ten pozwoli na pokazanie różnicy która technologia jest lepsza na danej platformie. Następnie autor stworzył prototyp własnej wizualizacji w wybranej technologii. Aplikacje jak i prototyp poddano badaniom po czym zastosowano specjalne kryteria oceniania które pozwoliły na ich porównywanie. Następnie na podstawie badań przeprowadzono analizę wydajności aplikacji dla wybranych kryteriów i przedstawiono ją w formie opisanych wykresów. Kolejnym rozdziałem są wnioski z części badawczej które ukazują również różnice między tym jak powinno być w teorii, a co ukazały badania. Ostatnim punktem jest podsumowanie które recenzuje całą pracę jak również przedstawiono możliwe ścieżki rozwoju tej pracy – które są całkiem rozległe. Podsumowując cel pracy został osiągnięty, przedstawiono analizę porównawczą technologii obecnych na rynku i ukazano dla kogo dana technologia jest najbardziej przydatna. The purpose of this work is to develop a comparative analysis of tools and technologies to create 3D music visualizations in web browsers environment. The first thing required to get to know about the topic of this work is a theoretical introduction, which contains basic information about specific technologies – their main aspects, brief history and an overview of different libraries. Then are presented selected applications. Those applications are used to carry out the relevant tests and have been selected by the author so as to best show various visualizations and at the same time they can be compared. The last point of theoretical part are the conclusions. Subject is comparative analysis, so reasonable step was to present conclusions from theoretical part. This will allow to compare theory with practice – which is obtained after testing and analyzing. So the next step is testing. Selected applications was tested on different browsers and platforms: stationary unit with large computing power, portable unit with standard specification and on mobile unit – Smartphone. That procedure shown difference which technology is better suit on given platform. Then author has created a prototype of visualization based on selected technologies. Applications and prototype were testes and then a special grading criteria was used which allowed to compare them. Next, based on test was created a performance analysis of those applications and presented in from of described graphs. Subsequent chapter are conclusions of the research part and they show the difference