Una delle numerose richieste e domande che mi viene posta è quella di poter integrare un visualizzatore 3D (o un configuratore) in una pagina WordPress, sia essa un post oppure una pagina vera e propria.
E’ una richiesta lecita in quanto WordPress è divenuto negli anni il CMS più utilizzato in ambito mainstream (non certamente in ambiti più specifici e professionali) e dunque con la necessità di adattarsi a diversi contesti come ad esempio quello dei prodotti visualizzati in tre dimensioni.
Implementare un visualizzatore è abbastanza semplice in quanto WordPress permette, attraverso i suoi comandi di scrittura, di incorporare facilmente del codice HTML. E’ tutto quell oche ci serve per ottenere ad esempio il risultato sottostante.
L’esempio è realizzato utilizzando il motore grafico e di configurazione di 3DConfigurator.io (di cui trovate info a questo link) in cui ho caricato un modello 3D di uno smartphone.
Di seguito il codice usato nell’esempio di questo articolo:
In alcuni contesti può rendersi necessario implementare un effetto di nebbia volumetrica che copra il pavimento del nostro applicativo o gioco sviluppato in Unity.
Esistono diversi componenti sull’Asset Store, tutti molto potenti e semplici da usare (ad esempio Aura 2). Per il videogioco Sors Adversa a cui stiamo lavorando abbiamo però optato per una scelta molto semplice ma altrettanto efficace.
In sostanza i passaggi sono i seguenti:
Creare un semplice piano orizzontale che copra la scena
Creare un materiale “Legacy Shaders/Particles/Alpha Blended”
Impostarne il colore (grigio per una nebbia standard, verde per un effetto di veleno, rosso per lava, etc)
Impostare il parametro Soft Particles Factor in modo opportuno (circa 0.3)
Applicare il materiale al piano
Il semplice piano orizzontale che ricopre la scena
Le impostazioni del materiale che simula la nebbia volumetrica nel gioco Sors Adversa
Sono da notare alcune specifiche:
Ovviamente la nebbia non ha un “volume” ma ne ricrea unicamente l’effetto
Funziona solo con la camera Prospettica (e non quella Ortogonale) per via delle Soft Particles
La funzione Soft Particles deve essere attiva (si trova in Edit -> Project Settings -> Quality)
Gli oggetti con materiali Transparent o Fade possono dare problemi di sovrapposizione degli effetti di trasparenza
In questo blog trovate diversi articoli scritti da me e basati sull’esperienza nello sviluppo di configuratori online di prodotto. Facendo un passo indietro vorrei invece descrivere in dettaglio di cosa si tratta quando si parla di configuratori e i differenti approcci possono assumere nel rapporto con l’utente.
In questo articolo
Cosa è un configuratore?
Un configuratore online è uno strumento grafico (2D o 3D) che permette, attraverso dati inputati dall’utente, di modificare l’aspetto e le funzionalità di un prodotto al fine di soddisfare esigenze d’uso ed estetiche del prodotto stesso.
Attraverso un configuratore è possibile, ad esempio, cambiare i materiali di cui è composto, incidere scritte, applicare loghi e fotografie, definire dimensioni, specificare opzioni e accessori oppure definire posizionamenti e funzionamenti. A questo link una analisi più dettagliata di tutte le possibilità.
Motore di configurazione online (basato su Desdinova Engine)
Configuratore come strumento di marketing
Una delle possibilità per il quale viene sviluppato un configuratore di prodotto è quella per soddisfare esigenze di marketing. E’ indubbiamente una delle prime possibilità che si intraprendono in quanto permette di rendere configurabili e personalizzabili i prodotti offerti rendendoli accattivanti e semplici da usare. L’utente del sito web o della piattaforma si trova dunque a “giocare” con un sistema di configurazione stimolando la fantasia e la creatività. Il configuratore diventa quindi si uno strumento di marketing che spesso si applica ai prodotti di punta, di stagione o con alta marginalità.
In questo contesto ricadono configuratori che permettono di mandare una richiesta al produttore (una email, un preordine, una distanti, etc).
Configuratore come strumento operativo per la rete vendita
Una delle possibilità dello sviluppo di un configuratore è quello di pensarlo come strumento per la rete vendita. In questo caso quindi l’applicativo diventa un alleato importante durante la trattativacommerciale permettendo all’agente o commerciale di costruire il prodotto cos come il cliente che a davanti lo chiede. Di facile utilizzo sia per chi lo usa ma anche per chi osserva il nascere del proprio prodotto personalizzato.
In questo contesto ricadono configuratori che permettono la connessione al gestionale interno dell’azienda o a piattaforme ad accesso privato e dedicato.
Configuratore come strumento di acquisto
Il fine ultimo di ogni operazione di marketing è quella di vendere. In questo contesto il configuratore, oltre ad poter essere uno strumento di marketing fine a se stesso oppure uno strumento operativo, può anche essere un vero e proprio strumento di vendita online che, dopo la personalizzazione, permette di mettere a carrello e dunque acquistare il prodotto stesso.
In questo contesto ricadono configuratori per ecommerce e piattaforme di vendita online.
In fase di sviluppo si rende spesso necessario registrare quello che viene renderizzato a video nel Game Mode di Unity. Questo per svariate necessità: pubblicazione sui social/siti, dimostrazioni, punto della situazione, invio a collaboratori etc.
Non tutti sanno che Unity ha sviluppato internamente un componente, chiamato Unity Recorder, che permette diverse opzioni di registrazione: movie, animation clip, image sequence e GIF.
Come sempre potete scaricarlo ed installarlo tramite il Package Manager di Unity e testare le differenti versioni (per la versione 2019 esistono diverse preview). A questo link invece trovate la guida ufficiale.
Indubbiamente la fase di backup è una delle più delicate ma anche una delle più importanti, non di meno per un progetto Unity.
Il problema di Unity è che la directory di lavoro rischia di diventare pesante ed ingombrante in quanto il software stesso genera diversi file temporanei. Quando si è esegue il backup della cartella del progetto è bene copiare l’intera cartella del progetto escludendo però le seguenti sotto-cartelle (se presenti):
Library
Builds
Temp
Obj
Logs
UserSettings
MemoryCaptures
.vs
.grandle
Queste cartelle da escludere infatti sono auto-generate da Unity se non presenti quindi assolutamente inutili ai fini del backup stesso. Escludendole si otterrà un risparmio di spazio anche dell’80% (dipendente dalla tipologia di progetto).
Può capitare di avere la necessità di recuperare degli asset grafici (mesh, texture, shader, font, sprite, audio, animazioni, etc) che si trovano nel proprio gioco compilato, magari avendo perduto gli originali.
In nostro soccorso viene un decompilatore di giochi Unity chiamato AssetStudio. In sostanza, scegliendo la cartella dove risiede il gioco compilato, permette di decompilare il progetto e recuperare la gerarchia della scena, le classi e la lista completa degli asset.
All’interno vi è anche un ottimo e utile visualizzatore 3D degli asset da averne una anteprima.
Selezionando l’asset desiderato sarà possibile esportare in formato .obj gli asset desiderati così da averli a disposizione nuvoamente. E’ presente anche una funziona per esportazione multipla di tutti gli asset presenti.
Trovate il repository del progetto su GitHub qui Trovate il file della GUI pre-compilato per Windows qui Trovate una versione recente compilata da me qui
In certe circostanze può capitare di non riuscire più ad aprire un progetto Unity in quanto viene generato un errore di “caricamento del layout della schermata” dell’editor del software. Questo sembra capitare quando si hanno diverse versioni di Unity installate tramite HUB e si è fatto l’aggiornamento di una di esse.
L’errore viene mostrato all’avvio del progetto e, seppur cliccando i pulsanti della finestra, questo non genera alcun effetto.
Di seguito la procedura per risolvere il problema, abbastanza tecnica, ma dal risultato certo.
Premere il tasto [Load Default Layout]
Unity copierà il file di default CurrentLayout-default.dwlt nella directory \Library del progetto interessato
Unity continuerà a dare errore anche premendo gli altri tasti (non premere [Quit])
Accedere a \Library del progetto e copiare il file CurrentLayout-default.dwlt da qualche parte fuori dalla directory
Premere [Quit]
Unity corromperà il file nella directory \Library
Ricopiare il file CurrentLayout-default.dwlt (precedentemente salvato altrove) nella directory \Library e sovrascrivere
In un normale flusso di lavoro che prevede modellazione 3D e programmazione in Unity, capita di lavorare a diversi aggiornamenti dei modelli 3D utilizzati nel progetto.
Capita però di aver già definito in precedenza le impostazioni di importazione, i materiali e le animazioni associate. Eliminare il modello per poi reinserirlo non è quindi la scelta migliore in quanto cancellerebbe tali definizioni (file .meta) rendendo il lavoro laborioso e ripetitivo.
Per fare in modo di aggiornare il modello mantenendo le sue impostazioni attuali basta selezionare il modello interessato dalla cartella dei modelli o dai prefab e selezionare “Show in Explorer” che permetterà di aprire la cartella Unity in cui il modello risiede. A questo punto si può incollare il nuovo modello (soltiamente .obj, .gfb, etc) sovrascrivendolo a quello presente.
Rientrando in Unity il modello o il prefab verrà ricaricato automaticamente manentendo le stesse impostazioni della versione precedente.
Questa procedura risparmia notevole tempo per reimpostare le proprietà del modello stesso, soprattutto i materiali se questi sono numerosi.
In alcune circostanze può capitare di eseguire dei comportamenti che attraversano tutta la gerarchia della scena, solitamente per errore (in quantro è un procedura assolutamente da evitare). In questi contesti viene generato un errore di TLS Allocator seguito da ulteriori due warning sulla memoria.
Pur eseguendo le modifiche per sistemare il codice errato però, tale errore rimane, impedendo l’esecuzione del gioco e il suo funzionamento.
Per risolvere il problema basta riavviare il progetto Unity in quanto una volta che è stata compromessa la memoria massima di Unity questo non riesce più a liberarla, se non attaverso un riavvio forzato dell’applicativo.
Da poco (13 ottobre 2020) messo in commercio il nuovo visore Oculus Quest 2 (by Facebook) e già possibile interfacciarlo a Unity attraverso gli ultimi aggiornamenti di Oculus Integration Toolkit. Vediamo quindi i passi per poter configurare un ambiente di sviluppo valido e ben ottimizzato per lo sviluppo di app e giochi per la realtà virtuale su Oculus Quest.
In questo articolo
Installare Unity 2020 e Android Studio
Scaricare e installare Unity Hub
Accedere al menu Install e installare l’ultima versione di Unity disponibile (la 2020)
Assicurarsi di aver selezionato tra i moduli aggiuntivi anche la voce Android Build Studio e le due sottostanti Android SDK e NDK Tools e OpenJDK
Configurare Unity e l’ambiente di sviluppo
Tramite lo Unity Hub creare un nuovo progetto avendo cura di selezionare l’ultima versione di Unity installata
Accedere poi al menu File -> Build Settings e cambiare la modalità di compilazione da PC, Mac Linux Standalone in Android avendo cura di cambiare anche la voce Texture Compression in ASTC
Non avviare il processo di Build per ora
Accedere al menu Edit -> Project Settings / Player e sotto la cartella Other Settings / Rendering Graphics APIs rimuovere Vulkan
Alla voce Identification / Override Default Package Name spuntare la casella ed inserire un nome di Package valido, ad esempio com.desdinova.oculusquestdemo
Accedere ora al menu Window -> Asset Store e ricercare l’asset gratuito Oculus Integration e aggiungelo al progetto importandolo (installarà nel vostro progetto tutti gli asset e gli script necessari per sviluppare un applicativo per Oculus, prendendosi diversi minuti, anche 15/20)
Potrebbe venir chiesto di abilitare e aggironare alcuni aggiornamenti di plugin OVR, confermando verrà chiesto di riavviare Unity
Per testare velocemente una scena già impostata accedere al pannello Project -> Oculus -> VR – Scenes e caricare una delel scene presenti di demo
Importare il pacchetto Oculus Integration nel progetto Unity
Sbloccare la funzionalità Sviluppatore di Oculus Quest
Scaricare e installare la app Oculus App sul proprio dispositivo smartphone
Associare il proprio visore Oculus Quest 2 attraverso la funzionalità di associazione automatica
Accedere ad Impostazioni -> Altre Impostazioni -> attivare la voce Modo Sviluppatore
Se non avete un certificato accedere online a Developer Certificate e creare un proprio certificato valido (solo la prima volta)
Installare e configurare SideQuest
Accedere al sito SideQuest e installare l’ultima versione disponibile per Windows
Assicurarsi di aver acceso e messo fuori dallo standby il dispositivo Oculus Quest 2
Collegare il dispositivo tramite USB al computer
Il software SideQuest dovrebbe riconoscerlo in automatico (barra in alto a sinistra)
Nel menu in alto a destra selezionare l’icona con una cartella e una freccia verso il basso dal nome “Installa APK file from folder on computer”
A questo punto cercare la vostra build .apk e attendete che venga copiata sul dispositivo (noterete una barra verde sul fondo di Side Quest).
Testare il progetto su Oculus Quest 2
Scollegare dalla USB il visore ed indossatelo
Accedere allo store interno dell’Oculus Quest avendo cura di filtrare (casellina in alto a destra) per “Non riconosciute” (cioè tutte quelle app non ufficiali).
Nell’elenco avviare l’applicazione (che riporterà il nome definito nei primi passaggi)
