Blog | Daniele Ferla | 3D Web Marketing, Sviluppo Web, Three.js e Unity

Il Digital Clothing spiegato facile

-

E’ ormai da diverso che si sente parlare di Digital Clothing, associato a termini come Digital Fashion, e-fashion, metafashion e chi più ne ha più ne metta.

In realtà sono tutti termini vicini ad un unico concetto: quello di portare la moda, e quindi l’abbigliamento, in un ambito digitale attraverso l’utilizzo di modelli 3D che ne rappresentano perfettamente lo stile, la manifattura, il materiale e l’indossato.

E’ un concetto non prettamente nuovo in quanto già da anni lo sviluppo di modelli 3D passa attraverso simulazioni digitali (ad esempio usando software tipo Clo3D o Marvelous Designer). Ma è con l’avvento del tanto decantato Metaverso che questo trend sembra essere tornato alla ribalta più che mai.

In questo articolo

DressX oltre il fast fashion

Una recente ricerca afferma che “Una donna su tre ritiene un capo di abbigliamento ‘vecchio’ dopo averlo indossato una o due volte”. Indubbiamente questo apre a diversi scenari tra i quali la rivendita associato al riuso (qualcuno ha detto Vinted?) oppure l’enorme spreco, di denaro e materie, che la produzione di tale abbigliamento genera. Per questo motivo la startup DressX (creata da, guardacaso, due ragazze) è salita alla ribalta perchè propone la vendita di abiti digitali per le proprie fotografie social (soprattutto rivolte a influencers e VIPs). Attraverso il loro store digitale è quindi possibile acquistare il proprio abito digitale e, inviando una fotografia di se con specifiche caratteristiche, ottenere la stessa fotografia con l’abito indossato. In questo modo è possibile proporre il costo dell’abito ad un prezzo molto più basso della controparte cucita in favore di meno scarti derivanti da acquisti compulsivi.

Qui un esempio di cappello che si può trovare a 25 dollari su DressX con un esempio di indossato.

Di seguito invece un divertente, ma esplicativo, video di una ragazza che ha acquistato 2000 dollari di abiti digitali alcuni dei quali, è doveroso dirlo, dal dubbio risultato.

Non proprio tutti gli abiti digitali vengono bene, diciamo

Videogames e abbigliamento di lusso

Indubbiamente il mondo dei videogiochi può essere un trampolino di lancio per il fashion e questo, i grandi marchi, non se lo stanno facendo scappare. Un esempio è una sfilata di abiti digitali per gli avatar di Animal Crossing presentata da Loewe e Prada; oppure le skin di Louis Vuitton presentate nel settembre 2019 per League Of Legends e il più recente caso di Balenciaga in Fortnite. Chiaramente quello che si vuole ottenere è la presenza del brand in un “luogo digitale” dove i propri acquirenti si trovano a loro agio (seppur sparando, costruendo isole o combattendo) proponendo versioni dei propri abiti adattate agli avatar 3D e all’ambiente che l’uno o l’altro videogioco propongono.

La sfilata di moda in Animal Crossing per Nintendo Switch

Abiti digitali nel Metaverso

Il più recente concetto di Metaverso include molti aspetti riguardanti i videogiochi unitamente a quelli del business e della moda. Si pensi ad esempio alla personalizzazione di un avatar 3D rispetto alle proprie fattezze con la possibilità di personalizzare capi firmati e quindi indossarli durante una riunione in Slask, Skype, Microsoft teams o Google Meet. E’ chiaro che questo si porta dietro altri concetti come quello di NFT (Non-Fungible Token) unito a quello di scarsità (o di unicità, se volete vederla in positivo).

Il Metaverso è ancora lontano da venire e, ad oggi, è necessario parlare di molti metaversi specifici in quanto le grandi compagnie (Meta, Microsoft, Amazon, etc) stanno sviluppando “il loro” Metaverso utilizzando tecnologie già presenti sul mercato. L’obiettivo potrebbe essere quello di arrivare ad uno standard (sia di piattaforma, sia di formati) che permetta ai creatori di contenuti di lasciar correre la propria fantasia invece di rincorrere gli aspetti tecnici. Sono proprio questi, i creatori di contenuti, la leva che serve ai metaversi per crescere ed è dunque auspicabile che vengano messi nelle condizioni corrette e semplici di lavorare.

Microsoft Mesh ha l’ambizione di creare una piattaforma che unisca strumenti di lavoro a quelli del Metaverso

Conclusioni

Il concetto di Digital Clothing abbraccia diversi contesti (social networks, videogiochi, metaversi, etc) e può essere approcciato in diversi modi (fotografie editate, modellazione 3D, simulazione 3D, stampa 3D, etc). Quello che è certo è che i brand, soprattutto quelli luxury, si stanno affacciando in modo prepotente a questo nuovo modo di fare moda. Sia per arrivare a nuovi potenziali clienti, sia per espandere il loro catalogo in territori non prettamente fashion.

Difficile dire se il più generico concetto di Digital Fashion è qui per restare in quanto il contesto attuale pone diversi limiti ma anche diversi dubbi sul reale potenziale di questo approccio (non sulla tecnologia 3D, pressoché consolidata). Quel che è certo è che assisteremo ad una “invasione” da parte dei brand in ambiti fino a ieri preclusi in attesa di ritrovarci, tra qualche anno, con un casco in testa e all’interno di una stanza virtuale per presenziare al nostro prossimo colloquio vestiti con un abito di Dolce&Gabbana condividendone poi il successo sul nostro account social preferito.

Come risolvere l’errore ‘Building – Failed to write file: sharedassets0.assets” durante la compilazione di Unity

3D Web Marketing

-

0

Come risolvere l’errore ‘Building – Failed to write file: sharedassets0.assets” durante la compilazione di Unity

Purtroppo quello indicato è uno dei “classici” errori di Unity non documentati e anche poco parlanti a livello di log.

Questo errore sembra essere generato da una referenza interna perduta che non è possibile recuperare se non cancellando e riaggiungendo l’oggetto (GameObject) che ne provoca l’errore. Come detto il log in console non riporta l’oggetto che genera l’errore e quindi, in scene molto ampie, diventa pressoché impossibile trovarne la causa e risolverla.

L’unica soluzione quindi risulta essere quella di creare completamente una nuova scena e copiare tutti i GameObject di quella che genera l’errore dentro la nuova. A quel punto si può rimuovere quella vecchia, salvare quella nuova con il nome precedente e riavviare la compilazione che, nella maggior parte dei casi, dovrebbe ora terminare positivamente.

Errore MySQL Invalid attempt to access a field before calling Read() quando si esegue un backup/export e lo si importa in un’istanza su hosting shared

ASP.NET
C#

-

0

Errore MySQL Invalid attempt to access a field before calling Read() quando si esegue un backup/export e lo si importa in un’istanza su hosting shared

Dopo aver lavorato in locale con MySQL è chiaramente necessario portare il database da locale a online/remoto.

Questa procedura avviene tramite export del database locale (ad esempio con MYSQL Workbench) e poi importazione in remoto sul server online tramite procedura in PHPMyAdmin. La procedura di per sè è molto semplice in quanto l’interfaccia web chiede pochissime informazioni durante l’import.

Può succedere però che per motivi di versioni di MySQL, il database venga importato correttamente ma in un formato incompatibile con le chiamate SQL che si eseguono con l’applicativo (spesso riguardanti nomi e funzione di LIKE).

L’errore ritornato però, investigando nel log dell’applicativo, è del tutto generico:

Invalid attempt to access a field before calling Read()

La connessione al database sembra funzionare ed essere inizializzata correttamente ma la lettura fallisce indicando quell’errore (che tra l’altro riguarda problemi sulle stringhe e troverete online e su Stackoverflow miriadi di esempi).

La soluzione sta nel formato di compatibilità del database importato.
Per risolvere è necessario “droppare” tutte le tabelle del DB (non state a ricostruire il database da zero) e reimportare con PHPMyAdmin il database avendo cura di selezionare l’opzione “SQL compatibility mode” uguale a “MYSQL40” (e non lasciare l’opzione di default).

Awake e Start di Unity spiegati facile

3D Web Marketing

-

0

Spesso quando ci si approccia a Unity si fa confusione tra ciò che deve essere inserito in Awake e cosa in Start. Di seguito le sostanziali differenze.

Awake

Viene eseguita una sola volta, arbitrariamente e non ordinata (in sostanza non si può sapere se un oggetto venca “svegliato” prima di un altro, a meno di averne impostato lo Script Order nelle opzioni di progetto).

Deve contenere unicamente le inizializzazioni delle proprietà interne dell’oggetto a cui si riferisce (le private, le base. o le this. per intenderci). Dunque non può contenere riferimenti ad altri oggetti oppure a Singleton in quanto appunto non se ne conosce l’ordine di esecuzione.

Viene sempre eseguita anche se l’oggetto non è abilitato.

Viene sempre eseguita prima della funzione Start() dell’oggetto stesso.

Start

Viene eseguita una sola volta e può contenere inizializzazioni con riferimenti ad altri oggetti della scena. E’ necessario farlo qui e non in Start() in quanto se lo si facesse in Start() si rischierebbe di utilizzare parametri di oggetti non ancora inizializzati con Awake() in quanto quest’ultima viene eseguita in modo non in ordinato.

Viene eseguita solo se l’oggetto è attivo, e solo la prima volta (successive disattivazioni/attivazioni non rieseguono la funzione).

Viene eseguita dopo Awake() e prima di Update().

Convertire i file GLB ed estrarne gli asset GLTF e le mappe

-

0

Convertire i file GLB ed estrarne gli asset GLTF e le mappe

Cosa è un file GLB

Il file 3D formato .glb è un formato binario che fa da contenitore per il formato .gltf e le mappe grafiche (png, tga, jpeg, etc), molto simle al concetto dello ZIP. Contiene diverse informazioni tra cui le camera, le gerarchie, i materiali, le mappe, i json e altri file binari. Si scegli di utilizzare il file .glb invece che .gltf in quanto riduce molto la dimensione del file file, anche del 30%.

Come convertire un file GLB

Capita spesso, soprattutto in ambito web e nei configuratori online, di avere a che fare con file GLB e la necessità di ottenerne il contenuto. Per estrarre il contenuto di tali file viene in aiuto glTF-Shell-Extensions che è possibile trovare su Github.

E’ davvero un componente facilissimo in quanto, una volta installato, aggiungerà un menu contestuale a tutti i file .glb permettendo, tramite la voce “Unpack to glTF…”, di generare una cartella avente al suo interno tutto il contenuto del file GLB.

Qui il repository del progetto su Github
Qui l’ultima versione compilata per Windows

Convertire da GLTF a GLB

glTF-Shell-Extensions permette anche di covnertire e compattare un file GLTF in un file GLB, nella stasse modalità descritta sopra. Semplice ed intuitivo.

Errore “The specified path, file name, or both are too long” durante la compilazione in Visual Studio

C#

-

0

Errore “The specified path, file name, or both are too long” durante la compilazione in Visual Studio

Recentemente mi sono imbattuto in questo tipo di errore durante la compilazione di un progetto web in Visual Studio 2017 (ma è un errore noto anche in Visual Studio 2019):

“The specified path, file name, or both are too long. The fully qualified file name must be less than 260 characters, and directory name must be less than 240 characters.”

oppure, in italiano:

“Il percorso, il nome o entrambi i nomi di file specificati sono troppo lunghi. Il nome del file completo deve essere inferiore a 260 caratteri, e il nome della directory deve essere inferiore a 240 caratteri.”

In sostanza il compilatore di Visual Studio non riesce a generare il codice compilato in quanto scrive i file temporanei in una directory che è più lunga di 260 caratteri (e questo è un limite di Windows). Questo capita quando il nostro progetto si chiama con identificativo troppo lungo. Inoltre c’è da sapere che durante la compilazione Visual Studio copia dei files nella directory “C:\Users\[nomeutente]\AppData\Local\Temp\WebsitePublish” che di per sè è già lunga abbastanza.

La soluzione a questo problema è in realtà semplice, si tratta di dire al compilatore di generare i files temporanei altrove.
Per farlo basta editare il file .pubxml (presente nella cartella del progetto \App_Data\PublishProfiles ) aggiungendo come prima riga al primo gruppo <PropertyGroup> presente nel file (dove [nomesolution] è da sostituire con un nome a piacimento:

<IntermediateOutputPath>..\Temp\[nomesolution]\</IntermediateOutputPath>

ATTENZIONE: non modificare il file website.publishproj nella root della solution il quale sembra del tutto simile al precedente ma non va modificato.

A questo punto la compilazione dovrebbe andare liscia generando i files temporanei in una cartella chiamata \Temp nella wwwroot.

NOTA: Potrebbero sorgere dei problemi in fase di compilazione dove nella cartella generata vengano inclusi dei files di una compilazione fallita precedentemente (ad esempio files rimossi, modificati, etc). Se notate stranezze simili il mio consiglio è quello di chiudere Visual Studio, accedere alla cartella C:\Users\[nomeutente]\AppData\Local\Temp e cancellarne tutto il contenuto. Alcune cartelle e/o files chiederanno conferma, altre non si potranno cancellare. Bypassate andando oltre. Questa procedura cancellerà tuti i files temporanei di Visual Studio resettando di fatto la compilazione.

Differenze prestazionali tra InvokeRepeating e StartCoroutine in Unity

-

0

Differenze prestazionali tra InvokeRepeating e StartCoroutine in Unity

E’ chiaro che alcune funzioni di Unity siano state sviluppate più come “utilities mordi e fuggi” che vere e proprie funzioni ottimizzate.

Una di queste è sicuramente InvokeRepeating che permette di chiamare un metodo standard ogni tot secondi (e con un delay di partenza). Questa funzione però, se analizzata con Reflector, espone una problematica principale: si basa sulla Reflection che, a runtime, indubbiamente è un processo MOLTO lento e dispendioso. Per questo motivo il suo uso va effettivamente evitato.

In sostituzione a InvokeRepeating possiamo facilmente usare le Coroutines che invece sono state sviluppate e rese disponibili proprio per ottimizzazioni di questo tipo. Sento già i puritani parlare di “Coroutine sono il male” parlando di chiamata di funzioni nella FixedUpdate, Time.deltaTime, etc etc. ALT! Non è questo il post in cui parlaremo delle prestazioni delle Coroutine.

Quindi, la nostra funzione:

    InvokeRepeating("Fire", 2.0f, 0.5f);

Diventa:

...
StartCoroutine("StartFireSequence_Enumerator");
...

IEnumerator StartFireSequence_Enumerator()
{
        yield return new WaitForSeconds(2.0f);
        while (true)
        {
            Fire();
            yield return new WaitForSeconds(0.5f);
        }
}

Lista degli Shoot’em Up (shmup) a scorrimento con visuale isometrica

-

0

Lista degli Shoot’em Up (shmup) a scorrimento con visuale isometrica

Nell’ultimo anno, lo sviluppo del videogioco Sors Adversa, ci ha portato necessariamente a fare una analisi di tutti i giochi dello stesso genere (in questo caso shoot’em up a scorrimento con visuale isometrica). Ammetto che però non è stato facile in quanto sono veramente pochi gli shmup che corrispondono a questo tipo di genere molto particolare.

Di seguito la lista, ordinata per data di uscita, con il risultato della nostra ricerca.

In questo articolo

Zaxxon (1982)

Super Zaxxon (1982)

H.a.t.e (1982)

Blue Max (1983)

Blue Max 2001 (1984)

Future Spy (1984)

Jet Bomber (1985)

Isolated Warrior (1991)

Viewpoint (1992)

Zaxxon’s Motherbase 2000 (1995)

The reap (1997)

Royal Edoma Engine (2005)

Ke-Tsu-No-Ana (2016)

Sors Adversa [link]

Integrare un visualizzatore 3D in WordPress

-

0

Integrare un visualizzatore 3D in WordPress

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:

Codice HTML

Codice CSS

.viewer-container {
position: relative;
padding-bottom: 65%;
height: 0;
overflow: hidden;
}
.viewer-container iframe {
width: 100%; height: 100%;
position: absolute;
top: 0; left: 0;
}

Nebbia Volumetrica semplice in Unity

-

0

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