Home Blog

Quello che non ti dicono di Phaser 3

Phaser 3 è una potente libreria per implementare videogames (prettamente 2D) sul web sfruttando Javascript e HTML5.

E’ indubbiamente una libreria con una community molto attiva ma molto spesso i problemi, e le loro risoluzioni, scalfiscono solo la superficie delle potenzialità di tale libreria in quanto la quasi totalità degli utilizzi si ferma ad un uso basilare.

Di seguito una raccolta, costantemente aggiornata, di spunti e suggerimenti su argomenti non propriamente “di base” ma con cui sicuramente ci si può scontrare appena si entra nel vivo dell’utilizzo di Phaser 3.

Rimuovere i listeners di una scena

Per rimuovere un listener da una scena si usa this.events.removeListener(”); non molti sanno che però la scrittura ufficiale è this.events.off(”) in quanto la prima è un alias di quest’ultima.

E’ bene invece non usare la funzione this.events.removeAllListeners() in quanto questa funzione rimuove anche tutti i listener interni della scena di Phaser. Si consiglia quindi di usare sempre e solo this.events.off(”) rimuovendo manualmente gli eventi creati.

Alla chiusura di una scena i listeners non vengono rimossi

Chiudendo una scena con this.scene.stop(), i vari listeners attivi non vengono rimossi causando problemi nel ricaricamento successivo della scena (esempio click lanciati due volte). E’ bene quindi appoggiarsi all’evento “shutdown” e rimuovere tutti i listeners attivi (vedere punto precedente).

this.events.on('shutdown', () => {
            //Eventi phaser
            this.events.off('shutdown');  //Rimuovere anche shutdown

            //Eventi custom
            this.events.off(KEYS.EVENTS.GAMEOVER);
            this.events.off(KEYS.EVENTS.ADDSCORE);
            this.events.off(KEYS.EVENTS.REMOVESCORE);
}, this);

Disegnare i limiti del mondo fisico

Molto spesso è necessario, per la sola fase di debug, visualizzare i limiti del mondo fisico della scena. E’ possibile ottenerli tramite l’oggetto this.physics.world.bounds e disegnarli nel modo seguente:

drawBounds() {
        const bounds = this.physics.world.bounds;
        const graphics = this.add.graphics();
        graphics.lineStyle(2, 0xFF1111);
        graphics.strokeRect(bounds.x, bounds.y, bounds.width, bounds.height);
}

Estrusione di Shape SVG in direzioni arbitrare e tagli ad angolo in Three.js

Introduzione

In alcuni contesti specifici, come il trattamento di elementi meccanici provenienti da progettazione CAD, si rende necessario visualizzare a schermo il risultato di una estrusione di tale tracciato così da poterne vedere in tre dimensioni il risultato di lavorazione finale. Contesti più specifici necessitano di estrudere tali elementi in direzioni arbitrarie mantenendone l’uniformità, così come altri necessitano di giunzioni con tagli ad angolo per creare strutture più complesse… pensiamo ad esempio alle cornici dei quadri.

Per il test di questo articolo è stata utilizzata una Shape rappresentate una semplice forma di cuore, utile soprattutto per testare l’approccio in contesti di curve e archi.

Caricamento di file SVG sotto forma di Shape singole

L’oggetto THREE.Shape (derivato da THREE.Path) è un oggetto che permette di disegnare componenti 2D vettoriali nel canvas 3D di Three.js.
Sebbene sia uno strumento molto potente è anche molto complesso da utilizzare quindi il suo uso più frequente è quello di trovarlo implementato nel THREE.SVGLoader. Tale loader estrapola dal file .svg oggetti Path e Shape così da poterli usare per generare la geometria desiderata.

Qui sotto una procedura standard per ottenere le singole Shape dell’SVG che sfrutta la funzione toShape() delle Path:

 const loader = new THREE.SVGLoader();
        loader.load(
            'heart.svg',
            function (data) {
                const paths = data.paths;
                let counter = 0;
                for (let i = 0; i < paths.length; i++) {
                    const shapes = paths[i].toShapes(true);
                    counter = counter + shapes.length;
                    for (let j = 0; j < shapes.length; j++) {
                        let newShape = shapes[j]resize; //Shape corrente
                        //Operazioni sulla shape
                        //...
                    }
                }
            },

            // called when loading is in progresses
            function (xhr) {
                console.log((xhr.loaded / xhr.total * 100) + '% loaded');
            },
            // called when loading has errors
            function (error) {
                console.log(error);
            }
        );

Normalizzazione delle dimensioni della Shape

Uno dei problemi che si deve affrontare durante il caricamento di una Shape è quello che l’unità di misura della Shape può essere diversa rispetto a quella della scena in cui dobbiamo includerla. Per questo motivo si rende necessario normalizzare le dimensioni della Shape (e non della Geometry o della Shape successive).

Una tecnica è quella di utilizzare la funzione Shape.getSpacedPoints(…) che permette di ottenere tutti i punti che compongono la Shape e quindi rimapparli con un fattore di scala unico oppure con dimensioni desiderate.

function GetShapeResized(shape, targetWidth, targetHeight)
{
    const boundingBox = new THREE.Box2();
    boundingBox.setFromPoints(shape.getSpacedPoints(100)); 

    const originalWidth = boundingBox.max.x - boundingBox.min.x;
    const originalHeight = boundingBox.max.y - boundingBox.min.y;

    const scaleX = targetWidth / originalWidth;
    const scaleY = targetHeight / originalHeight;

    const points = shape.getSpacedPoints(100);
    const resizedPoints = points.map(point => {
        return new THREE.Vector2(point.x * scaleX, point.y * scaleY);
    });

    const resizedShape = new THREE.Shape(resizedPoints);
    return resizedShape;
}

A questo link del blog sono spiegate in dettaglio le 2 tecniche utilizzabili.

Generazione di una geometria unificata

Come detto un file SVG può essere composto da molte Shape e non da una sola Shape. Per questo motivo si rende necessario, al termine del caricamento e della normalizzazione, la creazione di un unico oggetto Geometry e non diversi oggetti, in quanto sarebbero dispendiosi e poco controllabili.

La funzione che ci viene in aiuto, durante il caricamento delle Shape dell’SVG, è la seguente:

const result = THREE.BufferGeometryUtils.mergeBufferGeometries(geometriesArray);

Tale funzione permette di unire in un unica geometria tutte le geometrie presenti nell’array di geometrie passato alla funzione. Tale oggetto può essere poi facilmente convertito in Mesh e aggiunta alla scena corrente che la renderizzerà a video.

Creazione di una estrusione lungo direzioni arbitrarie basate su punti

Three.js implementa di base la funzione THREE.ExtrudeGeometry che permette di estrudere una Shape. Uno dei parametri che si possono passare alla funzione è la path lungo cui estrudere la forma. Sebbene questa sia una funzionalità molto interessante soffre di due problemi principali: crea un’unica geometria finale e non è possibile generare geometrie chiuse. Seppur utile i contesti di applicazione sono molto ristretti spesso a demo o semplici trasformazioni di oggetti da 2D a 3D spessorato.

L’obiettivo è invece quello di implementare una funzione che permetta, passando la forma della Shape e una serie di punti 2D, di estrudere la forma nella direzione di quei punti nello spazio, poter decidere se le componenti geometriche sono separate e implementare un metodo per chiudere l’estrusione generata (affinché non vi sia un sormontare tra la prima geometria e l’ultima). Esistono diversi approcci a questo tipo di attività e vanno tutti nell’usare sapientemente gli indici della geometria calcolando l’angolo tra i bordi del contorno e applicando matrici di taglio/trasformazione, rotazione e traslazione ai punti del profilo per ciascun punto del contorno.

for (let i = 0; i < this.pathPoints.length; i++)
{
    let angle1 = 90;    //Arbitrario
    let angle2 = 45;    //Arbitrario

    let cutAngle = angle2 - angle1;
    let oppositeAngle = (Math.PI * 0.5) + angle2;

    let side = new THREE.Matrix4().set(1, 0, 0, 0, -Math.tan(cutAngle * 0.5 - Math.PI * 0.5), 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    THREE.ShapeGeometry(shape).attributes.position.applyMatrix4(side);

    let rotation = new THREE.Matrix4().set(Math.cos(oppositeAngle), -Math.sin(oppositeAngle), 0, 0, Math.sin(oppositeAngle), Math.cos(oppositeAngle), 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    THREE.ShapeGeometry(shape).attributes.position.applyMatrix4(rotation);

    let move = new THREE.Matrix4().set(1, 0, 0, pathPoints[i].x, 0, 1, 0, pathPoints[i].y, 0, 0, 1, 0, 0, 0, 0, 1);
    THREE.ShapeGeometry(shape).attributes.position.applyMatrix4(move);
}
Video dei risultati ottenuti con la tecnica dell’estrusione in direzioni arbitrarie

Tagli ad angoli arbitrari

Come visto il passaggio precedente crea estrusioni lungo direzioni arbitrarie, anche di geometrie che devono essere necessariamente chiuse. E’ possibile però specificare alla funzione di produrre unicamente la Shape estrusa originaria ed utilizzare le estrusioni secondarie unicamente come elemento di rimozione dei punti eccedenti e quindi generare tagli ad angoli arbitrari.

L’espediente che possiamo usare è quantomai semplice: si può definire un booleano che nei cicli di generazione degli indici della geometria risultante escluda quelli che generano la componente grafica dell’estrusione ad angolo. Otterremo così un profilo estruso in due direzioni ma di cui la seconda parte della geometria non viene renderizzata. In sostanza stiamo usando le geometrie estruse unicamente per “scavare” la geometria di interesse. Questo approccio permette di non dover riscrivere la funzione del punto precedente ma invece di riutilizzarla per questo contesto. Seppur con qualche calcolo di troppo risulta comunque la soluzione vincente in termini di implementazione e di riusabilità del codice.

Qui sotto un taglio a 45° in cui viene mostrata, unicamente per debug, l’estrusione usata per generarlo:

Qui sotto due semplici esempi ottenuti con un taglio da 45° e uno da 30°:

Specchiatura della Mesh risultante (se necessario)

Per poter utilizzare la Mesh prodotta anche in situazioni dove il profilo deve trovarsi in situazione specchiata è necessario attuare una semplice operazione di inversione dei punti. L’approccio più semplice è quello di usare un espediente basato sulla scalatura al quale viene passato una unità con valore negativo, sull’asse di specchiatura desiderato.

La semplice funzione da utilizzare è la seguente (specchiatura su asse X):

mesh.scale.multiply(new THREE.Vector3(-1,1,1));

Considerazioni sulla velocità di esecuzione

E’ chiaro che parlando di Three.js e rendering realtime sul web sia strettamente necessario tenere in considerazione la velocità di esecuzione di operazioni così a basso livello. Proprio perchè operazioni a basso livello (siamo partiti da un file SVG caricato da disco, passando da oggetti Path e Shape, da geometrie ricalcolate, estrusioni e tagli arbitrari) esse sono altamente performanti.

Dai nostri test il caricamento di un .svg semplice da disco con la creazione di un riquadro sagomato tramite Shape a forma di cuore ha impiegato tra i 10 e i 15 millisecondi in totale contemplando il caricamento del file, la generazione delle Shape e delle geometrie, la normalizzazione, l’estrusione arbitraria e il taglio di 4 oggetti (uno per lato, colorati nell’immagine sottostante).

Shape estrusa attraverso punti arbitrari (sinistra) e Mesh composta da 4 geometrie estruse e tagliate ad angolo (destra)

Ridimensionare l’oggetto Shape di Three.js

In alcuni contesti specifici dell’uso di Three.js può essere necessario lavorare intensivamente con l’oggetto THREE.Shape (il quale è una estensione dell’oggetto THREE.Path); viene solitamente usato durante il caricamento di file SVG (tramite THREE.SVGLoader) in quanto rappresenta bene un profilo 2D vettoriale.

Lavorando con questo oggetto può rendersi necessario attuare delle operazioni di ridimensionamento o scalatura in quanto spesso le forme posso avere dimensioni eccessive o fuori scala. Per questo motivo di seguito vengono riportate 3 funzioni Javascript fondamentali durante l’uso di THREE.Shape.

Calcolare la dimensione di una Shape

Funzione per il calcolo delle componenti larghezza e altezza (su un piano 2D) dell’oggetto THREE.Shape.

function GetShapeSize(shape)
{
    let boundingBox = new THREE.Box2();
    boundingBox.setFromPoints(shape.getSpacedPoints(100));
    let bbWidth = boundingBox.max.x - boundingBox.min.x;
    let bbHeight = boundingBox.max.y - boundingBox.min.y;
    return { width:bbWidth, height:bbHeight };
}

Ridimensionare una Shape tramite fattore di scala

Funzione per scalare un oggetto THREE.Shape di due fattori di scala distinti (X e Y).

function GetShapeScaled(shape, scaleX, scaleY) 
{
    const points = shape.getSpacedPoints(100);
    const resizedPoints = points.map(point => {
        return new THREE.Vector2(point.x * scaleX, point.y * scaleY);
    });

    const resizedShape = new THREE.Shape(resizedPoints);
    return resizedShape;
}

Ridimensionare una Shape a dimensioni specifiche

Funzione per ridimensionare un oggetto THREE.Shape a valori di larghezza e altezza definiti.

function GetShapeResized(shape, targetWidth, targetHeight)
{
    const boundingBox = new THREE.Box2();
    boundingBox.setFromPoints(shape.getSpacedPoints(100)); 

    const originalWidth = boundingBox.max.x - boundingBox.min.x;
    const originalHeight = boundingBox.max.y - boundingBox.min.y;

    const scaleX = targetWidth / originalWidth;
    const scaleY = targetHeight / originalHeight;

    const points = shape.getSpacedPoints(100);
    const resizedPoints = points.map(point => {
        return new THREE.Vector2(point.x * scaleX, point.y * scaleY);
    });

    const resizedShape = new THREE.Shape(resizedPoints);
    return resizedShape;
}

Quello che non ti dicono di Three.js – Parte 3

Come nella Parte 1 e nella Parte2, ci occuperemo di indicare in questo post tutti quegli spunti e riflessioni su Three.js che da uno studio superficiale della libreria potrebbero sfuggire. Sono argomenti tecnici particolari e profondi che però cercano di mettere in guardia lo sviluppatore da potenziali problemi ed errori.

L’antialiasing sul Render Composer non funziona

E’ bene ricordare che se si utilizza il Render Composer per visualizzare la propria scena, l’attributo antialising:true del renderer non ha valenza. Le uniche due possibilità sono:

  • Aggiungere un FXAA Pass dentro il flusso di render pass prima di renderizzare l’output, avendo cura di passare la risoluzione corretta
  • Passare al WebGLRenderTarget il parametro “samples: 4” (o un valore definito) durante la sua creazione (ma non è compatibile con WebGL1) – Dalla versione 138 di WebGLMultisampleRenderTarget è stato rimosso in favore del parametro samples

Se si utilizza il MaskPass è necessario abilitare lo Stencil Buffer

Se durante l’utilizzo del Render Composer si rende necessario l’inserimento di MaskPass (e ClearMaskPass) è necessario abilitare nel WebGLRenderTarget, passato al momento delle creazione del Composer, il parametro “stencilBuffer: true”

Debuggare il Frame Buffer non è facile

Qualora servisse avere una visualizzazione chiara di tutti i passaggi di rendering del Frame Buffer della scena corrente, l’unica soluzione è affidarsi ad un sistema di monitoraggio esterno. In questo caso si rende molto utile l’estensione Chrome chiamata Spectator.js, installabile attraverso questo link.

Impostare correttamente l’environment map

Quando si imposta l’environmentMap e la background texture di una scena è sempre necessario impostare un ToneMapping del renderer.

Quello che non ti dicono di Three.js – Parte 2

Come nella Parte 1, ci occuperemo di indicare in questo post tutti quegli spunti e riflessioni su Three.js che da uno studio superficiale della libreria potrebbero sfuggire. Sono argomenti tecnici particolari e profondi che però cercano di mettere in guardia lo sviluppatore da potenziali problemi ed errori.

La funzione repeat delle textures di un materiale è condivisa

Da come è strutturata la gestione delle singole textures può sembrare che applicando il .repeat.set questo possa essere fatto indipendentemente su qualsiasi mappa del materiale, ad esempio map(1,1) e emissiveMap(3,3). In realtà non è così in quanto il repeat è condiviso su tutte le mappe del materiale, con questa priorità:

  • color map
  • specular map
  • displacement map
  • normal map
  • bump map
  • roughness map
  • metalness map
  • alpha map
  • emissive map

Questo NON si applica alla “light map”, alla “ao map” e alla “env map” che invece sono riferite ad un uv set differente.

In sostanza Three.js considera che tutto quello che riguarda la definizione del materiale in sé abbia lo stesso repeat, mentre ciò che riguarda la definizione di attività esterne al materiale (appunto luci o ambiente) abbia un repeat differente. E’ quindi inutile impostare tutti i repeat se si hanno mappe diverse ma unicamente quello della color map (se ovviamente si ha la color).

Il calcolo delle dimensioni del BoundingBox di una TextGeometry è sbagliato

Purtroppo il primo approccio che si pensa al calcolo delle dimensioni di un elemento TextGeometry è quello di utilizzare la funzione getSize della geometria, come segue:

let textMeshMeasures = new THREE.Vector3();
textMesh.geometry.boundingBox.getSize(textMeshMeasures);

Purtroppo tale calcolo risulta essere errato in quanto non tiene in considerazioni eventuali scalature, padding etc.

Per eseguire correttamente il calcolo delle dimensioni (width, height, depth) è necessario usare questo approccio (il quale è utilizzato anche nel file BoxHelper di Threejs stesso):

let box = new THREE.Box3();
box = box.setFromObject(textMesh);
let textMeshMeasures = new THREE.Vector3();
box.getSize(textMeshMeasures);

Il raycast può dare problemi con elementi di tipo Line

Ad esempio quando si esegue il raycast per individuare gli oggetti cliccati in scena, l’oggetto Raycaster ritorna un array di intersezioni con tutti gli oggetti coinvolti. Se in scena sono presenti delle mesh creare con THREE.Line può includere intersezioni non veritiere (dopotutto a chi può servire fare un raycast su delle linee). Il consiglio è quindi, prima di interrogare l’array, di eseguire una funzione .filter sull’array.

Per disegnare il raggio è possibile usare questa funzione:

let arrow = new THREE.ArrowHelper(raycaster.ray.direction, raycaster.ray.origin, 100, Math.random() * 0xff0000);

Gestione dello z-fighting

Può capire di dover gestire lo z-fighting per poligoni con la stessa coordinata (ad esempio con z = 0). Lo z-fighting è quell’artefatto grafico dove la pipeline di rendering non capisce quale poligono disegnare prima di un altro e dunque può generare problemi di visualizzazione. Una delle soluzioni è spostare di poco la coordinate per gli elementi che si vogliono renderizzare prima/dopo. In ThreeJS esiste però un altro metodo da applicare al materiale del poligono stesso, da usare nel modo seguente:

material.depthTest: true,
material.depthWrite: false,
material.polygonOffset: true,
material.polygonOffsetFactor: -4

più il valore di Factor è inferiore (anche negativo) e più il poligono viene renderizzato per primo.
E’ da indicare che questo metodo non funziona con poligoni associati a LineBasicMaterial.

Gestione dell’ordine delle trasparenze

Sfortunatamente, l’alpha blending (material.transparent = true) introduce molta complessità nel processo di rendering e rende i risultati molto sensibili all’ordine di rendering. Anche quando si imposta material.opacity=1, si possono comunque ottenere risultati significativamente diversi rispetto a un oggetto opaco con material.transparent = false. Non esistono soluzioni “perfette” che funzionino in tutti i casi, ma ci sono alcune soluzioni alternative che si possono provare:

  • Utilizzare material.DepthWrite = true sui materiali trasparenti
  • Impostare material.transparent=false una volta che l’opacità dell’oggetto è a 1
  • Impostare renderer.sortObjects: true

Quello che non ti dicono di Three.js – Parte 1

Three.js è una potente libreria per implementare WebGL (e quindi grafica 3D realtime) nel browser.

E’ indubbiamente la libreria con la community più attiva (Github, Stackoverflow, etc) ma molto spesso i problemi, e le loro risoluzioni, scalfiscono solo la superficie delle potenzialità di tale libreria in quanto la quasi totalità degli utilizzi si ferma ad un suo uso basilare.

Di seguito una raccolta, costantemente aggiornata, di spunti e riflessioni su argomenti non propriamente “di base” ma con cui sicuramente ci si può scontrare appena si entra nel vivo dell’utilizzo di Three.js

Risolvere aberrazioni visive di Z-buffer dovute alla distanza delle camera

Il problema dello Z-buffer è uno dei più noti in ambito 3D in quanto produce delle aberrazioni visive notevoli in concomitanza con la distanza degli oggetti rispetto alla camera. Questo perché il Depth Buffer non riesce a visualizzare correttamente superfici che si sono in overlap (o quasi).

Per ovviare a questo problema, Three.js espone un parametro del renderer che imposta il Depth Buffer su scala logaritmica e che, se impostato a true (non di default), non mostra aberrazioni di sorta.

renderer.logarithmicDepthBuffer = true;

Qui si può trovare un approfondimento “matematico” al problema.

E’ da segnalare come l’abilitazione di questa opzione possa impattare negativamente sulle performance dell’antialias del renderer.

Ottimizzare le ombre di una scena statica

Qualora si debba lavorare con una scena statica (quindi senza elementi in scena che si muovono come modelli o le luci stesse), è possibile ottimizzare la scena generale disabilitando, dopo qualche istante, l’aggiornamento automatico delle ombre (della shadowMap). Questo farà in modo che nei primi istanti la shadowMap venga generata correttamente ma subito dopo non venga più ricalcolata. Eventualmente, se qualcosa in scena si potrà muovere, si potrà riabilitare e disabilitare tale funzione.

setTimeout(() => { this.renderer.shadowMap.autoUpdate = false; }, 500);

Caricare una immagine HDR ed assegnarla come envMap ad ogni materiale fisico in scena

Per scene statiche è possibile ottimizzare l’uso delle luci escludendo quelle dinamiche in scena (point, direction, etc) ed implementando un ambiente con immagine HDR (un particolare formato “raw” che include tutto lo spettro dei colori). Questa tecnica permette di illuminare gli oggetti in scena utilizzando le informazioni presenti in tale immagine. E’ necessario caricare (attraverso il componente aggiuntivo RGBELoader di Three.js) una immagine .hdr, mapparla come EquirectangularReflectionMapping e impostarla per il background e l’environment della scena, unitamente a specificarla in ogni mappa envMap degli oggetti Mesh presenti.

 new THREE.RGBELoader().load('Contrastata.hdr', function (texture) {
    texture.mapping = THREE.EquirectangularReflectionMapping;
    mainScene.background = texture;
    mainScene.environment = texture;
    mainScene.traverse(function (obj) {
        if (obj instanceof THREE.Mesh) {
            try {
                obj.material.envMap = texture;
                obj.material.envMapIntensity = 1.0;
            } catch{ console.log(obj.name + ": setting envMap ERROR"); }
        }
    });
});

Qui il download della immagine HDR dell’esempio.

Flippare le mappe dei materiali di un file GTLF/GLB sull’asse verticale (V)

Sembra essere una prerogativa del formato .gltf/.glb ma, qualora si volesse applicare una mappa ad un materiale di un file esportato in tale formato, è necessario invertire l’asse verticale della mappa UV (quindi sull’asse V).
Di seguito un modo semplice per flippare entrambi gli assi a piacimento.

let repeatX, repeatY = 1.0;
let flipU = false;
let flipV = true;
texture.center.set(0.5, 0.5);
texture.repeat.set(repeatX * (flipU ? -1 : 1), repeatY * (flipV ? -1 : 1));

Aggiungere un set di coordinate UV2 aggiuntivo ad una mesh

Può capitare di dover aggiungere un set aggiuntivo di coordinate ad una mesh, ad esempio per collocare una aoMap generata custom. Per fare questo l’unico modo plausibile è quello di duplicare il primo set (solitamente già presente) attraverso questa semplice associazione:

child.geometry.setAttribute('uv2', child.geometry.attributes.uv);

Gestire le coordinate UVs in un modello GLTF

Come da guida di Three.js, la mappa di Ambient Occlusion (aoMap) e quella delle luci (lightMap) necessita di un set di UV differente rispetto alle altre mappe dei materiali. Questo perché è logico pensare che il primo set riguardi la possibilità di ruotare, ripetere o scalare a piacimento l’aspetto estetico del materiale, mentre il secondo riguarda informazioni di mappa proveniente da un calcolo di scena che tendenzialmente è fisso (luci, ombre, occlusioni, etc).

Il formato GLTF, per quanto riguarda le UVS, considera questi assunti:

  • Se è presente una sola UV: questa viene impostata sull’attributo geometry.attributes.uv (solitamente la Color Map)
  • Se sono presenti due UVs: sull’attributo geometry.attributes.uv viene associata la Baked Map (es: aoMap), sull’attributo geometry.attributes.uv2 viene associata la Color Map

Come si può immaginare questo crea non pochi problemi in quanto la Color Map (la mappa principale di un materiale, presente praticamente sempre) si può trovare in due posizioni diverse in base ai casi (uv o uv2). Per questo motivo può essere necessario prevedere una modalità per invertire le mappature in modo da riportare la Color Map sempre sulla uv (e non uv2), cosi:

if (child.geometry.attributes.uv != null && child.geometry.attributes.uv2 != null) {
    let tempUV = child.geometry.attributes.uv2;
    child.geometry.setAttribute('uv2', child.geometry.attributes.uv);
    child.geometry.setAttribute('uv', tempUV);
}

Ottimizzare il filtro anisotropico

Il filtro anisotropico applicato alle mappe dei modelli permette di ridurre la sfuocatura delle texture sulla distanza. Di base questo valore è 1, oggettivamente molto basso. In nostro aiuto c’è una funzione del renderer che ritorna il valore anisotropico massimo impostabile dalla scheda video. Tale valore è solitamente un multiplo di 2 (2, 4, 8, 16, etc). Un valore troppo alto però mostra le immagini in modo troppo nette producendo anch’esso (strano a dirsi) artefatti sulla distanza. Per questo motivo il consiglio è di dividere per 2 il valore ritornato dalla funzione del renderer.

texture.anisotropy = renderer.capabilities.getMaxAnisotropy() / 2;

Il metaverso non fa così schifo come crediamo

Oggettivamente il metaverso fa schifo.
Si, perché se provate ad entrarci vedrete dei territori dal costo spropositato, bruttamente arredati, con poche centinaia di persone attive e dalla grafica che ricorda si e no un videogioco del Nintendo 64… di quelli con voto 4/10.

Non è questo che la gente si aspetta dopo aver visto il film Ready Player One del 2018 (Steven Spielberg alla regia) e che descrive ampiamente il senso di metaverso a cui si dovrebbe arrivare, che piaccia o meno.
Oggi la situazione è drasticamente questa, c’è poco da dire.

In questo post vorrei però elencare quali sono gli approcci al metaverso di oggi che possiamo provare a salvare.

E’ uno strumento web 3 per fare marketing 2.0

Non necessariamente quello che è nel metaverso deve rimanere nel metaverso, anzi.

Allo stato attuale è possibile usare il metaverso come contenitore, o strumento, per attività di marketing che non necessariamente rimango nel web3. Basti pensare che tutto quello che viene fatto in un ambiente digitale può essere costruito, confezionato e successivamente distribuito esternamente da quell’ambiente.

Si pensi alla campagna di lancio della nuova birra Heineken Silver (marzo 2022), una birra senza calorie, senza alcool e senza… birra. Ovviamente una campagna irriverente per prendersi in giro (…e forse prendere in giro?) ma che ha fatto parlare di se con le classiche regole del marketing 2.0. Abilmente presentata in Decentraland, il metaverso ha fatto da studio di registrazione e luogo dell’evento in una veste grafica inusuale ma sicuramente sulla bocca di tutti.

Dunque cerchiamo di non pensare il metaverso come uno ambiente chiuso, ad appannaggio di pochi, circoscritto e poco invitante ma proviamo anche a pensarlo come ambiente per sviluppare contenuti utili per le classiche operazioni di marketing che, volenti o nolenti, dovremo continuare a fare.

La presentazione della birra Heineken Silver in Decentraland

Gli strumenti sono democratici (SPOILER: la differenza è nella creatività)

Attualmente i metaversi sono quelli che sono e pressoché tutti con le stesse caratteristiche (mi riferisco a quelli principali, non a software di videoconferenze o rooms condivise venduti come metaversi). Interazione con l’ambiente limitata, grafica ridotta ai minimi termini, animazioni strutturate inesistenti e quant’altro rendono brutti questi spazi digitali. E’ una sorta di democrazia, perché attualmente TUTTI i brand (o chiunque) vengono rappresentati in questi termini ed investire di più non li rappresenta meglio degli altri. E’ come se fosse un “fermi tutti e palla al centro”.

In un contesto simile quindi quello che fa la differenza è la creatività e, in particolar modo, come vengono usati strumenti e concetti di tutti per sfruttare la potenzialità del metaverso. Si pensi ad esempio al progetto lanciato a marzo 2022 di Gucci dove si è pensato di aprire una sartoria digitale in The Sandbox che implementa i concetti di NFT, crypto valute, arte digitale, digital clothing e avatar personalizzati coinvolgendo gli utenti dalla fase di pre-lancio fino alla realizzazione di capi dedicati (qui un approfondimento).

E’ un ambiente 3D approcciabile da sviluppatori e creatori di contenuti senza skill 3D

Come disse Mark Zuckerberg qualche mese fa nel presentare Meta, il metaverso ha bisogno di creatori di contenuti per essere sviluppato altrimenti si riduce ad essere uno spazio vuoto. L’obiettivo è quindi quello di dare strumenti facili e performanti a tutti coloro che vogliono sperimentare. Per questo motivo nascono e si sviluppano modalità sempre più accessibili: si pensi al Builder di Decentraland oppure la sua stessa SDK. Due modi completamente diversi di creare contenuti ma con lo stesso obiettivo: il primo attraverso un editor che più facile non c’è, il secondo un framework per sviluppatori facilmente comprensibile anche senza conoscenze di 3D profonde.

L’obiettivo è dunque quello che far nascere e crescere skills dedicate a questi mondi così da introdurre sul mercato la domanda, l’offerta e la competizione (tra i creatori e i metaversi stessi).

Il Builder di Decentraland

Conclusioni

Per questa volta cerchiamo di essere innovatori e di vederci della vera innovazione.
Come tale deve però essere vista come un punto di partenza non di arrivo.

Il metaverso che vediamo oggi non è il metaverso del futuro, è come se stessimo giudicando la ruota dei nostri antenati preistorici ma non la Tesla su cui verrà montata secoli dopo.

Essere detrattori non porta innovazione e non porta al futuro a cui tutti accederemo. Proviamo a guardare al metaverso attuale come qualcosa da sfruttare ora e per come è, ma anche da studiare ed evolvere per come sarà.

Il mio consiglio finale?
Fatevi un giro in Decentraland, non serve nemmeno un account (pulsante “Play As Guest” in homepage).

Creare una mappa Cubemap partendo da una immagine 360° panoramica

Per esigenze di visualizzazione di sfondi non interattivi, ad esempio in configuratori 3D, potrebbe rendersi necessaria la creazione di una Cubemap. Questo tipo particolare di texture non è altro che un insieme di texture appositamente creare per dare l’illusione di uno sfondo in movimento rispetto alla camera. E’ un effetto che solitamente per gli skybox dei videogiochi rappresentandone il cielo oppure le stelle ma anche in visualizzatori per ambientare una scena fissa.

E’ però indubbio che non è facile avere sottomano una Cubemap già pronta in quanto composta da 6 mappe. Quello che spesso si ha a disposizione, oppure è più facile generare, è una texture 360° panoramica (scattata con opportune fotocamere).

Di seguito una lista di risorse web e software (gratuiti e non) per generare una Cubemap da una fotografia 360°

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.

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.

Fortine + Balenciaga

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.