Configurator 3D for interior design by Laura Vil

PRIMO INTERACTIVE MEDIA FOR INTERIOR DESIGN MALVINA BORGHERINI

CONFIGURATOR 3D FOR INTERIOR DESIGN

LAURA VILARDO 285065

WALTER NUNZIATI

2015/2016

Indice

1. Introduzione

2. Alf Group e il suo conﬁguratore

3. Design Brief

4. PlayCanvas

4.1 Editor di PlayCanvas

4.2 Il primo prototipo in PlayCanvas

4.3 Vantaggi e Svantaggi di PlayCanvas

5. Unity 3D

5.1 Unity 3D VS PlayCanvas

5.2 Realizzazione del prototipo in Unity 3D

6. Conclusioni

7. Sitograﬁa

Introduzione

La maggior parte di noi, ormai, prima di comprare un prodotto, cerca sul web per poter avere più scelta, cercare la miglior offerta o magari solo per riuscire a trovare qualcosa con un tocco in più che gli faccia dire "Si, lo voglio!". "Bello questo divano, ma vorrei vederlo di un altro colore." " Questa macchina è molto bella, ma chissà come sarebbe con gli interni in pelle chiari." "Mi piace questa bicicletta, ma vorrei un altro tipo di manubrio." "Questa camicia è carina, se non ci fosse stato quel taschino, l'avrei comprata." Per aumentare le vendite tutti i produttori si avvalgono, ormai, del mondo del web, ma, in un mondo in continua evoluzione e con utenti sempre più esigenti, questo non basta più. Per il “mondo del mobile”, dopo anni di continua evoluzione e di esasperata ricerca di una offerta sempre più ampia per il consumatore finale, si stanno aprendo nuove opportunità legate alla maggiore richiesta di prodotti fortemente personalizzati, e questo non solo nelle fasce alte di mercato ma anche per quelle più economiche. Siti internet, applicazioni mobile e siti di e-commerce non bastano più. Vivere il proprio stile indipendentemente dalle mode del momento oggi è una delle maggiori tendenze nel settore dell’arredamento. Le soluzioni personalizzate, che risultano inoltre essere il più chiare e immediate possibile, sono quelle più richieste dall’utente finale. In conseguenza a tutto ciò le aziende sono costrette a spostare la loro attenzione da come (o cosa) produrre a come personalizzare i loro prodotti. Tra i vari elementi che contribuiscono al raggiungimento di questo obiettivo, i configuratori di prodotto si sono rivelati una delle tecnologie più importanti. I configuratori sono oggi la soluzione per un utente che richiede sempre di più un prodotto personalizzato e "unico". Con una semplice interfaccia grafica è possibile configurare il prodotto a proprio piacimento e visualizzare le molteplici configurazioni di un unico prodotto. Colori, materiali, forme, accessori e optional possono essere cambiati e visualizzati dall'utente all'istante. Questo strumento, ovviamente, comporta delle conseguenze positive sia per l'utente finale che per l'azienda. Il configuratore di prodotto 3d online è uno strumento che sfrutta il concetto di gamification, ovvero fa leva sull'interattività e ovviamente sul divertimento. Si, perché l'utente durante la personalizzazione del prodotto, tramite il configuratore, ha l'impressione di essere all'interno di un gioco, si diverte ed allo stesso tempo configura il prodotto tramite i suoi gusti, ed il risultato finale non potrà che essere positivo. Per l'utente l'acquisto di un prodotto tramite un configuratore genera due aspetti positivi e fondamentali: • Personalizzando lui stesso il prodotto, l'utente avrà la sensazione di comprare qualcosa di unico e speciale che solo lui possiederà. • Utilizzando un configuratore, rispetto ai metodi di acquisto tradizionali, l'utente viene immerso in una nuova tipologia di

esperienza e, divertendosi, ha la possibilità di vedere il prodotto finale prima di comprarlo. Per quanto riguarda l'azienda, anche essa può ottenere dei vantaggi notevoli da tutto ciò, soprattutto se il configuratore 3D viene abbinato ad un e-commerce, permettendo così di aumentare le vendite e la visibilità del proprio brand. Inoltre permette di scoprire i gusti dei potenziali clienti, creando di fatto una banca dati che l'azienda potrà sfruttare per sviluppare i successivi prodotti. Per tutti questi svariati motivi, si ritiene che quello dei configuratori sia un mondo che non potrà che avere una crescita esponenziale con il passare del tempo, per questo si è scelto come argomento di discussione di questa tesi. Insieme allo studio di sviluppo software Magenta Srl con sede a Firenze, si è scelto di affrontare questo tema con un’ottica verso il futuro. La maggior parte dei configuratori esistenti, oggi, fanno uso di immagini e render di prodotti limitando, inoltre, le operazioni da parte dell’utente alla sola scelta del colore. Questi limiti evidenziati nei sistemi attuali di configurazione sono dovuti sicuramente a due aspetti importanti. Attualmente vi è una scarsa maturità delle tecnologie esistenti, per quanto riguarda la gestione di oggetti 3D digitali sul web. Questo limite tecnico influisce nettamente sulla scelta di utilizzo d’immagini nei configuratori esistenti da parte delle aziende. Il secondo aspetto riguarda il processo di creazione di questi contenuti. Creare scene in 3D richiede figure professionali tutt’ora costose e di non facile reperi bilità, per questo creare un configuratore 3D comporterebbe l’assunzione di diversi professionisti e di conseguenza un notevole aumento del costo di realizzazione. Un esempio, a proposito, è quello dell’azienda DeVorm che ha realizzato da poco il suo configura tore per la nuova collezione di sedie e divani disegnate dal designer Laurens van Wieringen. L’utente può inizialmente scegliere la configurazione del prodotto che desidera e successivamente sceglierne il materiale e il colore, visualizzarlo con un sfondo chiaro o scuro e nella vista laterale e frontale. Figura 1: Interfaccia del configuratore DeVorm

Figura 2: Interfaccia del configuratore DeVorm

In questa sede si è deciso di cercare soluzioni alternative che non si limitino semplicemente al cambio del materiale. Si vuole rendere il momento della scelta e il possibile acquisto del prodotto da parte dell’utente finale, un’esperienza. Bisognerà capire se tutto ciò sia possibile realizzarlo con gli strumenti disponibili oggi, sia per quanto riguarda gli aspetti tecnici che funzionali ed estetici. Presso Magenta Srl mi occuperò di tutti gli aspetti per la creazione di un configuratore 3D a partire dalla fase progettuale (UX, UI), la creazione di contenuti 3D (modelli 3D e rendering) fino alla fase di realizzazione, cercando di individuare fra gli stumenti disponibili oggi quello più performante (Unity 3D e PlayCanvas).

Alf Group e il suo configuratore

Alf è una tra le realtà più significative nel settore dell'arredamento internazionale, nata negli anni ‘50 quando un gruppo di artigiani decide di fondare a Treviso una cooperativa allo scopo di avviare una produzione in serie di oggetti d'uso in legno. Questa risorsa negli anni si è trasformata in una grande realtà aziendale, grazie alla propria capacità di distinguersi nella progettazione e nella realizzazione di arredi per la zona notte. Alf Group è una grande realtà produttiva tutta italiana, composta da due aziende: Alf DaFrè che produce mobili e complementi per la casa e Valdesign che propone mobili e sistemi cucina. Al tempo stesso, Alf produce linee differenti per poter dialogare con le esigenze di culture diverse e di interpretare modi dell’abitare differenti, pur rimanendo fedele alla tradizione consolidata del Made in Italy. Si ritiene, inoltre, che uno dei punti forza di questa azienda sia data anche dall'innumerevole quantità di finiture e colori che Alf DaFrè propone ai suoi clienti, offrendogli così la possibilità di poter personalizzare, il più possibile, il proprio arredamento e renderlo così unico e speciale. Per molti però è difficile immaginarsi, come sarebbe la propria stanza da letto o il proprio soggiorno tenendo in mano solo un campione di materiale o di colore o magari vederlo vicino alla cucina che si ha davanti e che vorresti anche se in quel momento è di un altro colore o materiale. Per sorvolare, questo problema, Alf ha, appunto, realizzato un configuratore per dare, la possibilità all'utente di visualizzare tutte le soluzioni possibili all'istante da lui scelte, prima ancora dell'acquisto. Questo configuratore, oggi, però, viene utilizzato solamente dagli agenti di vendita per mostrare agli acquirenti, negli appositi punti vendita, i prodotti non disponibili fisicamente in quel momento. Anche questo, come gli altri configuratori, si limita al cambio della finitura e la visualizzazione delle diverse composizione, per esempio di un sistema giorno.

Figura 3: Interfaccia del configuratore Alf DaFrè

Figura 4: Interfaccia del configuratore Alf DaFrè

Design Brief

Analizzando attentamente l'azienda Alf DaFrè, si denota subito quanto sia vasta la scelta di prodotti che propone ai suoi utenti. Trattandosi di prodotti d'arredamento è impossibile per l'azienda mostrarli fisicamente tutti ai propri clienti. Lo spazio disponibile nei punti vendita e lo showroom sarà sempre limitato rispetto alla quantità di prodotti che l'azienda produce. Inoltre, Alf DaFrè può produrre innumerevoli versioni dello stesso prodotto ma con finiture e colori differenti, il che vuol dire che per uno stesso prodotto potremmo comporre almeno 20 configurazioni diverse. Figura 5: Le diverse configurazioni di un complemento d’arredo di Alf DaFrè

Se da un lato, Alf Dafrè dà la possibilità ai propri consumatori di scegliere e quindi personalizzare il proprio prodotto, dall'altro non gli dà la possibilità di visualizzarlo prima dell'acquisto. Far conoscere, esporre e valorizzare i prodotti per un azienda è fondamentale. Sul sito Alf DaFrè si possono trovare tutti i loro prodotti, visualizzare le finiture disponibili ed infine usare l'immaginazione per visualizzare il prodotto che si vorrebbe. Per risolvere questo problema, da poco l'azienda ha introdotto un configuratore per visualizzare le diverse finiture disponibili. Tutto ciò, però, è possibile solo dopo aver trovato sul web il punto vendita più vicino e contattato l'agente per prendere un appuntamento e solo dopo essersi recati al punto vendita, si potrà mostrare, tramite l'applicazione, il prodotto con colori e materiali richiesti dall'utente. Tutto questo sistema apre la strada ad una serie di riflessioni sul dare la possibilità agli utenti di utilizzare un configuratore. Come detto in precedenza, i configuratori sono uno strumento che sfruttano molto il concetto di gamification e punta, molto sull'interazione. Trovare il modo giusto per far ciò e soddisfare sia le esigenze aziendali che quelle dell'utente finale, è l'obiettivo principale. Come già detto, la maggior parte dei configuratori, oggi, utilizzano lo spazio 2D, una o più immagini che cambiano o si sovrappongono per poter dare la possibilità all'utente di cambiare semplicemente il colore attraverso un bottone. Un'interazione molto basic che riesce ad attirare l'attenzione dell'utente per qualche istante, anche solo per "giocare". Ma a cos’ altro può servire un configuratore? Può solo cambiare colore? Quali altri tipi d'interazioni potrebbero esserci? Cosa potrebbero volere i futuri consumatori Alf DaFrè? Sfruttando alcuni principi di user expirience, utilizzando modelli 3D, una navigazione nello spazio 3D ed una buon risoluzione grafica, si ritiene di poter migliorare ed apportare innovazione al tradizionale configuratore di oggi. Gli obiettivi iniziali che si pongono a questo proposito sono:

• Creare scenari ipotetici di zona giorno e zona notte in 3D e non utilizzare più rendering • Utilizzare uno spazio 3D e muoversi all'interno di esso. • Ottenere un applicazione che giri sia sul desktop che su dispositivi mobile. • Cambiare ad un oggetto non sono il colore ma anche la texture, per visualizzare le diverse finiture. • Interagire direttamente con il modello 3D (aprire e chiudere uno sportello o un cassetto) per dare la possibilità all'utente di visualizzare anche l'interno. Ad esempio questo potrebbe essere molto utile per visualizzare le diverse configurazioni degli interni degli armadi della zona notte.

Come si è detto precedentemente Alf DaFrè non produce solo sistemi giorno o notte, ma anche complementi d’arredo singoli. Ognuno di questi può essere successivamente personalizzato e configurato in diversi modi. Per questa serie di motivi si è deciso che potrebbe essere interessante provare a creare una sezione, nel configuratore, riguardante i complementi d’arredo e permettere all’utente di visualizzare le diverse configurazioni di un prodotto. Gli obiettivi sono:

• Visualizzare il modello 3D singolo (es. una sedia, un tavolo, una poltrona) nello spazio: • Visualizzare l'oggetto a 360° • Visualizzare le diverse configurazioni • Cambiare materiali e colori •Visualizzare l'esploso del modello 3D per visualizzare le caratteristiche tecniche

Come detto precedentemente la sfida maggiore sarà quella di far girare modelli 3D sia sul browser che sul mobile essendoci oggi, ancora, una scarsa maturità delle tecnologie. Utilizzare un modello 3D comporta tutta una serie di problematiche non indifferenti. Modelli high-poly di qualità nettamente superiore, peseranno sicuramente di più causando problematiche sia a livello di risultato finale (l’applicazione girerà in maniera lenta e di conseguenza sarà inutilizzabile) ma anche perchè i programmi attuali come PlayCanvas o Unity non supportano. Questi potrebbero non essere caricati all’interno del programma o essere automaticamente frammentati in più modelli separati. Per questo andrà sicuramente trovata la giusta combinazione tra high-poly e low-poly. Un altro aspetto da non sottovalutare sarà la resa grafica. Più questa sarà buona più comporterà un notevole carico all’interno dell’applicazione. Inoltre, anche la gestione dell’interazione diretta con i modelli 3D all’interno di un dispositivo mobile con dimensioni limitate sarà un’altra problematica da risolvere. PlayCanvas e Unity 3D sono i due programmi individuati dopo un’analisi dell’esistente dettagliata. Scopriremo nei capitoli succesivi cosa sono, come funzionano, e cosa possono fare. Partirò con la realizzazione di due piccoli prototipi su entrambi i programmi per individuare quello più adatto alla creazione del configuratore 3D.

Playcanvas

Si è deciso di provare a realizzare il primo prototipo di configuratore 3D utilizzando la piattaforma di sviluppo PlayCanvas, online e open source. Esso è nato principalmente per permettere sia a principianti che ad esperti di sviluppare video giochi per il browser (WebGL), in HTML5, CSS, e JavaScript. L'intera piattaforma è ospitata sul web, per questo non vi è nulla da installare ed è possibile accedere al proprio progetto da qualsiasi dispositivo e luogo, dopo essersi registrati sul sito. PlayCanvas è gratuito o a pagamento. Gratuitamente offre uno spazio di 200MB da utilizzare ed in questo caso il progetto sarà pubblico e visibile a tutti. 200MB, ovviamente, non saranno sufficienti per un progetto definitivo. Il costo di altro spazio è di 15$ al mese per una persona e 50$ per un gruppo Servizi offerti:

Figura 6: Piano delle offerte di PlayCanvas

4.1 EDITOR DI PLAYCANVAS L'editor di PlayCanvas è uno strumento di visual editing, sul browser, dove è possibile creare e modificare scene ed entità. Nell'interfaccia di PlayCanvas troviamo: • Il menu: contiene tutti i comandi disponibili nell'editor. • La barra degli strumenti: si trovano i tasti per modificare l'oggetto nella scena (sposta, ruota, scala ecc) • La gerarchia: quando importiamo nella scena un oggetto questo compare nella lista gerarchica delle entità che compongono la scena. Da qui è possibile inoltre raggrupparle, selezionarle o eliminarle. • L'inspector: selezionando un entità si visualizzano tutte le proprietà di quell'oggetto. • Viewport: non è altro che la scena 3D in cui andiamo ad importare, selezionare e modificare gli oggetti. • L'assets: é la cartella del progetto in cui troviamo tutto quello che importiamo nel progetto. Solitamente questa viene suddivisa in altre cartelle (modelli 3D, materiali, scripts, texture) per strutturare meglio i file del progetto.

Figura 7: Editor di PlayCanvasFigura

4.2 IL PRIMO PROTOTIPO IN PLAYCANVAS Tutto il lavoro per realizzare il configuratore 3D si può racchiudere in 4 fasi: 1. Creare e caricare i modelli nell'Assets Si parte creando i modelli 3D del prodotto da visualizzare (in questo caso una composizione dei sistemi giorno di Alf Dafrè) con programmi di modellazione 3D come 3dsMax, Rhinoceros, Blender, Maya ecc. PlayCanvas supporta come formati • Modelli 3D: FBX, COLLADA, obj. • Animazioni 3D. • Immagini e texture: jpg, png. • File audio: mp3, ogg. Con un semplice drag and drop è possibile caricare tutto ciò nell'assets di Playcanvas. 2. Costruire entity di gioco Una volta importati i modelli 3D nell'editor di PlayCanvas, questi vanno caricati nella scena diventando di fatto delle entity a cui possiamo impostare degli attributi, delle proprietà, dei materiali, attribuendogli una gerarchia ecc. Lanciando l'applicazione potremmo vedere la scena iniziale dell'applicazione. 3. Gli script Tramite molteplici scripts possiamo iniziare ad animare la scena. Possiamo assegnare lo script direttamente all'entità o richiamarla direttamente nello script tramite nomi o tag, assegnando così lo script al "ROOT" (padre del progetto). In questo modo potremmo creare l'intero configuratore. 4. Pubblicare l'applicazione Nella versione gratuita di PlayCanvas è impossibile esportare l'applicazione, la si può solo pubblicare per poi ottenere una URL da utilizzare per visualizzare l'applicazione sui vari browser. L'obiettivo posto per la realizzazione del primo prototipo di configuratore 3D per Alf Dafrè, è stato comprendere quanto questa piattaforma fosse utilizzabile per l'intero progetto e quando rendesse graficamente rispetto ad altri programmi. Si è iniziato, quindi, a modellare la prima scena di Alf DaFrè con il programma di modellazione 3d Studio Max. Una volta creato l'oggetto, creati tutti i materiali con le rispettive texture e mappato l'oggetto in modo da poter visualizzare la texture perfettamente, si è esportato il tutto nel formato FBX. Tutti i modelli vengono importati nell'assets di PlayCanvas e trascinati nella scena per poter ricomporre la composizione che dovrà essere

visualizzata nell'applicazione. Si caricano tutte le texture per ricreare in PlayCanvas i rispettivi materiali che serviranno dopo per poter cambiare il materiale dell'entità selezionata.

Uno degli obiettivi che si era posto in precedenza nel brief, era quello di capire se era possibile muoversi nello spazio 3D e non avere più una scena fissa. Per questo si è creato uno script che permettesse sia sul desktop che su un dispositivo mobile di poter ruotare e zoomare. Data la tipologia della scena creata si è limitata, il movimento solo entro un certo spazio, precisamente 30° in tutti i lati a partire dal centro. Il risultato finale è stato abbastanza buono in termini di usabilità sia per mobile che desktop. Per non aumentare il carico di interazione all’interno della scena, si è deciso di utilizzare dei bottoni per permettere agli utenti di cambiare il materiale all’oggetto. Il sistema giorno rappresentato in questa scena è una delle composizioni più semplici di Alf DaFrè, formato da solo 6 pezzi di cui 3 mensole, e tre contenitori. Per permettere all’utente di cambiare il materiale si è deciso di suddividere questi, in gruppi ben studiati, per 2 motivi: creare un bottone per ogni oggetto in termini di usabilità non sarebbe stato opportuno soprattutto per una visualizzazione su un dispositivo mobile. Non sarebbe più stato possibile visualizzare contemporaneamente sia la scena che i bottoni per via delle dimensioni dello schermo ridotto. Per quanto riguarda invece l’aspetto dell’interazione, diventerebbe noioso e ripetitivo per l’utente dover selezionare pezzo per pezzo e poi selezionare ancora tutti gli altri bottoni delle finiture. Inoltre selezionando un gruppo di oggetti, con un numero limitato di azioni, si ottiene un immediato cambiamento nella scelta, il che invoglierà l’utente a continuare. Una volta individuati i gruppi di oggetti, che serviranno per ottenere il maggior numero di configurazioni possibili, si è creato lo script per l'interfaccia grafica, in HTML5 e CSS, che verrà visualizzata però, solo

Figura 8: Interfaccia di PlayCanvas

nell'anteprima dell'applicazione e no nella viewport di PlayCanvas. L'interfaccia, dunque, è stata suddivisa in tre zone. Abbiamo la scena in 3D in cui potersi muovere. I bottoni sulla sinistra con le determinate icone che indicano il gruppo di entità che verranno selezionate, che a loro volta faranno comparire la terza zona, ovvero la palete colori. Selezionando le finiture in basso sarà possibile visualizzare immediatamente il mobile con la finitura richiesta.

Figura 9: Layout del primo prototipo realizzato in PlayCanvas Figura 10: Interfaccia del protoripo

Una volta raggiunto l’obiettivo di avere una scena in 3D in cui potersi muovere e cambiare i materiali, si è passati a realizzare l’interazione per poter aprire e chiudere le ante. Per far ciò si è implementato uno script di PlayCanvas chiamato PickerRaycast che permette di selezionare l’entità su cui si sta cliccando attribuendogli successivamente gli script per la rotazione e la traslazione, ottenendo come risultato quello che si può vedere nella prossima immagine. Tramite questo script, che possiamo vedere nell’immagine

successiva, è stato possibile raggiungere nello spazio 3D il modello che si voleva selezionare. A questi Modelli è stato aggiunto un Tag (con cui verranno richiamati nello script) ed una componente di PlayCanvas chiamata “collision”. Il metodo RaycastFirst () non fa altro che sparare un raggio nello spazio dalla posizione in cui si è cliccato il mouse. Se questo colpirà un’entità di collisione allora verrà selezionata e verrà richiamato prima lo script e poi il metodo ad esso collegato (pickedEntity.script.rotate.toggle();).

Figura 11: Apertura delle ante del sistema giorno di Alf DaFrè

var PickerRaycast = pc.createScript('pickerRaycast'); PickerRaycast.attributes.add('speed', { type: 'number', default: 20 }); PickerRaycast.prototype.initialize = function() { this.app.mouse.on(pc.EVENT_MOUSEDOWN, this.onMouseSelect, this); }; PickerRaycast.prototype.onMouseSelect = function (e) { var from = this.entity.camera.screenToWorld(e.x, e.y, this.entity.camera.nearClip); var to = this.entity.camera.screenToWorld(e.x, e.y, this.entity.camera.farClip); this.app.systems.rigidbody.raycastFirst(from, to, function ( result) { var pickedEntity = result.entity; var rotation = pickedEntity.getRotation(); var cubo = pickedEntity.findByName("antaCubo"); if (pickedEntity === cubo){ pickedEntity.script.rotate.toggle(); pickedEntity.open = true;

} }); };

4.3 VANTAGGI E SVANTAGGI DI PLAYCANVAS PlayCanvas come abbiamo visto è uno strumento abbastanza valido per creare applicazioni per il web. Creare una WebGL in PlayCanvas, è decisamente migliore rispetto ad altri programmi come ad esempio Unity 3D. Utilizzare PlayCanvas conviene soprattutto se si stanno creando dei videogiochi o delle applicazioni con modelli 3D per il web, perché rilascia file molto più leggeri e i tempi di caricamento sul web sono decisamente più veloci. Per testare tutto ciò si è deciso di replicare la scena realizzata in PlayCanvas in Unity 3D per osservare le differenze. Come già si pensava la versione WebGL rilasciata dai Unity, non è decisamente una versione utilizzabile, da come si può vedere nell’immagine. La resa grafica è pessima, la risoluzione dei modelli 3D altrettanto, ed ovviamente il peso del file è nettamente superiore a quello di PlayCanvas. Figura 12: Interfaccia WebGL Realizzata con Unity 3D

Tutto ciò è stato riportato anche in un articolo sul blog di PlayCanvas nel quale paragonano due applicazioni identiche, realizzate con i due programmi analizzando 3 parametri fondamentali: • Dimensioni del file • Tempo di caricamento • Frame Rate

Dimensioni del ﬁle

0.22 MB

PLAYCANVAS

4.72 MB UNITY

L’applicazione in Unity è oltre 21 volte più grande della app in PlayCanvas, questo perché, quest’ultima viene creata direttamente in JavaScript. Unity, invece, per esportare in WebGL, deve convertire C# in C ++ che a sua volta viene compilato in LLVM per poi essere trasformato in JavaScript. Tutto questo genera una

quantità enorme di codice che contribuisce, ad appesantire le dimensioni del file.

Tempo di caricamento Figura 13: Confronto dei tempi di caricamento fra Unity 3D e PlayCanvas

Si sono testate le applicazioni sui 12 dispositivi diversi, dalla fascia alta a quella bassa. Il risultato è che i tempi di caricamento di PlayCanvas sono fino a 43 volte più veloci rispetto Unity.

Frame Rate Figura 14: Confronto del Frame Rate fra Unity 3D e PlayCanvas

Anche qui i Frame Rate in PlayCanvas sono fino a 4 volte maggiori di Unity. In particolare, Unity sembra avere un basso rendimento in Safari su iOS. Come dicevo, PlayCanvas funziona molto bene sul browser del desktop, ma c’è anche da dire che questo paragone fra Unity e PlayCanvas è stato fatto con un’app estremamente basilare di un cubo che ruotava. Quando si prova ad aprire l’URL, rilasciata da PlayCanvas, di un progetto più complesso, come quello da me realizzato, su un dispositivo mobile, iniziano i problemi. I tempi di caricamento si allungano nettamente (3/4 minuti circa) o addirittura non riesce proprio ad aprirla (ricarica all’infinito o va in crash) e su dispositivi più obsoleti come iPhone 4S schianta direttamente. Inoltre, PlayCanvas, rilasciando solo formati WebGL, sarebbero necessari altri passaggi per rendere tutto ciò un’applicazione per Android o iOS . Esistono diversi programmi come Intel XDK o Cocoon, che permettono di trasformare una pagina HTML5 in un’app, che viene definita ibrida, da poter installare su SmartPhone e Tablet tramite gli store. Ottenere un’applicazione che giri sia su desktop che su dispositivi mobile è uno dei principali obiettivi. Per questo motivo PlayCanvas non viene ritenuto uno strumento opportuno per lo sviluppo di questo determinato progetto. Inoltre lavorando per circa un mese su questa piattaforma si sono riscontrati una serie di problematiche. In primis, la documentazione non è del tutto soddisfacente e per alcuni aspetti, quasi inesistente, molti degli script che si trovano sul web sono obsoleti e per questo inutilizzabili, se si hanno problemi bisogna solo affidarsi al forum, che funziona abbastanza bene. Per quanto riguarda la parte dei modelli 3D, come abbiamo visto in precedenza si è utilizzato il formato FBX. Questo è un formato di file di Autodesk che viene supportato dai più comuni software di grafica 3D in quanto è in grado d’immagazzinare non solo geometrie, ma anche dati di texture e di animazioni. PlayCanvas però non legge la gerarchia del file FBX. Il che vuol dire, che se si possiede un unico modello ma formato da differenti pezzi, quando lo si importa su PlayCanvas si avrà un unico pezzo e si perderà la gerarchia del modello 3D. Questo sta a significare che ogni modello, che dovrà essere animato successivamente, va esportato singolarmente e ricreata la gerarchia su PlayCanvas. Inoltre la resa grafica è molto scadente, simulare un ambiente verosimile è molto complesso non avendo tante funzionalità di settaggio delle luci e dell’ambiente. E quanto più si tentava di avvicinarsi ad un resa grafica migliore con luci ombre e texture, più si peggiorava la risoluzione sul dispositivo mobile. I tempi di caricamento sono arrivati a 2/3 minuti su un tablet mentre su Smartphone era ormai impossibile aprirlo. Un aspetto positivo di PlayCanvas è quello di avere tutto immagazzinato nel Cloud. Questo permette di poter lavorare da

dispositivi diversi senza dover spostare nessun file, risparmiando cosĂŹ tempo e spazio, ed inoltre, la possibilitĂ di poter avere piĂš persone che lavorano contemporaneamente allo stesso progetto. Inoltre PlayCanvas interagisce direttamente con i social network, senza dover scaricare SDK (Software Development Kit) per la piattaforma che si desidera integrare.

Unity 3D

Dopo aver sperimentato PlayCanvas si è deciso di iniziare a realizzare un altro prototipo con Unity3D per osservarne le differenze. Questo ambiente di sviluppo detto “multipiattaforma” è stato creato appositamente per la creazioni di giochi. Multipiattaforma perché il suo motore permette di “scrivere il gioco” una sola volta e adattarlo perfettamente a tutte le soluzioni: in 2D, 3D, per PC, Mac, iPhone, Android, e persino per Nintendo Wii, Xbox360 e Sony Playstation 3. Figura 15: Le diverse tipologie di esportazione in Unity 3D

Unity 3D offre il supporto completo per tutti gli aspetti fondamentali di un videogioco e non solo: rendering grafico, effetti di luce, simulazioni fisiche, implementazione dell’audio e un sistema di scripting. Anche Unity, come PlayCanvas, supporta modelli 3D come: Maya, 3D Studio Max, Cinema 4D, Blender, Sketch Up, Carrara e molti altri ancora. Come possiamo vedere dall’immagine successiva, supporta anche molti tipi di formati d’immagine, audio, video e testo. Figura 16: File supportati da Unity 3D

Formati immagine

Formati audio

.psd

.jpg

.png

.mp3

.ogg

.gif

.bmp

.tga

.wav

.mod

.tiff

.iff

.pict

.aiff

.dds

Formati video .mov

.avi

.mpeg

.mp4

Formati testo .mpg

.testo

.xml

.htm

.html

.bytes

L’ambiente di sviluppo di Unity è composto da un motore grafico, un motore fisico molto potente e un live game preview. Quest’ultimo permette di visualizzare in real-time le modifiche apportate durante le operazioni di programmazione.

Figura 1:

Con Unity 3D, come detto precedentemente, si possono realizzare videogames 3D, ma anche altri contenuti interattivi, quali visualizzazioni architettoniche, ambientazioni tridimensionali, shorts films, piccoli video tridimensionali con costruzioni in tempo reale e quindi perché no, anche configuratori in 3D. Il linguaggio di programmazione di Unity 3D è chiamato UnistyScript che a sua volta è sviluppato usando due tipi di linguaggi di programmazione: C# e JavaScript. Unity 3D essendo un software può essere scaricato dal sito ufficiale della Unity Technologies e installato sul proprio PC. Il software ha una versione base gratuita che permette di svolgere molte attività per la creazione di contenuti. Anche le funzionalità per la creazione di applicazioni Android o iOS sono gratuite. Per altre funzionalità professionali esistono dei Plugin a pagamento oppure è acquistabile la versione Unity Pro che consiste nella versione professional al costo di 125$ al mese. Altra caratteristica importante di Unity, è l’utilizzo dell’ASSET STORE: è possibile acquistare o scaricare dallo store esterno di Unity, personaggi, oggetti, ambienti, effetti, script e molti altri elementi sviluppati e messi a disposizione da terze parti. In questo modo si ottimizza il lavoro anche del singolo sviluppatore che sarà in grado anche da solo di realizzare un prodotto di alta fattura disponibile per tutte le piattaforme.

Figura 17: Editor di Unity 3D

Figura 18: Piano delle offerte di Unity 3D

5.1 UNITY 3D VS PLAYCANVAS Unity essendo un programma nato già da qualche anno, rispetto a PlayCanvas, è sicuramente più completo e più complesso per alcuni aspetti. Non vi sono grandi differenze nell’editor dei due programmi in questione, tutto sommato il layout grafico è simile, ma sicuramente Unity mette a disposizione molte più funzionalità, proprietà e comandi rispetto a PlayCanvas. Figura 19: Unity 3D

Iniziamo con alcune differenze:

2D/3D.

Unity permette di sviluppare sia progetti in 2D che in 3D, questo, diventa molto importante e utile quando bisogna mettere insieme le due cose. Per esempio se si vuole realizzare un interfaccia in 2D di un progetto 3D con un semplice bottone si ha la possibilità di cambiare la vista e agevolare, così, il lavoro.

In PlayCanvas tutto ciò non é possibile. Le immagini in 2D non sono visibili nella preview dell’editor. Questo può sembrare banale, ma in realtà, è decisamente frustante per uno sviluppatore, non visualizzare ad esempio la GUI. Il progettista In PlayCanvas deve lanciare la preview (in un'altra finestra del Browser) aprire lo script HTML, quello CSS, e spostarsi in continuazione fra tutte queste pagine del browser aperte per apportare le modifiche, fino a raggiungere il risultato che si desira.

Figura 20: Visualizzazione nell’editor di Unity della preview 3D e 2D

Sistema UI

In Unity, invece, è decisamente più pratico e veloce realizzare l’interfaccia, sia perché si ha la possibilità di passare dalla modalità 3D a quella 2D premendo semplicemente un tasto, ma soprattutto perché Unity, a differenza di PlayCanvas, ha tutto un sistema UI per la gestione dell’interfaccia utente che consente di creare in modo pratico, intuitivo e veloce un’interfaccia. Possiamo realizzare bottoni, scrollbar, scroll view, inserire immagini, testi e molto altro ancora. Creare un’interfaccia responsive è ancora più facile tramite alcune funzionalità all’interno dell’editor, senza dover scrivere nessuna linea di codice, semplificando e velocizzando, così, il lavoro.

Figura 21: Pannello per la creazione della GUI in Unity

Figura 22: Interfaccia di Unity per la creazione della GUI

Inoltre, anche l’attribuzione di metodi o funzioni ad un semplice bottone diventa più pratico e veloce. Un bottone creato con il sistema UI di Unity possiede già alcuni aventi base come può essere il semplice click. In questo modo si può attribuire al bottone lo script e decidere al click quale metodo richiamare. Nel nostro caso si ha uno script con alcune variabili pubbliche di tipo GameObject, Material e String ed un metodo chiamato ChangeStrutturaCassettiera() che assegna all’oggetto il materiale. using UnityEngine; using System.Collections; public class CambioCassettiera : MonoBehaviour { public GameObject struttura1; public GameObject struttura2; public GameObject struttura3; public Material newMaterial; public string StringMat;

}

public void ChangeStrutturaCassettiera() { newMaterial = Resources.Load(StringMat) as Material; struttura1.GetComponent<Renderer>().material = newMaterial; struttura2.GetComponent<Renderer>().material = newMaterial; struttura3.GetComponent<Renderer>().material = newMaterial; }

Figura 23: Assegnazione dei modelli 3D nelle variabili

Una volta completato lo script, si assegna al bottone scelto, si inseriscono nelle variabili (essendo pubbliche) gli oggetti, il materiale e il nome del materiale. Una volta “riempite” si può trascinare lo script nell’evento del click e decidere quale metodo attribuirgli. Figura 24: Assegnazione della funzione all’evento

Animazioni

Un altro aspetto che differenzia Unity da PlayCanvas sono le animazioni. Dalla versione 4.0 è stato introdotto una componente chiamata Mecanim, per creare modelli 3D animati e la gestione di animazioni multiple. Si basa su un formalismo, ben diffuso nel campo dell’informatica, chiamato macchina a stati ﬁniti. Una macchina a stati è un modello per rappresentare sistemi che passano da uno stato all’altro in base a determinate condizioni (nel nostro caso, ad esempio, un’anta del mobile passa dallo stato “chiusa”

Figura 25: Interfaccia Animator

alla stato “aperta” ogni volta che viene selezionata). Ad ogni stato, quindi, corrisponde un’animazione. Questa viene creata precedentemente nell’editor tramite proprietà, frame e coordinate (molto simile a come avviene la creazione di animazioni in programmi come After Effects di Adobe). Mecanim ha il vantaggio di creare una transizione automatica, da uno stato ad un altro, ottenendo un risultato complessivo più morbido e naturale. Un altro punto di forza di Mecanim sta nella sovrapposizione di più animazioni, ovvero, è possibile su un unico modello aggiungere più stati a quelli già esistenti. Nel configuratore che si è realizzato, si ha un unico modello 3D (rappresentato dall’intero sistema giorno), a cui possiamo attribuire diverse animazioni, e quindi stati, senza che questi siano necessariamente correlati. Un’anta del mobile può ancora trovarsi allo stato “aperta” e contemporaneamente possiamo aprirne un'altra.

Scripting

Un altro aspetto fondamentale di Unity 3D è la sezione riguardante lo scripting. Questo è un ingrediente essenziale per tutti i programmi. Anche l’applicazione più semplice ha bisogno di script per funzionare e rispondere a degli eventi. In Unity gli script possono anche essere utilizzati per creare effetti grafici, controllare il comportamento fisico di oggetti o anche implementare un sistema di IA (Artificial Intelligence) personalizzato. Gli script consentono di attivare eventi nell’applicazione, modificare le proprietà dei componenti nel tempo e rispondere agli input dell’utente. Come abbiamo già visto Unity supporta due linguaggi di programmazione: • C# (si pronuncia C-sharp), un linguaggio simile a Java o C++ • UnityScript, un linguaggio progettato specificamente per l’uso di Unity derivato da JavaScript

Figura 26: Scripting

Quando si crea un nuovo script il contenuto iniziale sarà simile a questo: using UnityEngine; using System.Collections; public class MainPlayer : MonoBehaviour { // Use this for initialization void Start () { } // Update is called once per frame void Update () { }

}

Ogni script può essere pensata come una classe, e ognuna di queste può essere collegato ad un GameObject come componente. MonoDevelop è l’ambiente di sviluppo integrato (IDE) in dotazione con Unity, ma volendo è possibile utilizzare qualsiasi editor. Unity, a differenza di PlayCanvas, permette la funzione di debugging degli Script molto importante e inoltre vi è una finestra Console che mostra errori, avvisi e altri messaggi generali ancora prima di lanciare l’applicazione.

La documentazione

Uno dei vantaggi maggiori che Unity offre è data dalla documentazione, un aspetto importante soprattutto quando si è alle prime armi e si vuole iniziare ad utilizzare questo programma. La documentazione di Unity è molto vasta ma molto chiara. L’intero

manuale di Unity oltre ad essere suddiviso per capitoli ben precisi, possiede anche una sezione per: • Scripting API • Tutorial • Unity Forums o Unity Answers • Asset Store Insomma, se si ha un problema è impossibile non risolverlo, se non si sa qualcosa è impossibile non apprenderla.

Resa graﬁca, luci e ombre

Figura 27: Creazione dello shader

Come in molti programmi di grafica 3D, anche in Unity non esiste un trattamento davvero realistico della luce, ma il tutto viene simulato attraverso una serie di approssimazioni. Nel mondo reale la luce non si ferma sulle superfici che colpisce ma rimbalza, si riflette, si rifrange nei liquidi. Tutti questi effetti citati non sono impossibili da ottenere, ma vanno simulati uno per uno ed a volte potrebbero essere molto costosi in termini di rendering, fino a risultare impossibili (ad esempio su mobile). Alcuni vengono ottenuti con gli shader (come la riflessione, la rifrazione). Uno shader è quella parte di codice responsabile del comportamento grafico di un materiale. Attraverso diversi algoritmi e calcoli matematici, può gestire come un determinato materiale debba reagire alla luce (se rifletterla o meno), creare uneffetto particolare in prossimità dei vertici di una mesh, determinare se un materiale debba essere trasparente o meno, se il materiale in questione debba avere una sua texture o un suo colore e molto altro. Lo shader, non è altro che il codice che sta dietro al materiale e che ci permette di regolarne le varie impostazioni. Unity mette a disposizione una tonnellata di shader differenti (e se non fossero abbastanza è possibile acquistarne dallo store o crearne di nuovi). Così come gli shader, Unity a differenza di PlayCanvas mette a disposizione anche più tipologie di luci con molti più

parametri da poter gestire. Così come avviene nel mondo del cinema o della fotografia, la luce, le ombre e i materiali potranno dare ad una scena il giusto “feeling”.

Scene

Un altro aspetto per cui si differenziano i due programmi, sono

le cosiddette scene di Unity 3D. Ogni scena può essere vista e considerata come un livello unico. Tramite queste, possiamo rendere il lavoro molto più ordinato, creando singoli livelli, menu e quant’altro. Quando si crea una nuova scena avremo di default una vista 3D, una camera e una luce direzionale, successivamente si può iniziare a creare il nuovo livello. Si possono creare e salvare in modo molto semplice tutte le scene che si vogliono. Per lo sviluppo del configuratore queste scene sono state molto utili per gestire tutto il lavoro. Ogni parte dell’applicazione (zona giorno, zona notte e i complementi d’arredo) é stata suddivisa in scene e successivamente richiamate tramite un menu. Richiamare una scena è molto semplice e veloce. Bisogna aprire “Build Settings”. Qui si può controllare quali scene vi sono, inserirle manualmente se la lista non è completa, selezionarle o desezionarle. Ad ogni scena viene assegnato un numero, tramite questo, possiamo richiamarla. Figura 28: Build Settings

Tutte queste, sono solo alcune delle differenze che vi sono tra Unity 3D e PlayCanvas, ma sono state ritenute le più importanti nell’ottica del progetto da sviluppare. Per queste differenze si è deciso di utilizzare Unity per sviluppare il prototipo funzionante del configuratore in 3D per ALf DaFrè.

5.2 REALIZZAZIONE DEL PROTOTIPO IN UNITY 3D Unity come abbiamo già detto è un programma che permette l’utilizzo di modelli 3D, per questo, si è iniziato il lavoro modellando tutte le scene e i complementi d’arredo di Alf DaFrè ed esportati nel formato FBX. Si è creato un nuovo progetto 3D in Unity e caricato sia i modelli 3D che le texture che saranno utilizzate per la creazione dei materiali e delle icone per l’interfaccia grafica Una volta caricati tutti i modelli nella scena di Unity, si crea una nuova cartella nell’assets chiamata “Resources” per creare tutti i materiali che occorreranno nella scena e che verranno successivamente richiamati nello script. Figura 29: Visualizzazione dei materiali creati su Unity 3D

Tutto lo sviluppo del prototipo, durato circa un mese e mezzo, è proceduto seguendo una serie di passaggi ben precisi; Il primo obiettivo era quello di ottenere una scena statica completa di modelli 3D (ordinati secondo una gerarchia ben precisa), materiali e luci. Figura 30: Creazione della prima scena in Unity 3D

Il secondo obiettivo era quello di potersi muovere nello spazio 3D. Uno degli obiettivi segnati nel brief era quello di poter funzionare sia su un pc che un dispositivo mobile. si è utilizzato un pacchetto scaricato dall’asset store di Unity chiamato EasyTouch. Questo permette di sviluppare rapidamente e facilmente varie azioni sulla base di un gesto touchscreen, pulsanti, joystick ecc. Quello che si voleva ottenere era una telecamera che ruotava intorno ad un punto fisso, ovvero, la scena in 3D. Il funzionamento è molto semplice. Si utilizza un’entity vuota, chiamata “Reference” posizionata nel centro della nostra scena ed una telecamera che diventerà figlio di Reference. Si crea uno script con alcune variabili pubbliche riguardanti i parametri della telecamera in modo da poterne gestire il movimento: public float MaxDistance ; public float MinDistance ; private float zoomSpeed = 1.0f; private float rotXSpeedModifier = 0.25f; rivate float rotYSpeedModifier = 0.25f; private float zoomSpeedModifier = 5.0f; public float minRotX = -20.0f; public float maxRotX = 70.0f;

Una volta assegnato lo script alla telecamera e regolato le variabili, è stato possibile muoversi nello spazio e poter passare allo step successivo. Il terzo obiettivo che si è posto è stato quello di creare un’interfaccia graﬁca per poter assegnare i diversi materiali al mobile. Nel prototipo di PlayCanvas come si è già detto, i mobili che andavano a comporre la scena erano stati suddivisi in gruppi rappresentati da 4 bottoni che una volta selezionati aprivano la palette colori per quel determinato gruppo di mobili. Per unificare la GUI del configuratore, in Unity, si è deciso di eliminare i 4 bottoni e realizzare direttamente diverse palette colori in base al numero dei gruppi che vi sono nelle diverse scene. Si è ritenuto che creare dei gruppi di palette, già preimpostati, sia più facile per l’utente, perché diminuiscono il numero di interazioni da fare e si velocizza la visualizzazione del risultato finale, invogliando l’utente a continuare. Realizzare tutto ciò è stato molto semplice grazie al sistema UI di Unity 3D.

Figura 31: Gerarchia della Canvas per la realizzazione dell’interfaccia

Figura 32: Realizzazione della GUI

Nell’editor di Unity si è passati alla modalità 2D per poter visualizzare meglio la disposizione dei bottoni nello spazio. Si sono creati tutti i bottoni secondo una gerarchia. Il primo bottone (in basso a sinistra chiamato “color”) è quello che permette di far apparire le palette colori. A questo bottone è stato attribuito uno script che non fa altro che rendere visibile o nascondere la palette colori attraverso il metodo FadeOutIn(). Alla palette colori (chiamata “Panel”) è stata aggiunta sia una componente di Unity chiamata CanvasGroup che regola il canale Alpha (ovvero la trasparenza) ed assegnato un tag. Script FadeOut:

public class FadeOut : MonoBehaviour { CanvasGroup canvasGroup; GameObject PanelZonaGiorno; public string PanelTag; void Awake() { PanelZonaGiorno = GameObject.FindGameObjectWithTag (PanelTag); canvasGroup = PanelZonaGiorno.GetComponent<CanvasGroup> (); } public void FadeOutIn() { if (PanelZonaGiorno.GetComponent<CanvasGroup> ().alpha == 1.0f) { StartCoroutine ("FadeOutGo"); } else if (PanelZonaGiorno.GetComponent<CanvasGroup> ().alpha == 0.0f) { StartCoroutine ("FadeInGo"); } } IEnumerator FadeOutGo() { float time = 1f; while(canvasGroup.alpha > 0) { canvasGroup.alpha -= Time.deltaTime / time; yield return null; } }

}

IEnumerator FadeInGo() { float time = 1f; while(canvasGroup.alpha < 1) { canvasGroup.alpha += Time.deltaTime / time; yield return null; } }

All’interno del Panel troviamo, a sua volta, un’immagine (Scroll1/2) a cui sono state aggiunte le componenti Scroll Rect (per poter eseguire lo scroll ed accedere agli altri bottoni) ed una Mask (per rendere invisibili i bottoni al di fuori del riquadro). Infine, ad ogni bottone è stato assegnato lo script per poter cambiare il materiale. Nel caso dell’armadio dovendo assegnare il materiale contemporaneamente a 30 pezzi si è deciso di semplificare lo script creando un Array.

using UnityEngine; using System.Collections; public class ArrayZonaNotte : MonoBehaviour { public GameObject[] Armadio; public Material newMaterial; public string StringMat; void Start () { Armadio = GameObject.FindGameObjectsWithTag("ModelGroup"); for (int i = 0; i < Armadio.Length; i++) { Debug.Log (i + "il nome" + Armadio [i].name); } } public void cambioColoreArmadio() { for (int i = 0; i < Armadio.Length; i++) { newMaterial = Resources.Load (StringMat) as Material; Armadio [i].GetComponent<Renderer> ().material = newMaterial; } } }

Figura 33: IInterfaccia del prototipo funzionante

Grazie a questo script è stato possibile cambiare colore all’intero mobile in un solo click e con poche linee di codice. Ottenuti tutti i bottoni che riescono a cambiare i materiali agli oggetti si è passati a realizzare la parte riguardante l’apertura delle ante. Anche qui, come in PlayCanvas, si è utilizzato il Physics. Raycast il funzionamento è lo stesso, l’unica cosa che cambia è il codice essendo due linguaggi differenti.

Unity: using UnityEngine; public class ExampleClass : MonoBehaviour { void Update() { Ray ray = Camera.main.ScreenPointToRay(Input.mousePosition); RaycastHit hit;

}

if (Physics.Raycast(ray, out hit, 100)) Debug.DrawLine(ray.origin, hit.point);

PlayCanvas: PickerRaycast.prototype.onSelect = function (e) { var from = this.entity.camera.screenToWorld(e.x, e.y, this.entity.camera.nearClip); var to = this.entity.camera.screenToWorld(e.x, e.y, this.entity.camera.farClip);

};

var result = this.app.systems.rigidbody.raycastFirst(from, to); if (result) { var pickedEntity = result.entity; pickedEntity.script.pulse.pulse(); }

L’unica differenza fra i due programmi sta nel come vengono animati gli oggetti. In PlayCanvas, il movimento in avanti dei cassetti e la rotazione dell’anta è data tramite lo script con i tradizionali metodi Rotate() e translate().

Es. rotate: var Rotate = pc.createScript('rotate'); Rotate.attributes.add('speed', { type: 'number', default: 100 }); Rotate.attributes.add('open', { type: 'boolean', default: false }); Rotate.prototype.initialize = function() { }; Rotate.prototype.setOpen = function ( open ) { this.open = open; }; Rotate.prototype.getOpen = function ( ) { return this.open; }; Rotate.prototype.toggle = function ( ) { this.open = (!this.open); }; Rotate.prototype.update = function(dt) { if ( this.open ){ if ( this.entity.getRotation().y > -0.8 ){ this.entity.rotate(0, -this.speed*dt, 0); } }else{ if ( this.entity.getRotation().y < 0 ){ this.entity.rotate(0, this.speed*dt, 0); } } };

In Unity sono state utilizzate le animazioni per rendere il movimento più fluido e reale. Un’animazione è composta da: • ”Animation”, ovvero, coordinate o proprietà che cambiano in un determinato arco di tempo. • “Animator”, l’interfaccia per il controllo del sistema di animazione Mecanim. Ad ogni oggetto che doveva muoversi è stato aggiunto un tag. Figura 34: Animator di un’anta del mobile Alf DaFrè

Quando la linea del Raycast colpisce un oggetto con quel determinato tag farà partire di conseguenza l’animazione. Script: using UnityEngine; using System.Collections; public class Raycast : MonoBehaviour { public GameObject cassetto2; public GameObject antaSuSuSu; public bool ToggleVarSuSu; public bool ToggleVarCaset; public GameObject antaGiu; public GameObject antaSu; public bool ToggleVarr; public bool ToggleAntaSu; void Start () { antaGiu = GameObject.Find ("anta"); cassetto2 = GameObject.Find ("Cassetto"); antaSuSuSu = GameObject.Find("AntaSuSu"); antaSu = GameObject.Find("AntaSu"); } void Update () { if( Input.GetMouseButton(0)){ RaycastFIrst (); } } void RaycastFIrst(){ Ray ray = Camera.main.ScreenPointToRay( Input.mousePosition) ; RaycastHit hit; if (Physics.Raycast (ray, out hit, 100)) {

}

Debug.Log (hit.collider.name); if (hit.collider.name == "anta") { GoToggleAnta (); } if (hit.collider.CompareTag ("antaSuSu")) { GoToggleAntaSuSu (); } if (hit.collider.CompareTag ("cassetto")) { GoToggleCassetto (); } if (hit.collider.CompareTag ("antaSu")) { GoToggleAntaSu(); }

}

public void GoToggleAnta (){ antaGiu = GameObject.Find ("anta"); Animator anim = antaGiu.GetComponent<Animator>(); ToggleVarr = !ToggleVarr; anim.SetBool("toggle", ToggleVarr); public void GoToggleCassetto (){ cassetto2 = GameObject.Find ("Cassetto"); Animator anim3 = cassetto2.GetComponent<Animator>(); ToggleVarCaset = !ToggleVarCaset; anim3.SetBool("toggle3", ToggleVarCaset);

} public void GoToggleAntaSuSu (){ antaSuSuSu = GameObject.Find ("AntaSuSu"); Animator anim2 = antaSuSuSu.GetComponent<Animator>(); ToggleVarSuSu = !ToggleVarSuSu; anim2.SetBool("Toggle2", ToggleVarSuSu);

} public void GoToggleAntaSu (){ antaSu = GameObject.Find ("AntaSu"); Animator anim4 = antaSu.GetComponent<Animator>();

}

ToggleAntaSu = !ToggleAntaSu; anim4.SetBool("toggleAntaSu", ToggleAntaSu);

Queste animazioni sono inoltre state utilizzare per creare sia “l’esploso” dei vari complementi d’arredo che le varie “configurazioni”. Tramite i bottoni è possibile far partire le animazioni. Figura 35: Esploso del complemento d’arredo

Es. script esploso del prodotto: using UnityEngine; using System.Collections; public class Toggle : MonoBehaviour { public GameObject OBJ; public bool ToggleVar; public void GoToggle (){ Animator anim = OBJ.GetComponent<Animator>(); ToggleVar = !ToggleVar; anim.SetBool("toggle", ToggleVar); } } Figura 36: Seconda configurazione del complemento dâ&#x20AC;&#x2122;arredo

Figura 36: Terza configurazione del complemento dâ&#x20AC;&#x2122;arredo

Inoltre, nelle “scene” dei complementi d’arredo, è stata aggiunto un testo descrittivo con un pulsante (non funzionante) che potrebbe far accedere direttamente ad un ipotetica pagina di acquisto del prodotto. Questi passaggi, su per giù, sono stati ripetuti per tutte le composizioni presenti nel prototipo. Come abbiamo detto precedentemente, uno dei tanti vantaggi di Unity è quello di poter utilizzare le cosiddette “scene” come livelli unici a se stanti. Queste “scene” sono state utilizzate proprio per realizzare ogni composizione come un livello unico. Per unirle e richiamarle all’interno del configuratore è stato realizzato un menu, posizionato in alto a destra, che a sua volta apre la lista delle diverse configurazioni e complementi d’arredo che vi sono. Come si è visto precedentemente ogni scena è rappresentata da un numero. Tramite lo script, attribuito ai bottoni, è stato possibile richiamare le scene e visualizzarle. using UnityEngine; using System.Collections; using UnityEngine.SceneManagement; public class LoadScenasedia : MonoBehaviour { public void CaricaScena (int level) { SceneManager.LoadScene (level); } }

Per concludere il lavoro e far partire l’applicazione, si è realizzata una schermata iniziale, ovvero, una “scena” in 2D con due bottoni che corrispondono alle sezioni delle composizioni e dei complementi, per dare la possibilità all’utente di scegliere cosa visualizzare.

Concluso lo sviluppo dell’applicazione si sono testate le diverse tipologie di esportazione di Unity. Si è testata l’applicazione su device Android (smatphone e tablet). Una volta collegato il pc e il device tramite un cavetto USB, switchato la piattaforma di Unity su Android possiamo andare a settare le ultime impostazioni per l’app come: • Inserire le icone. • Inserire splash image. • Settare la risoluzione e l’orientamento dell’app, e altro ancora. Una volta controllato che tutto sia esatto si può fare build e al termine l’applicazione partirà direttamente sul proprio device. L’applicazione essendo abbastanza grande in termini di MB, su smartphone risulta essere molto lenta e inutilizzabile, mentre su un tablet continua ad essere un po’ lenta ma utilizzabile. Come abbiamo visto precedentemente l’esportazione WebGL di Unity è completamente inutilizzabile. Risoluzione, resa grafica e prestazioni risultano completamente alterate e non veritiere. Per ultimo si è esportato un file eseguibile (.exe) per PC, MAC e Linux che risulta la versione migliore per il prototipo del configuratore.

Figura 37: Prototipo su diversi device

Conclusioni

In questo lavoro di tesi si sono descritti e testati due programmi, abbastanza complessi, individuati per poter affrontare lo sviluppo di un futuro configuratore 3D per l’azienda Alf DaFrè. Questi due programmi sono stati ritenuti i più idonei per svolgere sia ora, ma anche in futuro, un vero e proprio configuratore. Se Alf DaFrè decidesse di sviluppare un’applicazione che giri su un browser (per esempio all’interno del loro sito), si ritiene, PlayCanvas, un ottimo mezzo per svolgere il lavoro e creare cosi una WebGL, in modo da poter avere una qualità migliore, sia in termini di resa grafica che in termini di prestazioni da come si è potuto notare dal prototipo realizzato in PlayCanvas Qualora invece si decidesse di voler realizzare una vera è propria applicazione per PC, Android o iOS si reputa Unity 3D, il programma più adatto. Essendo un programma multipiattaforma è stato semplicissimo esportare lo stesso prototipo realizzato sia per desktop che Android. La stessa applicazione, inoltre, è stata testata su diversi dispositivi (tablet e smartphone). Grazie la GUI di Unity creare applicazioni responsive è stato molto più facile rispetto a PlayCanvas Il prototipo di configuratore realizzato in questa sede, è un prototipo che guarda al futuro. Come già detto all’inizio, i configuratori di oggi, si limitano all’utilizzo di immagini 2D e al dare solo la possibilità di cambiare colore. Con l’azienda Magenta srl si è voluto sperimentare utilizzando sia dei modelli 3D singoli ma anche scene complete in 3D. L’utilizzare modelli 3D, invece che immagini, comporta una serie di differenze sia in termini di sviluppo che in termini di prestazioni. Un modello 3D va gestito con programmi appositi che supportano i formati 3D (per questo si sono utilizzati questi due programmi), inoltre il modello ha anche un suo peso (su per giù da un minimo di 400KB fino a 40MB) rispetto ad un’immagine che al massimo potrà pesare 100KB. Creare un’applicazione con molti modelli 3D, comporta, ovviamente, un enorme peso dell’applicazione. Questa infatti non potrà mai essere utilizzata su smartphone perché essendo molto pesante i device mobile non riescono a supportare il carico di lavoro, di conseguenza l’applicazione non gira come dovrebbe, e diventa impossibile l’utilizzo. Il prototipo del configuratore, è stato progettato e sviluppato, pensando alle esigenze di Alf DaFrè per fa sì che uscisse un applicazione utile e al contempo mirata allo “svago” dell’utente. Con semplici click si può: • Applicare un materiale, personalizzando, così, il prodotto. • Interagire con il mobile per visualizzarne non sono l’esterno ma anche l’interno. • Visualizzare le diverse configurazioni di un unico prodotto • Navigare liberamente all’interno di uno spazio 3D.

Informazione e intrattenimento sono infatti i cardini di una comunicazione efficace, e il configuratore non è altro che un “catalogo Alf modernizzato”. Ciò che conta ai fini dell’esperienza dell’utente è la “magia”, ovvero lo svolgere con semplicità il minor numero possibile di operazioni, ottenendo un risultato che sembri il frutto di azioni molto più complesse.

Figura 38: Zona Notte del prototipo Figura 39: Zona giorno del prototipo

Figura 40: Complemento d’arredo del prototipo Figura 41: Configurazione della sedia

Semplicità, fluidità, personalizzazione e scoperta sono le parole chiavi di questo configuratore 3D, che punta ad esaltare le qualità di un’azienda e soddisfare le richieste del mercato.

Figura 42: Condigurazione della sedia Figura 43: Cambio del materiale

Sitografia

http://www.devorm.nl/products/arnhem-sofa http://www.usm.com/it-ch/negozio-e-configuratore/configuratore https://www.slant.co/versus/1047/5149/~unity_vs_playcanvas https://blog.playcanvas.com/playcanvas-versus-unreal-webgl/ https://www.playcanvas.com http://developer.playcanvas.com/en/user-manual/ http://developer.playcanvas.com/en/tutorials/ https://unity3d.com/ https://docs.unity3d.com/Manual/index.html http://demodern.com/projects/helmade http://www.porsche.com/italy/modelstart/all/?modelrange=panamera http://www.zerounoweb.it/osservatori/cloud-computing/dau-quando-l-e spansione-del-business-passa-anche-dal-cloud.html http://www.bergamosera.com/cms/2017/01/30/consigli-per-le-aziende-c ome-monitorare-la-concorrenza/

Laura

a *

285065

Vilardo a

Napoli

04/02/1991

Configurator 3d for interior design

Venezia 15/02/2017

Laura Vilardo