Șef lucrări dr. Ing. Ionuț Cristian Resceanu Iulie, 2017 CRAIOVA APLICAȚIE MUZEU IN REALITATE AUGMENTATĂ Anghel Alexandru Bogdan COORDONATOR… [310197]

PROIECT DE DIPLOMĂ

ANGHEL ALEXANDRU

COORDONATOR ȘTIINȚIFIC

Șef lucrări dr. Ing. Ionuț Cristian Resceanu

Iulie, 2017

CRAIOVA

APLICAȚIE MUZEU IN REALITATE AUGMENTATĂ

Anghel Alexandru Bogdan

COORDONATOR ȘTIINȚIFIC

Șef lucrări dr. Ing. Ionuț Cristian Resceanu

Iulie, 2017

CRAIOVA

„[anonimizat]. [anonimizat]”

[anonimizat]: [anonimizat], Calculatoare și Electronică a [anonimizat], [anonimizat]:

cu titlul APLICAȚIE MUZEU IN REALITATE AUGMENTATĂ

coordonată de Șef lucrări dr. Ing. Ionuț Cristian Resceanu

prezentată în sesiunea Iulie 2017

[anonimizat]:

reproducerea exactă a [anonimizat]-o [anonimizat]-o [anonimizat],

[anonimizat], [anonimizat] a unor aplicații realizate de alți autori fără menționarea corectă a [anonimizat] a [anonimizat].

Pentru evitarea acestor situații neplăcute se recomandă:

plasarea între ghilimele a citatelor directe și indicarea referinței într-o [anonimizat] a [anonimizat] a sursei originale de la care s-a [anonimizat] s-[anonimizat], figuri, imagini, statistici, [anonimizat], a căror paternitate este unanim cunoscută și acceptată.

Data, Semnătura candidat: [anonimizat],

PROIECTUL DE DIPLOMĂ

REFERATUL CONDUCĂTORULUI ȘTIINȚIFIC

În urma analizei lucrării candidat: [anonimizat]:

[anonimizat]:

Data, [anonimizat] a oferi vizitatorilor Muzeului de Artă Craiova o [anonimizat] a se bucura de facilitățile și exponatele puse la dispoziția vizitatorilor de către muzeu. [anonimizat] a oferii atât detalii despre exponate cât și posibilitatea vizualizării unor monumente 3D direct pe dispozitivul mobil. Am pus accentul atât pe funcționalitate și compatibilitate cât și pe estetica aplicației pentru a oferi o experiență vizuală de înaltă calitate.Toate elementele grafice au fost realizate integral in Photoshop. Aplicatia a [anonimizat] C# am folosit MonoDevelop ce vine integrat in Unity.

Aplicația cuprinde:

– 6 scene principale:

StartAplicație

Meniu

Contact

SelectareLimba

Camera AR_RO

SelectareModel

-5 scene secundare :

3D_Castel

3D_Stonehenge

3D_Templu

Camera AR_IT

Camera AR_FR

!!! O scenă reprezintă locul în care se pozitionează elementele(imagini,modele 3d, scripturi etc ) folosite de o aplicație sau un joc. O aplicație complexă poate să cuprindă zeci astfel de scene !!!

Scena StartAplicație

Este scena cu care pornește aplicația. Ea cuprinde o imagine de întâmpinare cu numele muzeului care apare si dispare la interval de 2.5 secunde.

Scena Meniu

Reprezintă scena centrală a aplicației. Din această putem să ajungem în 3 părți diferite ale aplicației : CameraAR , Contact și Muzeul Virtual.

Scena Contact

Această scenă cuprinde diferite detalii despre personalul Muzeului de Artă Craiova precum și 3 butoane de tip “Social Media” către Facebook,Instagram și Wikipedia. Mai regăsim și un buton ce cuprinde coordonatele GPS către locația muzeului.

Scena SelectareLimba

În această scenă ajungem prin intermediului butonului “Scanează” din meniul principal. Aici putem să selectăm limba în care vrem să folosim aplicația. ( Romana, Italiană , Franceză )

Scena Camera AR

Această scenă cuprinde 3 elemente esențiale : camera de realitate augmentată ( care o să caute imaginea definită ) , imaginea ținta ( este imaginea de referință a camerei ) și elementul grafic ( este modelul/poza care o să fie afișată deasupra imaginii țintă ) . De asemenea această scenă o să cuprindă trei variante diferite , în funcție de limba selectată.

Scena SelectareModel

Reprezintă scena ce ne oferă posibilitatea alegerii unuia dintre cele trei modele 3D pe care să le vizualizăm cu ajutorul camerei AR. (3D_Stonehenge, 3D_Castel , 3D_Templu ). Scena 3D_Stonehenge cuprinde de asemenea si o functie de restaurare al monumentului prin simpla apasare a butonului aflat in partea stanga a ecranului

Primul capitol cuprinde la rândul lui trei subcapitole: primul capitol cuprinde o scurtă prezentare a limbajului c# , precum și câteva avantaje ale acestuia față de alte limbaje de programare. Mai regăsim aici și detalii despre tipurile de date întâlnite în C#, structura unui program C#, și sintaxa limbajului. Ultimul capitol al lucrării descrie pe scurt programul Photoshop și câteva unelte și pluginuri disponibile.

Cel de-al doilea capitol al lucrării cuprinde procesul de dezvoltare al aplicației. Aici putem observa cum sunt create elementele grafice în Photoshop și apoi importate în Unity precum și felul cum este aplicația realizată și configurata precum și setările aplicației și construirea APK-ului.

În capitolul trei este prezentată aplicația, descrierea formelor ce o alcătuiesc cât și modul de funcționare al acestora. Tot aici am prezentat pentru fiecare fereastră în parte, meniurile și submeniurile specifice fiecăreia și modul în care ultilizatorul poate interacționa cu aplicația.Putem de asemenea să observăm și rezultatele obținute în urma unei scanări reușite.

Lucrarea se încheie prin prezentarea concluziilor care reiau o serie de idei din cuprinsul acesteia, concluzii care sunt confirmarea rezumatului și a temei tratate în lucrare.

Termenii cheie: C#,Unity,Photoshop,Android,MonoDevelop,Vuforia

MULȚUMIRI

Vreau să îi mulțumesc în primul rând domnului profesor Resceanu Ionuț pentru cunoștințele de C# dobândite în urma cursurilor sale precum și pentru sfaturile și ideile cu privire la aplicație.

De asemenea vreau să-i mulțumesc și domnului profesor Dan Andrițoiu pentru că mi-a oferit ideea de a căuta detalii despre cum se lucrează folosind principiul realității augmentate.

În ultimul rând vreau să le mulțumesc colegilor Oprean Alexandru și Răducanu Lucian pentru suportul și sfaturile oferite cu privire la Unity.

PROLOG

CUPRINSUL

Capitolul I 3

1.1 Scopul 3

1.2 Motivația 3

Capitolul II 4

2.1 Descrierea limbajului C# 4

2.1.1 Avantajele limbajului de programare C# fata de limbajul Java 4

2.1.2 Avantajele limbajului de programare C# fata de limbajul C++ 5

2.1.3 Structura unui program C# 5

2.1.4 Tipuri de date in C# 6

2.2 Descrierea motorului grafic Unity 7

2.2.1 Motorul grafic 8

2.2.2 Exemple de motoare grafice 9

2.2.3 Midleware 9

2.2.4 Vuforia 10

2.3 Descrierea Photoshop-ului 11

2.3.1 Plugin-uri/Addon-uri 12

2.3.2 Instrumente Photoshop 15

Capitolul III 18

3.1 Schema aplicației 18

3.2 Dezvoltarea Grafica 20

3.2.1 Iconița Aplicației 20

3.2.2 Pagina de contact 21

3.2.3 Pagina meniului principal 22

3.2.4 Pagina de selectare a modelului 3D 24

3.2.5 Butoanele de actiune 25

3.3 Importarea fisierelor grafice si a pachetului de date vuforia 26

3.4 Configurarea scenelor 28

3.4.1 Meniul principal 28

3.4.2 Pagina de contact 31

3.4.3 CameraAR 33

3.4.4 Scena model 3D 38

3.4.5 Componentele audio 40

3.4.6 Imaginea de intro 43

3.4.7 Setarea ancorelor 44

3.4.8 Construirea APK-ului 45

Capitolul IV 47

4.1 Informații generale 47

4.2 Startul aplicației 47

4.3 Meniul principal 48

4.4 Meniul de selectare a limbii 48

4.5 CameraAR – Descriere tablou 49

4.6 Meniul de contact 52

4.7 Meniul de selectare a modelului 3D 53

4.8 CameraAR – Muzeul Virtual 53

5 Concluzii 57

6 Bibliografie 58

7 Referințe web 59

A. Codul sursă 60

B. CD / DVD 67

Index 68

LISTA FIGURILOR

Figura 1 – Cuvinte cheie regasite in limbajul C# 6

Figura 2 – Logo-ul Unity 7

Figure 3 – Fereastra de lucru Unity 7

Figura 4 – Logo-ul Vuforia 10

Figura 5 – Logo-ul Photoshop 11

Figura 6 – AlphaPlugins Engraver III 12

Figura 7 – Alien Skin Eye Candy 5 : Impact 13

Figure 8 – Auto FX Gen1 Plugins 14

Figura 9 – Bara de instrumente 15

Figura 10 – Intstrumentul de selecție 16

Figura 11 – Instrumentul de forme 16

Figura 12 – Instrumentul de feliere 17

Figura 13 – Instrumentul de taiere 17

Figura 14 – Schema meniului aplicaței 18

Figura 15 – Icon-ul aplicației 20

Figura 16 – Layere-le Iconitei 21

Figura 17 – Pagina de contact 21

Figura 18 – Layere-le paginii de contact 22

Figura 19 – Meniul principal 22

Figura 20 – Layere-le paginii principale 23

Figura 21 – Pagina de selectare a modelului 3D 24

Figura 22 – Layer-ele paginii de selectare a modelului 3D 25

Figure 23 – Butonul de back 25

Figure 24 – Butonul de blit 25

Figure 25 – Butonul de autofocus 25

Figura 26 – Setari importare 26

Figura 27 – Crearea bazei de date 27

Figura 28 – Continutul bazei de date 27

Figura 29 – Canvasul (inainte) 28

Figura 30 – Canvasul(dupa) 29

Figura 31 – Atasarea scriptului 30

Figura 32 – Selectarea clasei și a funcției 30

Figura 33 – Selectarea clasei și a celor 4 funcții 32

Figura 34 – Configurare Vuforia si activare baza de date 34

Figura 35 – Imaginea țintă configurată 34

Figura 36 – Imaginea tinta si descrierea tabloului 35

Figura 37 – Imagine instrucțiuni 38

Figura 38 – Configurare scena model 3D + buton restaurare 39

Figura 39 – Configurarea sunet butoane 41

Figura 40 – Configurare sunet detectie tinta 42

Figura 41 – Ancorele setate pe butonul de autofocus 44

Figura 42 – Fereastra de construire 45

Figura 43 – Setari Resolution and Presentation 46

Figura 44 – Setari Icon 46

Figura 45 – Setari Identification 46

Figura 46 – Imaginea de intâmpinare 47

Figura 47 – Meniul principal 48

Figura 48 – Meniul de selectare a limbii 49

Figura 49 – Imagine informativă 49

Figura 50 – Tinta tablou 3 50

Figura 51- Tinta tablou 2 50

Figura 52 – Tinta abloul 1 50

Figura 53 – Scanarea tabloului 1 in limba romană 50

Figura 54 – Scanarea tabloului 2 in limba italiană 51

Figura 55 – Scanarea tabloului 3 in limba franceză 51

Figura 56 – Meniul de contact 52

Figura 57 – Acțiune buton e-mail 52

Figura 58 – Acțiune buton apelare 52

Figura 59 – Meniul de selectare a modelului 3D 53

Figura 60 – Model Stonehenge original 54

Figura 61 – Model Stonehenge restaurat 54

Figura 62 – Model Templu 55

Figura 63 – Model Castel 55

Figura 64 – Imaginea țintă pentru modelele 3D 56

Capitolul I

~ Introducerea ~

Scopul

Scopul aplicației este de a ajuta muzeele să se adapteze la era digitală păstrându-și astfel patrimoniul de valori culturale dar în același adaptând noi tehnici de atracție a vizitatorilor și de educare a acestora cu ajutorul dispozitivului mobil.

Motivația

Totul a început de la o mică căutare pe google.com. După ce am însușit câteva cunoștințe despre realitatea augmentată și cum funcționează mi-am propus să realizez aceasta aplicație. Deoarece nu am avut experiența în platformă Unity și programarea ce ține de Unity, mi-am dat seama că este o foarte bună oportunitate de a-mi însuși noi cunoștințe ce sigur îmi vor fi de folos pe viitor. Astfel, patru luni mai târziu, aplicația mea este 100% funcțională iar eu am dobândit o cantitate semnificativă de cunoștințe .

Capitolul II

~ C#,Unity,Photoshop ~

Descrierea limbajului C#

Limbajul de programare C# este un limbaj de tip POO ( programare orientată pe obiecte ) simplu dar modern, el fiind conceptul de compania Microsoft in anii 90' . Limbajul C# a fost derivat din limbajul C++. Acesta a fost realizat cu scopul de a rivaliza cu limbajul Java.

Modernitatea limbajului C# cuprinde un suport de tip "Built In" care ajută la transformarea componetelor in serviciu web, astfel accesul realizandu-se mai ușor .

Simplitatea limbajului C# redată de absența pointerilor , de managementul automat al memoriei realizat de catre integrarea pe platforma .NET.

Portabilitatea: mai mult de 2 miliarde de dispozitive ruleaza cod C# , printre acestea se numara si dispozitive ce ruleaza soft precum iOS,Android,Windows,Linux. C# este de asemenea un limbaj de programare mobil , ce se gaseste in diferite domenii : telefonia mobila, Servere si Desktopuri, Embeded.

În cadrul unei aplicații Windows, formularele sunt elementele de bază ale interfeței cu utilizatorul. În C# formularele sunt complet orientate pe obiecte, ele reprezentând de fapt clase.

Avantajele limbajului de programare C# fata de limbajul Java

Limbajul C# prezintă în componența sa o serie de avantaje față de limbajul Java:

C# are constructori proprii care sunt destul de ușor de folosit ( Events, Propierties );

Java 7 v-a suporta expresia “using”;

Vine deja integrat în Windows;

Variabilele sunt dinamice;

Avantajele limbajului de programare C# fata de limbajul C++

Limbajul C# prezintă în componența sa o serie de avantaje față de limbajul C++:

Prezintă o bibliotecă standard impresionantă cu lucruri bine realizate și ușor de utilizat;

Clasele și metodele pot fi setate să fie interne în ansamblul în care sunt declarate;

Limbajul C# permite folosirea blocurilor de cod cât și native

Permite tratarea semnăturilor de clasă-metode ca funcții libere și creează astfel relații mai dinamice și flexibile între clase;

Codul C# este compilat în Intermediate Language in comparatie cu C++ care este compilat in asembly

Structura unui program C#

Cel mai cunoscut editor de cod C# il constituie Visual Studio. Acesta ofera un set larg de obiecte si instrumente folosite la crearea ,editarea si repararea codului. Insa programul folosit personal o sa fie MonoDevelop deoarece este integrat in platforma Unity.

Exemplu de program C#:

1 using System;

2

3 {

4 class Salut

5 {

6 static void Main()

7 {

8 Console.WriteLine (“Hello World!”);

9 }

10 }

11 }

Descrierea programului:

Linia 1: Este o librarie care specifică faptul că se vor folosi clase incluse în spațiul de nume System. În acest caz se va folosi clasa “Console”.

Linia 4: clasa programului C#

Linia 6: metoda Main , „punctul de intrare” în program.

Linia 8: avem clasă Console , care este folosită în cazul operațiilor de tip intrare/ieșire.Tot aici se observa metoda WriteLine care are ca scop afișarea unui mesaj pe ecran.

Tipuri de date in C#

In cadrul limbajului C# intalnim mai multe tipuri de date:

Date de tip valoare

Simple: int, float, char;

Structură : struct;

Enumerare: enum;

Date de tip referință:

Clasă: class;

Interfață: interface;

Delegate: delegate;

Tablou: array;

Descrierea motorului grafic Unity

Unity este un motor grafic de tip multi-platform dezvoltat de către compania Unity Technologies. Acesta este folosit în crearea și dezvoltarea de jocuri video, simulări pentru calculatoarea, console de jocuri și device-uri mobile. Acesta a fost prima dată anunțat în 2005 doar pentru platformă OS X, ajungând mai târziu să fie exportat pe 27 de platforme diferite.

Printre limbajele de programare folosite în dezvoltarea sa se enumeră: C , C++ și C#. De la data sa de lansare, 6 variante ale aplicației au fost lansate publicului, aceste variante sunt enumerate de la 1-6, ultima fiind in stadiul beta.

Figure 3 – Fereastra de lucru Unity

Motorul grafic

Un motor grafic este un sistem conceput pentru crearea și dezvoltarea de jocuri video. Pe piață se regăsesc numeroase astfel de motoare grafice. Acestea sunt concepute pentru a funcționa pe console de jocuri video, calculatoare personale dar și pe dispozitivele mobile.

Componentele unui motor grafic sunt urmatoarele:

Motor de randare ( 2D sau 3D );

Motor de detecție al coliziunii ( motor de fizică);

Motor audio ;

Motor de inteligență artificială;

Motor de randare

În loc să fie programate și compilate pentru a fi executate direct pe CPU sau GPU, motoarele de randare cel mai adesea sunt construite pe una sau mai multe interfețe de programare a aplicațiilor (API), cum ar fi Direct3D sau OpenGL, care oferă o abstractizare software a unității de procesare grafică GPU).

Motoarele de jocuri pot fi scrise în orice limbaj de programare, cum ar fi C ++, C sau Java, deși fiecare limbaj este diferit din punct de vedere structural și poate oferi diferite nivele de acces la anumite funcții.

Motor de detecție al coliziunii

Motorul fizic(de detecție al coliziunii) este responsabil pentru simularea legilor fizicii în mod realist în cadrul aplicației.Acesta este folosit pentru a calcula si simula interactiunea dintre doua corpuri din cadrul aplicatiei.

Motor audio

Motorul audio este componenta ce are ca rol rezolvarea algoritmilor ce țin de sunet. Procesarea calculelor se poate face atât pe un CPU cât și pe un ASIC dedicat.

Motor de inteligență artificială

Motorul de inteligență artificială este realizată de programatori cu cunoștințe speciale de programare. Ei se ocupa cu programarea elementelor ce interacționează cu diferite surse, și luarea de decizii pe baza unor algoritmi specifici.

Exemple de motoare grafice

Motoarele grafice au început să apară pe piață la începutul anilor 80. Acestea se grupează pe diferite categorii, în funcție de funcționalitate, grafică, implementări.

Cele mai populare exemple in acest sens sunt:

Unity Engine (ex: Gears of War, Batman: Arkham Asylum, Mass Effect )

Unreal Engine (ex: Lara Croft: Relic run, Hitman: Sniper, Unreal Tournament )

CryEngine 3 (ex: Crysis , Far Cry , Sniper: Ghost, Civilization Online)

Hero Engine (ex: Star Wars: The Old Republic )

Rage Engine (ex: Grand Theft Auto: Vice City )

Midleware

În sensul mai larg al termenului, motoarele de jocuri pot fi descrise ca middleware. În contextul jocurilor video, totuși, termenul "middleware" este adesea folosit pentru a se referi la subsistemele de funcționalitate ale unui motor de joc. Unele middleware pentru jocuri au un singur lucru, dar o fac mai convingător sau mai eficient decât middleware-ul de uz general. Spre exemplu, pentru a crea copaci cât mai realiști într-un anumit joc/aplicație, se poate folosi SpeedTree, sau putem folosi ForkParticle pentru o mai bună simulare în timp real a particulelor.

Pe măsură ce tehnologia motorului grafic se maturizează și devine mai ușor de utilizat, domeniul de aplicarea al motoarelor de jocuri a fost extinsă. Acestea sunt acum folosite pentru „jocuri” serioase: aplicații de vizualizare, instruire, medicală și simulare militară, cu CryEngine fiind un exemplu . Pentru a facilita această accesibilitate, noile platforme hardware sunt în prezent vizate de motoarele de jocuri, inclusiv telefoanele mobile (de exemplu, telefoanele Android,Windows, iPhone) și browserele web (de exemplu, Shockwave, Flash).

Vuforia

Vuforia este un kit de dezvoltare software pentru realitate augmentat (SDK) destinat dispozitivelor mobile care permite crearea de aplicații de tip Augmented Reality.Utilizează tehnologia Computer Vision pentru recunoașterea și urmărirea imaginilor plane (Imagine țintă) și obiecte 3D simple, cum ar fi cutii, în timp real. Această capacitate de înregistrare a imaginilor permite dezvoltatorilor să poziționeze și să orienteze obiecte virtuale, cum ar fi modele 3D și alte suporturi media, în legătură cu imaginile din lumea reală. Obiectul virtual urmărește apoi poziția și orientarea imaginii în timp real, astfel încât perspectiva spectatorului asupra obiectului să corespundă perspectivelor acestora asupra imaginii țintă astfel încât să creeze iluzia că obiectul virtual face parte din scena lumii reale.

SDK-ul Vuforia suportă o varietate de tipuri de referinte 2D și 3D, printre care se numără "Target-uri de imagine fără marcatori", configurații 3D de tip țintă multipla și o formă de marker Fiduciar adresabil , cunoscut sub denumirea de Marker de cadre. Caracteristicile suplimentare ale SDK includ detectarea ocluziei localizată folosind "Butoane virtuale", selectarea țintă a imaginii în timpul rulării și capacitatea de a crea și reconfigura seturile țintă programabil în timpul rulării.

SDK-ul suportă atât dezvoltarea nativă pentru iOS și Android, cât și dezvoltarea de aplicații AR în Unity, care sunt ușor de portabil la ambele platforme. Aplicațiile AR dezvoltate utilizând Vuforia sunt, prin urmare, compatibile cu o gamă largă de dispozitive mobile, inclusiv telefoanele și tabletele iPhone, iPad și Android, care rulează Android OS versiunea 2.2 sau o versiune superioară și un procesor ARMv6 sau v7 cu capabilități de procesare FPU (Floating Point Unit).

Descrierea Photoshop-ului

Adobe Photoshop este un software realizat de către frații Thomas și John Knoll în februarie 1990 cu scopul de editare și corectare a imaginilor digitale pe computer. Acest software a fost produs și distribuit de compania Adobe Systems și este categorizat ca fiind un program destinat profesioniștilor.

Schema de numire a lui Photoshop a fost inițial bazată pe numărul versiunii. Cu toate acestea, în octombrie 2002, după introducerea mărcii Creative Suite, fiecare nouă versiune Photoshop a fost desemnată cu "CS" plus un număr; Cea de-a opta versiune majoră a Photoshop-ului a fost Photoshop CS, iar noua versiune majoră a fost Photoshop CS2. Photoshop CS3 prin CS6 au fost de asemenea distribuite în două ediții diferite: Standard și Extended. În iunie 2013, odată cu introducerea branding-ului Creative Cloud, schema de licențiere a Photoshop-ului a fost schimbată cu cea a software-ului ca model de închiriere de servicii, iar sufixele "CS" au fost înlocuite cu "CC". Din punct de vedere istoric, Photoshop a fost asociat cu programe suplimentare precum Adobe ImageReady, Adobe Fireworks și Adobe Camera RAW.

Alături de Photoshop, Adobe a dezvoltat și publicat și Photoshop Elements, Photoshop Lightroom, Photoshop Express și Photoshop Touch. În mod colectiv, acestea sunt denumite "Familia Adobe Photoshop". În prezent, este un software licențiat.

Plugin-uri/Addon-uri

Plugin-urile Photoshop sunt programe adiționale menite să ofere efecte suplimentare de imagine sau să îndeplinească sarcini care sunt imposibile sau greu de îndeplinit utilizând numai Adobe Photoshop. Pluginurile pot fi deschise din Photoshop și din mai multe programe de editare a imaginilor (compatibile cu specificațiile Adobe) și se comportă ca niște mini-editoare care modifică imaginile.

Cateva exemple cunoscute de plugin-uri:

AlphaPlugins Engraver III

AlphaPlugins pluginul EngraverIII pentru Photoshop CS2-CC2017 vă permite să transformați orice imagine într-o impresionantă gravură în stil vechi cu doar câteva clicuri de mouse.

Alien Skin Eye Candy 5 : Impact

Eye Candy 5: Impact este o colecție de zece filtre Photoshop care creează efecte cum ar fi crom, metal periat, sticlă, teșituri, umbre și reflexii. De exemplu, Metal Brushed este destinat să simuleze suprafețe metalice texturate, cum ar fi aluminiul periat și alamatul lustruit; Super Star generează o varietate de forme, inclusiv stele, flori și unelte; Iar de fundal proiectează un fascicul de lumină și efecte de lumină reflectoare din spatele unei selecții. Majoritatea efectelor pot fi aplicate unui strat separat, oferind utilizatorilor controlul asupra efectului într-o manieră nedistructivă în cadrul aplicației gazdă.

Auto FX Gen1 Plugins

Pluginurile Photoshop de la Software-ul Auto FX exista încă din anii 94' și oferă artistului digital o multitudine de instrumente creative de îmbunătățire a imaginii vizuale. De la efectele atmosferice realiste cum ar fi fulgerul, zăpada, ploaia, ceață și ceața până la efecte creative, care transformă fotografiile în puzzle-uri, creează iluminare și umbre, reglează focalizarea sau adaugă granițe stilizate la sute de fundaluri și texturi noi de înaltă rezoluție. Presetările incluse facilitează aplicarea setărilor de efecte gata făcute cu un singur click.

.

Instrumente Photoshop

La pornirea Photoshop-ului, în partea stângă a ecranului apare o bară laterală cu o varietate de instrumente cu mai multe funcții de editare a imaginilor. Aceste instrumente se încadrează în mod obișnuit în categoriile de desen, pictură, măsurare și navigare, selecție, text, retușarea. Unele instrumente conțin un triunghi mic în colțul din dreapta jos al pictogramei de instrumente. Acestea pot fi extinse pentru a descoperi instrumente similare. În timp ce versiunile mai noi ale Photoshop sunt actualizate pentru a include noi instrumente și funcții, mai multe instrumente recurente care există în cele mai multe versiuni sunt prezentate mai jos:

Instrumentul de selecție (selection tool)

Instrumentele de selecție sunt utilizate pentru a selecta în întregime sau parțial orice parte a unei imagini pentru a efectua operații de tăiere, copiere, editare sau retușare.

Instrumentul de forme (shape tool)

Photoshop oferă o gamă de instrumente de formă, inclusiv dreptunghiuri, dreptunghiuri rotunjite, elipse, poligoane și linii. Aceste forme pot fi manipulate de instrumentul stilou, instrument de selecție directă etc. pentru a face grafică vectorială.

Instrumentul de feliere (slice tool)

Uneltele de tip feliere și feliere selectivă , cum ar fi instrumentul taiere, sunt utilizate pentru izolarea unor părți ale imaginilor. Instrumentul de slice poate fi folosit pentru a împărți o imagine în diferite secțiuni, iar aceste părți separate pot fi folosite că piese ale unui design al paginii web odată ce sunt aplicate HTML și CSS. Instrumentul de tăiere selectivă permite secțiunilor tăiate din imagine să fie reglate și deplasate.

Instrumentul de taiere (crop tool)

Instrumentul de taiere poate fi utilizat pentru a selecta o anumită zonă a imaginii și pentru a elimina porțiunile din afara secțiunii alese. Acest instrument ajută la crearea unui punct de focalizare asupra unei imagini și a spațiului inutil sau în exces. Decuparea permite îmbunătățirea compoziției unei fotografii în timp ce reduce dimensiunea fișierului. Instrumentul "taiere" se află în paleta de unelte, care se află în partea dreaptă a documentului. Plasând cursorul peste imagine, utilizatorul poate glisa cursorul în zona dorită. Odată ce tasta Enter este apăsată, zona din afara dreptunghiului va fi tăiată.

Capitolul III

~ Dezvoltarea Aplicatiei ~

Schema aplicației

Primul pas al dezvoltarii aplicatiei este de generare a schemei meniului pentru a observa totalitatea scenelor necesare pentru intregul continut .

Putem observa din schema de mai sus faptul că aplicația o să cuprindă următoarele scene:

– 6 scene principale:

StartAplicație

Meniu

Contact

SelectareLimba

Camera AR_RO

SelectareModel

– 5 scene secundare :

3D_Castel

3D_Stonehenge

3D_Templu

Camera AR_It

Camera AR_Fr

Scena StartAplicație

Este scena cu care pornește aplicația. Ea cuprinde o imagine de întâmpinare cu numele muzeului care apare si dispare la interval de 2.5 secunde.

Scena Meniu

Reprezintă scena centrală a aplicației. Din această putem să ajungem în 3 părți diferite ale aplicației : CameraAR , Contact și Muzeul Virtual.

Scena Contact

Această scenă cuprinde diferite detalii despre personalul Muzeului de Artă Craiova precum și 3 butoane de tip “Social Media” către Facebook,Instagram și Wikipedia. Mai regăsim și un buton ce cuprinde coordonatele GPS către locația muzeului.

Scena SelectareLimba

În această scenă ajungem prin intermediului butonului “Scanează” din meniul principal. Aici putem să selectăm limba în care vrem să folosim aplicația. ( Romana, Italiană , Franceză )

Scena Camera AR

Această scenă cuprinde 3 elemente esențiale : camera de realitate augmentată ( care o să caute imaginea definită ) , imaginea ținta ( este imaginea de referință a camerei ) și elementul grafic ( este modelul/poza care o să fie afișată deasupra imaginii țintă ) . De asemenea această scenă o să cuprindă trei variante diferite , în funcție de limba selectată.

Scena SelectareModel

Reprezintă scena ce ne oferă posibilitatea alegerii unuia dintre cele trei modele 3D pe care să le vizualizăm cu ajutorul camerei AR. (3D_Stonehenge, 3D_Castel , 3D_Templu ). Scena 3D_Stonehenge cuprinde de asemenea si o functie de restaurare al monumentului prin simpla apasare a butonului aflat in partea stanga a ecranului

Dezvoltarea Grafica

Aceasta este etapa în care se crează elementele grafice ale aplicației. Acestea diferă de la o scenă la alta deoarece este necesar ca fiecare scenă să aibă un stil propriu în funcție de scopul si funcționalitatea ei.

Iconița Aplicației

Aceasta a fost realizata folosind urmatoarele componente( layere ):

2 componente de tip text: “AR” si “guide”

Optiuni folosite: TextTool, Text Warp , Transform si Blending Options > ColorOverlay

4 componente de tip layer folosite la design-ul interior al logo-ului

Optiuni folosite: PenTool, ShapeTool>Circle si Blending Options > ColorOverlay

3 componente de tip layer folosite la design-ul exterior al logo-ului

Optiuni folosite: ShapeTool>Rectangle si Blending Options > ColorOverlay

Figura 16 – Layere-le Iconitei

Pagina de contact

Figura 17 – Pagina de contact

Aceasta a fost realizată folosind următoarele componente(layere):

18 componente de tip Text (14 în partea stângă și 4 în partea dreaptă);

Opțiuni folosite: TextTool , Transform și Blending Options > ColorOverlay

2 componente de tip layer folosite la design-ul fundalului;

Opțiuni folosite: ShapeTool>Rectangle și Blending Options > ColorOverlay

13 componente de tip linie pentru a crea diferitele delimitări ale paginii;

Opțiuni folosite: ShapeTool>Line și Blending Options > ColorOverlay

Figura 18 – Layere-le paginii de contact

Pagina meniului principal

Aceasta a fost realizată folosind următoarele componente(layere):

5 componente de tip Text (2 pentru titlu si 3 pentru butoane);

Opțiuni folosite: TextTool , Transform și Blending Options > ColorOverlay, BevelAndEmboss, Stroke , DropShadow, GradientOverlay;

3 componente de tip layer folosite la design-ul fundalului;

Opțiuni folosite: Layer Contrast\Luminozitate

2 componente de tip shape pentru a crea panoul din jurul titlului

Opțiuni folosite: ShapeTool>Line și Blending Options > ColorOverlay

3 componente de tip shape pentru a crea butoanele

Opțiuni folosite: ShapeTool>Rectangle, Blending Options > ColorOverlay, GradientOverlay, Stroke, BevelAndEmboss

Butoanele au fost exportate separat pentru a putea fi folosite in mod independent in Unity !

Figura 20 – Layere-le paginii principale

Pagina de selectare a modelului 3D

Figura 21 – Pagina de selectare a modelului 3D

Aceasta a fost realizată folosind următoarele componente(layere):

4 componente de tip Text (1 pentru titlu si 3 pentru butoane);

Opțiuni folosite: TextTool , Transform și Blending Options > ColorOverlay, BevelAndEmboss, Stroke , DropShadow, GradientOverlay;

1 componente de tip layer folosite la design-ul fundalului;

Opțiuni folosite: Layer Contrast\Luminozitate

3 componente de tip shape pentru a crea liniile dintre imagine si buton

Opțiuni folosite: ShapeTool>Line și Blending Options > ColorOverlay, Stroke

3 componente de tip shape pentru a crea butoanele

Opțiuni folosite: ShapeTool>Rectangle, Blending Options > ColorOverlay, GradientOverlay, Stroke, BevelAndEmboss

Figura 22 – Layer-ele paginii de selectare a modelului 3D

Butoanele de actiune

Aceasta a fost realizată folosind următoarele componente(layere):

3componente de tip shape pentru butoane;

Opțiuni folosite: , Transform și Blending Options > ColorOverlay, BevelAndEmboss, Stroke

3 componente de tip layer folosite la design-ul butonului;

Opțiuni folosite: Blending Options > ColorOverlay

Importarea fisierelor grafice si a pachetului de date vuforia

Importul acestor fișiere se face cu un simplu drag an drop în meniul de resurse . Pentru a fi folosite pe post de imagine în cadrul butoanelor sau al fundalului, sunt necesare câteva modificări în fereastra de setări import:

Texture Type > Sprite (2D and UI)

De asemenea, pentru a spori calitatea imaginii se folosește următoarea setare:

Format > Truecolor

Pasul următor constituie din importarea SDK-ului vuforia care se descarcă după site-ul producătorului. Se dă dublu click pe packet și se selectează opțiunea "All" și apoi butonul "Import". Apoi se intra pe https://developer.vuforia.com/ , se creaza un cont nou de logare si se intra la sectiunea Develop.

De aici se creaza o noua baza de date care o sa contina imaginile tinta ale aplicatiei:

Figura 27 – Crearea bazei de date

Următorul pas constă în încărcarea fișierelor tinta selectând tipul acesteia apoi adăugând numele , mărimea și destinația acesteia. După încărcarea fișierelor, acestea vor fi verificate de către website și li se v-a acorda o notă de la 1-5 , în funcție de calitatea lor.

Figura 28 – Continutul bazei de date

După ce s-a creat și populat baza de date , se descarcă folosind butonul “Download Database(All)”, se deschide și se importa exact ca în cazul SDK-ului.

Configurarea scenelor

După ce s-a realizat importarea resurselor și configurarea lor pentru a fi utilizate că imagini/sunete/scripturi , se începe aranjarea lor în scenă si configurarea legaturilor dintre elemente.

Meniul principal

Primul pas în realizarea meniului principal este de creare și ajustare a canvasului, ce reprezintă interfața aplicației. Pentru crearea acestuia se selectează scena dorită, apoi în partea stângă (meniul de componente ale scenei), se dă click dreapta și se selectează UI > Canvas .Acest pas se repetă și în cazul butoanelor, folosind UI > Button. Următorul pas îl reprezintă crearea fundalului meniului folosind UI > Image. Rezultatul o să fie următorul:

Figura 29 – Canvasul (inainte)

Următorul pas este de a înlocui imaginile standard din fundalul și butoanele create cu imaginile realizate anterior în Photoshop. Acest pas se realizează selectând elementul dorit apoi cu drag în drop îl punem în secțiunea Source Image. Acest pas se repeta pentru toate elementele dorite.

În pasul următor se modifica poziția elementelor folosind marcatorii sau prin intermediul parametrilor Pos X și Pos Y (poziția pe verticală și orizontală). De asemenea se modifică și lățimea și înălțimea elementelor folosind parametrii Width și Heigh.Rezultatul o să fie următorul:

Figura 30 – Canvasul(dupa)

Ca butoanele să funcționeze ca un schimbător de scena se atașează următorul script unei componente din scenă sau unui GameObject gol:

using UnityEngine;
using System.Collections;
using UnityEngine.UI;
using UnityEngine.SceneManagement;

public class SchimbareScena : MonoBehaviour
{
    public void SeteazaScena(string numeScena)
    {
     UnityEngine.SceneManagement.SceneManager.LoadScene (numeScena);
    }
}

Scriptul definește o clasă publică numită SchimbareScena și apoi o funcție numită SeteazaScena cu un parametru de tip strâng denumit numeScena. Funcția definită mai sus include la rândul ei clasa standard de schimbare a scenei din Unity.

Dupa ce s-a atasat scriptul unui element, se selecteaza butonul respectiv, si folosind drag&drop se pune elementul ce contine scriptul in casuta None (object) din fereastra OnClick ().

Figura 31 – Atasarea scriptului

Următorul pas constă în selectarea butonului No Function și selectarea opțiunilor : SchimbareScena(clasa definită în script) și apoi selectarea opțiunii SeteazaScena (funcția definită în script). Ultimul pas îl constă în introducerea numelui scenei ce v-a fi deschisă în urma apăsării butonului în căsuța de text.

Figura 32 – Selectarea clasei și a funcției

! Acești pași se urmează și pentru configurarea scenelor SelectareLimba si SelectareModel !

Pagina de contact

In ceea ce priveste aranjarea si modificarea elementelor in scena, crearea paginii de contact este asemanatoare cu cea a meniului principal. Aceasta scena cuprinde 3 butoane de tip SocialMedia , unul pentru coordonate GPS si un buton “Inapoi” .

Pentru butonul de back se foloseste scriptul de schimbare de scena folosit anterior.

Scriptul pentru butoanele de Social Media si gps este urmatorul:

using UnityEngine;
using System.Collections;
using Vuforia;

public class SocialMedia : MonoBehaviour {

    private bool mFlashEnabled = false;

    public void facebook(){
        Application.OpenURL ("https://www.facebook.com/muzeuldearta.craiova/");
    }
    public void instagram(){
        Application.OpenURL ("https://www.instagram.com/explore/locations/831950107/");
    }

    public void wikipedia(){
        Application.OpenURL ("https://ro.wikipedia.org/wiki/Muzeul_de_Art%C4%83_din_Craiova");
    }

    public void GPS(){
        Application.OpenURL ("https://www.google.ro/maps/place/Muzeul+de+Art%C4%83/@44.3191793,23.7950188,15z/data=!4m5!3m4!1s0x0:0xcdb638d9fdf576bf!8m2!3d44.3191793!4d23.7950188");
    }
        
    }

Acest script definește o clasă numit SocialMedia și 4 funcții ce conțin fiecare clasă de deschidere al unui URL . Cele 3 funcții social media ( facebook,instagram,wikipedia) sunt deschise în browser-ul nativ al telefonului iar funcția GPS deschide aplicația nativă de navigare a telefonului.

Figura 33 – Selectarea clasei și a celor 4 funcții

Pentru butoanele de apelare si e-mail se folosesc scripturile urmatoare:

Apel.cs

using UnityEngine;
using System.Collections;

public class Apel : MonoBehaviour {

    public void Apelare ()
    {
        Application.OpenURL ("tel://0251412342");
    }
}

Email.cs

using UnityEngine;
using System.Collections;

public class Email : MonoBehaviour {

    public void Mail()
    {
        string t =
            "mailto:muzeuartacv@gmail.com?subject=Merita%20%20aceasta%20licenta?%20o%20nota%buna?";
        Application.OpenURL(t);
    }
}

CameraAR

Următor pas al dezvoltării aplicației îl reprezintă folosirea SDK-ul Vuforia importat anterior. Pentru acest pas o să folosim două elementele prefabricate(prefabs) găsite în SDK: CameraAR și ImageTarget.

După ce am dat drag and drop la cele două elemente în scenă, se selectează CameraAR și apoi opțiunea “Open Vuforia Configuration” unde se completează câmpul “App licence key” cu licență obținută de pe site-ul developerului, și se bifează cele două opțiuni de la Datasets : LoadLicence Database și Activate.Aceste opțiuni ne v-a da posibilitatea să folosim pozele din baza de data creată și descărcată de pe site-ul Vuforia.

Figura 34 – Configurare Vuforia si activare baza de date

Dupa ce s-a configurat camera , trebuie sa configuram si imaginea tinta (ImageTarget) selecatand-o si apoi alegand baza de date din campul “Database”(reprezinta baza de data creata pe site-ul developerului) si unul dintre pozele incarcate in baza de date din campul “ImageTarget”, in cazul acesta Tablou1. Rezultatul v-a fi urmatorul:

Figura 35 – Imaginea țintă configurată

Urmatorul pas il constă in crearea unei componente de tip sprite ( 2D Object > Sprite ) , să adăugăm poza realizată în Photoshop cu descrierea tabloului 1 în limba romana , și să fixăm aceasta componente fix deasupra imaginei ținta . Rezultatul v-a fi următorul :

Figura 36 – Imaginea tinta si descrierea tabloului

După ce s-au configurat și celelalte două tablouri urmează configurarea și aranjarea canvasului. Se crează 3 butoane care se așează unul lângă altul în canvas. Pentru butonul de back folosim scriptul ce cuprinde clasa de schimbare a scenei(SchimbareScena.cs). Iar pentru celelalte două butoane se vor folosi următoarele scripturi :

Pentru lanterna:

using UnityEngine;
using System.Collections;
using Vuforia;

public class Lanterna : MonoBehaviour {
    private bool mFlashEnabled = false;

    public void Lanterna2 ()
    {
        {
            if (!mFlashEnabled) {
                // Se aprinde lanterna daca aceasta este oprita
                CameraDevice.Instance.SetFlashTorchMode (true);
                mFlashEnabled = true;
            } else {
                // Se stinge lanterna daca aceasta este pornita
                CameraDevice.Instance.SetFlashTorchMode (false);
                mFlashEnabled = false;
            }
        }
    }
}

Acest script accesează blițul camerei și îl activează în caz că-i dezactivat și vice versa.

Pentru autofocus:

using UnityEngine;
using System.Collections;
using Vuforia;

public class Autofocus : MonoBehaviour {

    public void focus ()
    {
        bool focusModeSet = CameraDevice.Instance.SetFocusMode (
            CameraDevice.FocusMode.FOCUS_MODE_CONTINUOUSAUTO);

        if (!focusModeSet) {
            Debug.Log ("Eroare: dispozitiv necompatibil!).");
        }
    }
}

*Acest script setează camera dispozitivului mobil pe modul autofocus.*

Cele doua scripturi sunt atasate unui gameobject gol sau oricarui element din scenă si apoi atasate butoanelor.

Ultima componenta care trebuie configurată este imaginea ce apare la inceputul scenei . Astfel cream o noua imagine in canvas si creăm un gameobject nou căruia ii atașăm urmatorul script :

using UnityEngine;
using UnityEngine.UI;
using UnityEngine.SceneManagement;
using System.Collections;

public class Incarcare_Scan : MonoBehaviour
{
    public Image splashImage;
    public string loadLevel;

    IEnumerator Start()
    {
        splashImage.canvasRenderer.SetAlpha(0.0f);

        FadeIn();
        yield return new WaitForSeconds(2.5f);
        FadeOut();
        yield return new WaitForSeconds(2.5f);
        UnityEngine.SceneManagement.SceneManager.LoadScene(loadLevel);
    }

    void FadeIn()
    {
        splashImage.CrossFadeAlpha(5.0f, 0.0f, false);
    }

    void FadeOut()
    {
        splashImage.CrossFadeAlpha(0.0f, 2.5f, false);
        splashImage.enabled = false;

    }
}

*Acest script se foloseste de caracteristica Alpha a unei imagini,astfel aceasta apare la inceputul executarii scenei si dispare dupa un numar prestabilit de secunde.La finalul scriptului se dezactiveaza imaginea pentru a avea acces asupra butoanelor.*

Figura 37 – Imagine instrucțiuni

! Acești pași se urmează și pentru configurarea scenelor CameraAR_FR și CameraAR_IT !

Scena model 3D

Realizarea acestei scene este identică cu cea a CamereiAR cu mici adiții. După adăugarea butoanelor și imaginii tinta , se adăugă cele două modele 3D ale Stonehenge-ului (o versiune originală și una restaurată) și se suprapun . Se mai crează de asemenea un buton adițional numit Restaurare . Scopul acestuia v-a fi de a alterna cele două modele.

Figura 38 – Configurare scena model 3D + buton restaurare

Butonului i se v-a atasa urmatorul script :

using UnityEngine;
using System.Collections;
using UnityEngine.UI;
public class Restaurare : MonoBehaviour {

    public GameObject Original;
    public GameObject Restaurat;
    public bool isActive = true ;
    public Button buton;

    private void Start (){
    
        Restaurat.SetActive (false);
        Button btn = buton.GetComponent<Button> ();
        buton.onClick.AddListener (Change);
    }

    public void Change(){

        if (isActive == true) {
            Original.SetActive (false);
            Debug.Log ("Conditia true");
            Restaurat.SetActive (true);
            isActive = false;
        } else {
            Original.SetActive (true);
            Debug.Log ("Conditia false");
            Restaurat.SetActive (false);
            isActive = true;
        }
    }
}

*Acesta ne v-a permite să activăm și să dezactivăm alternativ cele două modele 3D . Aplicatia se deschide cu modelul original prestabilit, la apasarea butonului se afiseaza modelul restaurat.*

Componentele audio

Sunet butoane

Pentru a configura ca atunci cand se apasa un buton sa se auda sunetul specific de “click” se v-a folosi urmatorul script :

using UnityEngine;
using System.Collections;
using UnityEngine.UI;
[RequireComponent(typeof(Button))]

public class SunetClick : MonoBehaviour 

{
    public AudioClip sound;
    private Button button { get { return GetComponent<Button>(); } }
    private AudioSource source { get { return GetComponent<AudioSource>(); } }

        void Start () 
    {
        gameObject.AddComponent<AudioSource>();
        source.clip = sound;
        source.playOnAwake = false;

        button.onClick.AddListener(() => PlaySunet());
        }
        
    void PlaySunet ()
    {
        source.PlayOneShot (sound);
    }
}

*Acesta v-a fi atașat fiecărui buton în parte și apoi se va da drag and drop în câmpul “Sound” a sunetului de format .WAV. Rezultatul v-a fi redarea sunetului configurat mai sus la fiecare apăsare a butoanelor.*

Figura 39 – Configurarea sunet butoane

Sunet detectare țintă

Vom folosi următorul script pentru a reda un sunet odată ce imaginea ținta este detectată cu succes:

using UnityEngine;
using System.Collections;
using Vuforia;

public class SunetSucces : MonoBehaviour, ITrackableEventHandler
{
    private TrackableBehaviour mTrackableBehaviour;

void Start()
    {
        mTrackableBehaviour = GetComponent<TrackableBehaviour>();
        if (mTrackableBehaviour)
        {
            mTrackableBehaviour.RegisterTrackableEventHandler(this);
        }
    }

    public void OnTrackableStateChanged(
        TrackableBehaviour.Status previousStatus,
        TrackableBehaviour.Status newStatus)
    {
        if (newStatus == TrackableBehaviour.Status.DETECTED ||
            newStatus == TrackableBehaviour.Status.TRACKED ||
            newStatus == TrackableBehaviour.Status.EXTENDED_TRACKED)
        {
            // Pornire sunet la gasirea tintei
            GetComponent<AudioSource>().Play();
        }
        else
        {
            // Oprire sunet la pierderea tintei
            GetComponent<AudioSource>().Stop();
        }
    }   
}

*Scriptul se v-a atasa imaginii tinta sau a camerei si se v-a dat drag an drop la un sunt de tip .wav sau mp3 in sectiunea AudioSource.*

Imaginea de intro

Pentru imaginea de intro se foloseste o imagine realizata in Photoshop , un gameobject gol si scriptul urmator:

using UnityEngine;
using UnityEngine.UI;
using UnityEngine.SceneManagement;
using System.Collections;

public class Incarcare : MonoBehaviour
{
    public Image splashImage;
    public string loadLevel;

    IEnumerator Start()
    {
        splashImage.canvasRenderer.SetAlpha(0.0f);

        FadeIn();
        yield return new WaitForSeconds(2.5f);
        FadeOut();
        yield return new WaitForSeconds(2.5f);
        UnityEngine.SceneManagement.SceneManager.LoadScene(loadLevel);
    }

    void FadeIn()
    {
        splashImage.CrossFadeAlpha(1.0f, 1.5f, false);
    }

    void FadeOut()
    {
        splashImage.CrossFadeAlpha(0.0f, 2.5f, false);

    }
}

*La pornirea aplicației fundalul v-a fi negru, apoi la un interval setat în script imaginea v-a apărea încet apoi v-a dispărea.*

Setarea ancorelor

Ultima etapă de dezoltare a aplicație o reprezintă setarea “ancorelor” . Acestea sunt folosite pentru a defini zona de “comfort” a componenței. Odată cu schimbarea rezoluției aplicației, butoanele și fundalul își vor păstra poziția cât și rația de aspect(aspect rațio) până la o anumită limita. Setarea se face atât prin selectarea obiectului din scenă și mutarea celor 4 săgeți în jurul obiectului, fie folosind una dintre opțiunile prestabilite oferite de unity în partea dreaptă a meniului.

Figura 41 – Ancorele setate pe butonul de autofocus

Construirea APK-ului

Dupa ce aplicatia este gata de construire(build) , trebuie sa cream APK-ul aplicatiei care v-a fi transferat pe un dispozitiv mobil si instalat.

Figura 42 – Fereastra de construire

Primul pas este de a intra în meniul de construire(File>BuildSettings). Odată ajunși în acest meniu se selectează platforma Android și se adăugă fiecare scenă prin intermediul butonului “Add opened scene”. Următorul pas este de configurare a plicatiei folosind butonul “Player Settings”. Aici vom avea următoarele setări:

Resolution and Presentation:

Default Orientation : Landscape Left

Figura 43 – Setari Resolution and Presentation

Icon: se va da drag and drop la iconița creată în Photoshop

Figura 44 – Setari Icon

Identification: la opțiunea Bundle Indentifier se scrie Compania.Username.Nume_aplicație și se alege versiunea minimă necesară de android din căsuța Minimum API Level.

Figura 45 – Setari Identification

Odată ce setările au fost făcute , se dă Build și se alege o destinație pentru APK. După câteva minute de construire APK-ul este gata de transferat pe dispozitiv și de folosit.

Capitolul IV

~ Prezentarea aplicației ~

Informații generale

Pentru a rula aplicația este necesar un dispozitiv cu o versiune minimă de Android OS de 4.4 KitKat. Aplicația este dezvoltată pe rezoluția qHD(quad HD 2560×1440) dar se adaptează în funcție de rezoluția a dispozitivului folosit (ex 1920×1080 , 1280×800 , 800×420). Aplicația este configurata pentru a fi folosită exclusiv în modul landscape stânga sau dreapta.

Startul aplicației

Odată ce s-a instalat aplicația pe dispozitivul mobil , se accesează din meniul de aplicații instalate. La pornirea aplicației suntem întâmpinați de logo-ul unity și de imaginea de întâmpinare a aplicației:

Figura 46 – Imaginea de intâmpinare

Meniul principal

Odată cu dispariția imaginii de întâmpinare, suntem redirecționați către scena meniului principal.Din această scenă putem să ajungem în celalte scene folosind unul dintre cele trei butoane puse la dispoziție: Scanează, Contact, MuzeuVirtual.

Fiecare buton din aplicație reda un sunet prestabilit odată cu apăsarea acestuia.

Figura 47 – Meniul principal

Meniul de selectare a limbii

În acest meniu se ajunge cu ajutorul butonului “Scanează”. Reprezintă scena ce ne permite să alegem limba în care ne sunt prezentate descrierile tablourilor. Fiecare buton ne trimite către o versiune personalizată a scenei CameraAR:

CameraAR_RO

CameraAR_IT

CameraAR_FR

Figura 48 – Meniul de selectare a limbii

CameraAR – Descriere tablou

Odată cu selectarea uneia dintre opțiunile din meniul de selectare al limbii , suntem întâmpinați de o imagine informativă care ne explică faptul că trebuie să îndreptăm camera către marcaj:

Figura 49 – Imagine informativă

Odata ce imaginea dispare, putem observa interfata aplicatiei: camera aplicatiei precum si cele trei butoane: Lanterna, Autofocus si Inapoi. In acest moment, aplicatia scaneaza in continuu dupa una dintre cele 3 imagini tinta din baza de date:

Figura 52 – Tinta abloul 1

Cele trei imagini în ordine reprezintă descrierea tabloului Gioconda (Mona Lisa) , Noaptea Înstelată și Țipătul.

Odată ce imaginea a fost detectată, descrierea tabloului apare instant pe ecran și se reda sunetul de detecției a imaginii țintă:

Meniul de contact

Această scenă cuprinde diferite detalii despre personalul Muzeului de Artă Craiova precum și 3 butoane de tip “Social Media” către Facebook,Instagram și Wikipedia. Mai regăsim și un buton ce cuprinde coordonatele GPS către locația muzeului. Odata apasat butonul cu coordonatele GPS, se deschide aplicatia standard de navigare pe dispozitivul mobil cu pozitia muzeului de arta evidentiata pe harta.

Figura 56 – Meniul de contact

Aceasta scena mai cuprinde si doua butoane: unul cu functia de apelare si unul cu functia de scriere a unui e-mail.

Meniul de selectare a modelului 3D

Scena aceasta ne oferă posibilitatea alegerii unuia dintre cele trei modele 3D pe care să le vizualizăm cu ajutorul camerei AR. (3D_Stonehenge, 3D_Castel , 3D_Templu ).

Figura 59 – Meniul de selectare a modelului 3D

CameraAR – Muzeul Virtual

Odată ce unul dintre modelele 3D este selectat, suntem imediat trimiși către scenă ce cuprinde modelul respectiv. Odată ce imaginea ținta este detectată, modelul v-a apărea deasupra ei. Modelul Stonehenge are o opțiune în plus față de celelalte două modele: conține și un buton de restaurare. Scena începe cu modelul 3D original prestabilit iar odată cu apăsarea butonului Restaurare modelul original dispare și apare cel restaurat:

Figura 60 – Model Stonehenge original

Figura 61 – Model Stonehenge restaurat

Figura 62 – Model Templu

Figura 63 – Model Castel

Imaginea țintă pentru modelele 3D:

Figura 64 – Imaginea țintă pentru modelele 3D

Concluzii

Aceasta aplicație a fost realizată cu scopul de a ajuta muzeele să ofere o modalitate mult mai interactivă de vizualizare a detaliilor despre exponate cât și o modalitate în plus de a atrage vizitatorii prin intermediul secțiunii „Muzeu Virtual” al aplicației. Aceasta se folosește de camera principală a dispozitivului mobil pentru a scana și cauta imaginea ținta, cu scopul de a oferi detalii despre un exponat anume sau de a permite vizitatorilor să observe anumite monumente din diferite zone ale lumii.

Aplicația este construită astfel încât se poate edita foarte ușor de orice instituție sau firma pentru a putea fi folosită în scopuri proprii. Aplicația pentru muzee este doar un exemplu de întrebuințare a aplicației.

În urmă urma realizării acestei aplicații am acumulat o grămadă de cunoștințe și tehnici de programare și de folosire a platformei Unity și Vuforia, cunoștințe ce mă vor ajuta pe viitor în cadrul realizării unor noi aplicații sau programe.

A fost un proces de lungă durată( peste 4 luni de teste și configurări,convertiri etc) și de o dificultate ridicată deoarece am început cu zero cunoștințe în ceea ce privește implementarea limbajului C# în Unity și folosirea uneltelor ce sunt dispuse de către SDK-ul Vuforia, DAR am reușit să realizez ceea ce mi-am propus și sunt foarte mulțumit de rodul muncii mele.

Bibliografie

[PCFB14] – Programming C# For Beginners,by Mahesh Chand , 2014

[POOPV] – Programarea Orientatã pe Obiecte si Programarea Vizualã,by Microsoft

[UIA15] – Unity in action ,by Joseph Hocking, 2015

Referințe web

[GAME] – Gaming Engine https://en.wikipedia.org/wiki/Game_engine

[MIDW] – Middleware , https://en.wikipedia.org/wiki/Middleware

[PCFB14] – Programming C# For Beginners,by Mahesh Chand , 2014 http://www.c-sharpcorner.com/ebooks/programming-csharp-for-beginners

[PHOTO] – Photoshop https://en.wikipedia.org/wiki/Adobe_Photoshop

[PHPGN] – Plugin-uri Photoshop https://en.wikipedia.org/wiki/Adobe_Photoshop

[POOPV] – Programarea Orientatã pe Obiecte si Programarea Vizualã,by Microsoft, http://colegiulbratianu.ro/wp-content/themes/theme53309/documente/software/DotNet.pdf

[UIA15] – Unity in action ,by Joseph Hocking, 2015, http://codercdy.com:8989/U_Unity.in.Action.2015.6.pdf

[UNTAUD] – Unity Audio https://docs.unity3d.com/Manual/Audio.html

[UNTUI] – Unity UI https://docs.unity3d.com/Manual/UISystem.html

[VARSDK] – https://en.wikipedia.org/wiki/Vuforia_Augmented_Reality_SDK

[VSDK] – Vuforia SDK , realizat de Qualcomm, https://www.vuforia.com/

[VTAT] Vuforia Tips and tricks https://gamedevelopment.tutsplus.com/tutorials/vuforia-tips-and-tricks-on-unity–cms-28744

Codul sursă

Apel.cs

using UnityEngine;
using System.Collections;

public class Apel : MonoBehaviour {

    public void Apelare ()
    {
        Application.OpenURL ("tel://0251412342");
    }
}

Email.cs

using UnityEngine;
using System.Collections;

public class Email : MonoBehaviour {

    public void Mail()
    {
        string t =
            "mailto:muzeuartacv@gmail.com?subject=Merita%20%20aceasta%20licenta?%20o%20nota%buna?";
        Application.OpenURL(t);
    }
}

Autofocus.cs

using UnityEngine;
using System.Collections;
using Vuforia;

public class Autofocus : MonoBehaviour {

    public void focus ()
    {
        bool focusModeSet = CameraDevice.Instance.SetFocusMode (
            CameraDevice.FocusMode.FOCUS_MODE_CONTINUOUSAUTO);

        if (!focusModeSet) {
            Debug.Log ("Eroare: dispozitiv necompatibil!).");
        }
    }
}

Incarcare.cs

using UnityEngine;
using UnityEngine.UI;
using UnityEngine.SceneManagement;
using System.Collections;

public class Incarcare : MonoBehaviour
{
    public Image splashImage;
    public string loadLevel;

    IEnumerator Start()
    {
        splashImage.canvasRenderer.SetAlpha(0.0f);

        FadeIn();
        yield return new WaitForSeconds(2.5f);
        FadeOut();
        yield return new WaitForSeconds(2.5f);
        UnityEngine.SceneManagement.SceneManager.LoadScene(loadLevel);
    }

    void FadeIn()
    {
        splashImage.CrossFadeAlpha(1.0f, 1.5f, false);
    }

    void FadeOut()
    {
        splashImage.CrossFadeAlpha(0.0f, 2.5f, false);

    }
}

Incarcare_Scan.cs

using UnityEngine;
using UnityEngine.UI;
using UnityEngine.SceneManagement;
using System.Collections;

public class Incarcare_Scan : MonoBehaviour
{
    public Image splashImage;
    public string loadLevel;

    IEnumerator Start()
    {
        splashImage.canvasRenderer.SetAlpha(0.0f);

        FadeIn();
        yield return new WaitForSeconds(2.5f);
        FadeOut();
        yield return new WaitForSeconds(2.5f);
        UnityEngine.SceneManagement.SceneManager.LoadScene(loadLevel);
    }

    void FadeIn()
    {
        splashImage.CrossFadeAlpha(5.0f, 0.0f, false);
    }

    void FadeOut()
    {
        splashImage.CrossFadeAlpha(0.0f, 2.5f, false);
        splashImage.enabled = false;

    }
}

Lanterna.cs

using UnityEngine;
using System.Collections;
using Vuforia;

public class Lanterna : MonoBehaviour {
    private bool mFlashEnabled = false;

    public void Lanterna2 ()
    {
        {
            if (!mFlashEnabled) {
                // Se aprinde lanterna daca aceasta este oprita
                CameraDevice.Instance.SetFlashTorchMode (true);
                mFlashEnabled = true;
            } else {
                // Se stinge lanterna daca aceasta este pornita
                CameraDevice.Instance.SetFlashTorchMode (false);
                mFlashEnabled = false;
            }
        }
    }
}

Restaurare.cs

using UnityEngine;
using System.Collections;
using UnityEngine.UI;
public class Restaurare : MonoBehaviour {

    public GameObject Original;
    public GameObject Restaurat;
    public bool isActive = true ;
    public Button buton;

    private void Start (){
    
        Restaurat.SetActive (false);
        Button btn = buton.GetComponent<Button> ();
        buton.onClick.AddListener (Change);
    }

    public void Change(){

        if (isActive == true) {
            Original.SetActive (false);
            Debug.Log ("Conditia true");
            Restaurat.SetActive (true);
            isActive = false;
        } else {
            Original.SetActive (true);
            Debug.Log ("Conditia false");
            Restaurat.SetActive (false);
            isActive = true;
        }
    }

}

SchimbareScena.cs

using UnityEngine;
using System.Collections;
using UnityEngine.UI;
using UnityEngine.SceneManagement;

public class SchimbareScena : MonoBehaviour
{
    public void SeteazaScena(string sceneName)
    {
        UnityEngine.SceneManagement.SceneManager.LoadScene (sceneName);
    }
}

SocialMedia.cs

using UnityEngine;
using System.Collections;
using Vuforia;

public class SocialMedia : MonoBehaviour {

    private bool mFlashEnabled = false;

    public void facebook(){
        Application.OpenURL ("https://www.facebook.com/muzeuldearta.craiova/");
    }
    public void instagram(){
        Application.OpenURL ("https://www.instagram.com/explore/locations/831950107/");
    }

    public void wikipedia(){
        Application.OpenURL ("https://ro.wikipedia.org/wiki/Muzeul_de_Art%C4%83_din_Craiova");
    }

    public void GPS(){
        Application.OpenURL ("https://www.google.ro/maps/place/Muzeul+de+Art%C4%83/@44.3191793,23.7950188,15z/data=!4m5!3m4!1s0x0:0xcdb638d9fdf576bf!8m2!3d44.3191793!4d23.7950188");
    }
        
    }

SunetClick.cs

using UnityEngine;
using System.Collections;
using UnityEngine.UI;
[RequireComponent(typeof(Button))]

public class SunetClick : MonoBehaviour 
{
    public AudioClip sound;
    private Button button { get { return GetComponent<Button>(); } }
    private AudioSource source { get { return GetComponent<AudioSource>(); } }

        void Start () 
    {
        gameObject.AddComponent<AudioSource>();
        source.clip = sound;
        source.playOnAwake = false;

        button.onClick.AddListener(() => PlaySunet());
        }
        
    void PlaySunet ()
    {
        source.PlayOneShot (sound);
    }
}

SunetSucces.cs

using UnityEngine;
using System.Collections;
using Vuforia;

public class SunetSucces : MonoBehaviour, ITrackableEventHandler
{
    private TrackableBehaviour mTrackableBehaviour;

    void Start()
    {
        mTrackableBehaviour = GetComponent<TrackableBehaviour>();
        if (mTrackableBehaviour)
        {
            mTrackableBehaviour.RegisterTrackableEventHandler(this);
        }
    }

    public void OnTrackableStateChanged(
        TrackableBehaviour.Status previousStatus,
        TrackableBehaviour.Status newStatus)
    {
        if (newStatus == TrackableBehaviour.Status.DETECTED ||
            newStatus == TrackableBehaviour.Status.TRACKED ||
            newStatus == TrackableBehaviour.Status.EXTENDED_TRACKED)
        {
            // Pornire sunet la gasirea tintei
            GetComponent<AudioSource>().Play();
        }
        else
        {
            // Oprire sunet la pierderea tintei
            GetComponent<AudioSource>().Stop();
        } }   
}

CD / DVD

Autorul atașează în această anexă obligatorie, versiunea electronică a aplicației, a acestei lucrări, precum și prezentarea finală a tezei.

Index

A

Avantajele limbajului de programare C# fata de limbajul C++ 5

B

Bibliografie 55

Butoanele de actiune 25

C

CameraAR 32

CameraAR – Descriere tablou 48

Componentele audio 39

Configurarea scenelor 28

Construirea APK-ului 44

CUPRINSUL xiii

D

Descrierea limbajului C# 4

Descrierea motorului grafic Unity 7

Descrierea Photoshop-ului 11

Dezvoltarea Grafica 20

I

Iconița Aplicației 20

Imaginea de intro 42

Importarea fisierelor grafice si a pachetului de date vuforia 26

Informații generale 46

Instrumente Photoshop 15

L

LISTA FIGURILOR 1

M

Meniul de contact 51

Meniul de selectare a limbii 47

Meniul de selectare a modelului 3D 51

Meniul principal 28, 47

Midleware 9

Motivația 3

Motorul grafic 8

P

Pagina de contact 21, 31

Pagina de selectare a modelului 3D 24

Pagina meniului principal 22

Plugin-uri/Addon-uri 12

R

Referințe web 56

S

Scena model 3D 37

Schema aplicatiei 18

Scopul 3

Setarea ancorelor 43

Startul aplicației 46

Structura unui program C# 5

T

Tipuri de date in C# 6

V

Vuforia 10