6. Tarocchi - del-2024-unirsm/three-sessions-2024-senigallia GitHub Wiki

Le donne, i cavalieri, l’armi e gli amori, recita il primo verso dell’Orlando Furioso. Nella mente appaiono immagini di un mondo cavalleresco lontano nel tempo ma vicino a noi nelle emozioni e nelle tematiche. Le energie che muovono i personaggi sono le stesse che animano i Tarocchi, un “giuoco” di carte che vede rappresentati cavalieri, innamorati, imperatori, astri e non solo. Analizzando la sceneggiatura ed astraendola, abbiamo dato colore allo spettacolo associando protagonisti e scene ai tarocchi e alla loro simbologia cromatica. Questo è stato il punto di partenza, il cui traguardo vede un approfondimento sugli arcani maggiori, “ombre” della nostra psiche in cui specchiarsi e ri-conoscersi.

colori, simbologia, tarocchi, emozioni, ironia, pose

Giacomo Albani (@giaaaacomo), Mario Falasca (@MarFal00), Rebecca Rizzo (@Pepirizzo), Luca Zanetti (@lucazanetti98).

ARCANO VIII, Giustizia. Ringraziamenti finali. Utilizzo dello sketch 4D. Foto di Giacomo Albani (@giaaaacomo).

• Primo Brainstorming

Nella prima fase di ricerca ed analisi sul poema cavalleresco la classe ha inizialmente posato le prime idee e suggestioni relative a quelle che sono le complesse sfaccettature dell’Orlando Furioso. Introspezione, combattimenti, passioni e terre fantastiche. Il regista, Giorgio Sebastianelli, ha da subito sottolineato l’intenzione di enfatizzare l’ironia del poema, alternando momenti maggiormente introspettivi a scene con un registro più leggero”. Il lavoro svolto si è incentrato su quella che è la dimensione umana ed introspettiva dell’opera, sui contrasti interiori che tormentano e guidano l’uomo. Particolarmente utile allo sviluppo del nostro lavoro sono state le riflessioni a partire dal concetto di mosaico, di sfaccettature e complessità della mente. Di pari passo, la suggestione dei Tarocchi si è rivelata vincente, poiché la dualità delle figure (dritta/rovesciata) suggeriva un collegamento con quello che è il concetto di contrasti ed ambiguità dell’essere umano. Sono state fatte riflessioni anche sui paesaggi sconfinati che fanno da sfondo all’opera, portando l’attenzione su quello che è il tema del viaggio sia fisico che mentale. Il passaggio da luoghi immensi, in cui ci si sente piccoli, a luoghi dove tutto è grande, immaginando di poter entrare nella mente di Orlando e dei personaggi, tanto fantastico quanto "Il viaggio sulla Luna" (elemento iconico dell’opera onnipresente nel corso delle varie fasi di ricerca e sviluppo delle scenografie).

Primi tentativi di associazione scena/colori/parola chiave. L'evento principale di ogni scena ha ispirato una palette cromatica che potesse essere il più immediata possibile.

• Secondo Brainstorming

Nelle fasi successive è stato necessario definire il concept ed estrapolare dalle suggestioni precedenti le caratteristiche necessarie per astrarle in maniera coerente, fondendo se e dove necessario più concetti. Ad esempio il concetto di mosaico, di sfaccettature e di imperfezioni (esseri umani), è stato identificato in quelle che sono le vetrate tipiche delle chiese. Questa suggestione, oltre al materiale, il vetro, suggerisce anche l’interazione con un altro elemento: la luce. Osservazioni sull'interazione tra materiale e luce sono state fatte anche su quello che è il passare del tempo (raggi solari che filtrano dalle vetrate con angoli diversi in base alla posizione del sole per ottenere effetti diversi). Punto d’incontro fra queste nuove suggestioni e i tarocchi è stata proprio la Luna e le sue fasi, pensando quindi alla condensazione di questi insight in un’unica rappresentazione: indicatore temporale, Arcano associato e giochi di luce dipendenti dai primi due fattori. In questa fase è stato necessario redarguire ed evitare derive troppo didascaliche dei concetti estrapolati, piuttosto che comprendere dove l’essere didascalici sarebbe risultato efficace. Un chiaro esempio è proprio quello dei Tarocchi: questi infatti comunicano e portano con loro un immaginario semantico con una forte identità fatta di simboli, senso dell’occulto e talvolta cliché. Allo stesso modo l’idea delle vetrate sarebbe potuta essere un immaginario molto carico visivamente ed emotivamente, col rischio di enfatizzare in maniera eccessiva le scenografie e di togliere attenzioni agli attori sul palco.

Sintesi dei vari brainstorming di gruppo, riuniti in un unico lotus blossom diviso per aree di interesse.

La Via dei tarocchi: La collocazione temporale del poema di Ludovico Ariosto, i soggetti e l’estetica del componimento, hanno richiamato un forte collegamento con le caratteristiche proprie delle lame dei Tarocchi^[1]. Qui personaggi cavallereschi assumono qualità simboliche profonde attraverso connessioni numerologiche, archetipali ed esoteriche. I 22 arcani maggiori non solo riflettono la psiche umana e i passaggi che ognuno di noi attraversa nei vari momenti della vita, ma sono uno strumento efficace nell’autoanalisi se approcciati con consapevolezza e senza pregiudizio. Spogliandoli dal ruolo di strumento divinatorio, è Alejandro Jodorowsky che costruisce un discorso profondo intorno ai tarocchi, riprendendo il mazzo più potente e antico, quello Marsigliese. Una volta compresa la valenza di ogni singola carta, abbiamo associato^[2] personaggi e scene ad ognuna di esse, costruendo una tarologia dello spettacolo utilizzata per impostare e rendere coerente il mood delle scene realizzate dai nostri colleghi. Fondamentale è lo studio sul colore, tema principale del gruppo e tra le caratteristiche più importanti nell’aspetto grafico delle carte. La “via dei Tarocchi” è stata vincente, confermata continuamente da connessioni impreviste all’interno della sceneggiatura (11 colori, 11 scene, 22 arcani maggiori).

I 22 Arcani Maggiori dei Tarocchi di Marsiglia.

Associazione personaggi-arcani.

Il ruolo del colore: I tarocchi di Marsiglia utilizzano in maniera semantica 11 diversi colori, raggruppati secondo categorie che vanno da qualità oggettive come il livello di saturazione e purezza a partire dai principali (nero, bianco, rosso, verde, blu) ad associazioni tipo cielo/terra, aspetti legati alla psicologia dei personaggi e alla profondità del loro animo. In questa ambiguità ogni colore è ambivalente, presentando sempre aspetti positivi e negativi, in un costante rapporto simile a quello del taijitu (☯️) taoista. Sono identificati in totale i seguenti colori: viola, bianco, azzurro, blu, giallo chiaro, giallo scuro, rosa carne, rosso, verde chiaro, verde scuro e nero^[3]. Dal punto di vista dei significati, gran parte di essi ricalca le più tradizionali associazioni culturali europee, che vedono nel viola il significato del sacrificio, la purezza simboleggiata dal bianco e la natura riconducibile al colore verde. Interessante però è la duplice valenza, che apre al doppio delle possibilità in termini di associazione: magma creativo per il nero, immobilizzazione nell’azzurro, o ancora la violenza per il rosso e la follia per il giallo. Da queste considerazioni, a cui Jodorowsky dedica un intero capitolo, abbiamo creato una corrispondenza scena-colore, andando a definire una palette guida in three.js in cui gli 11 colori sono stati a loro volta suddivisi in varianti del suo colore di base, ovvero uno desaturato uno più scuro e uno più luminoso.

La struttura dello spettacolo con associazioni relative al colore e alle lame dei Tarocchi.

"Inseguendo Orlando" è uno spettacolo composto da 11 scene, per cui è apparso abbastanza scontato associare ad ognuna di esse un colore che andasse a definire il mood degli sketch a cui gli altri gruppi stavano lavorando. A questo punto bisognava capire in quale occasione inserire il nostro personaggio. Riflettendo in maniera più ampia rispetto allo spettacolo, ci è sembrato un buono spazio da occupare quello subito dopo il finale^[4], che si espande naturalmente ben oltre la sceneggiatura andando a comprendere i ringraziamenti, i saluti dei vari protagonisti e coordinatori non solo dello spettacolo, bensì del liceo, dell'università e delle sue rappresentanze. Le tempistiche e le modalità sono state poi definite nel particolare durante le prove nel teatro "La Fenice" di Senigallia.

Artista britannico di origine indiana, è celebre per il suo uso rivoluzionario del colore in ambito contemporaneo. Il suo lavoro esplora le profonde implicazioni e le molteplici dimensioni del colore, sfidando le percezioni convenzionali e creando esperienze sensoriali intense andando ad includere elementi riflettenti. Questo aspetto si è legato subito con le tematiche emerse nei vari brainstorming.

Red to Blue, 2011.

Le opere di Turrell sono una ricerca sulla visione che parte dal colore inteso come prodotto legato alla luce. Vengono a crearsi degli spazi altamente immersivi e meditativi, dove il colore si genera manipolando sia luce naturale che artificiale. Associare le qualità estetiche di questi ambienti con valori semantici ripresi dalla psicologia del colore e dalla psicomagia dei tarocchi è stato sin da subito uno degli obiettivi del nostro lavoro.

James Turrell, Ganzfeld APANI (Venice Biennale 2011), 2011, Installation

L'artista venezuelano è stato tra i primi a comprendere il potere del colore utilizzato in ambito contemporaneo. L'utilizzo pionieristico è stato fatto nelle sue famose Cromosaturazioni, dove si viene immersi in ambienti cromatici estremamente forti e mutevoli. Anche qui si innesca una riflessione sul tema della visione a partire dai colori, capaci di influenzare e costruire un'esperienza fisica e psicologica.

Chromosaturation (1965).

Mettendo insieme scenografia, studio sul colore e spazio, tra le reference più complete vi è il lavoro di Robert Wilson, noto per le sue produzioni teatrali avanguardistiche e le sue installazioni visive che combinano arte, danza, design e architettura. Negli spettacoli da lui diretti dal punto di vista artistico e registico, lo spettatore si trova davanti scene immersive che ampliano lo spazio del teatro andando a caratterizzare ed enfatizzare la recitazione in un elegante equilibrio tra attori e visual. Essendo questo uno degli elementi importanti di cui tener conto in fase di progettazione, quella di Wilson è stata una reference particolarmente significativa.

Wilson, Robert. “I Was Sitting on My Patio This Guy Appeared I Thought I Was Hallucinating". Re-staged version premiered on September 20, 2021 at Espace Cardin (Théâtre de la Ville), Paris, France.

Nella prima fase di ricerca di gruppo è stato fondamentale cercare non solo delle reference visive, bensì anche quelle relative al codice. Per questo la nostra attenzione si è focalizzata sugli esempi contenuti all'interno del sito web di Three.js. Tra gli svariati spunti che abbiamo ottenuto, 4 si sono rivelati i più interessanti e coerenti col nostro progetto:

Rotazione di una luce spotlight attorno a un oggetto GLTF. (Reference: https://threejs.org/examples/webgl_lights_spotlight.html).

Animazione di un oggetto GLTF. Questo esempio mostra un personaggio che si muove in uno dei diversi stati di animazione di base, per poi passare in modo fluido a azioni singole. Le espressioni facciali sono controllate indipendentemente con i morph target (Reference: https://threejs.org/examples/#webgl_animation_skinning_morph, Model by Tomás Laulhé, modifications by Don McCurdy. CC0.).

Utilizzo di RectAreaLight per la costruzione di rettangoli luminosi che fungono da background della scena. (Reference: https://threejs.org/examples/?q=light#webgl_lights_rectarealight, by abelnation).

Processo di fusione di diverse animazioni basate su uno scheletro virtuale in modo che le modifiche di un'animazione si aggiungano a un'altra animazione di base, creando così movimenti complessi e realistici. (Reference: https://threejs.org/examples/#webgl_animation_skinning_additive_blending, model from mixamo.com).

Come anticipato nei precedenti paragrafi, i tarocchi sono stati determinanti per la creazione della palette generale dello spettacolo. Innanzitutto, è stato necessario elaborare tre ulteriori varianti degli 11 colori ripresi dai tarocchi in modo tale da averne uno adatto per ogni tipologia di esigenza delle diverse scene create. Lo sviluppo di ciascuna palette cromatica è stato costruito attraverso Adobe Color Wheel con le seguenti modalità: per prima cosa si seleziona l'armonia colore "monocromatici" e si imposta il metodo "RGB", poi si imposta il colore di base con il valore esadecimale ripreso dai tarocchi.

Fase 1: Si imposta l'armonia colore "monocromatici" e metodo "RGB".

Fase 2: Trascrivere il valore esadecimale del colore da noi interessato. Adobe proporrà una sua palette cromatica.

Dalla palette colori creata si riprendono il primo, che corrisponde alla variazione "scuro", il terzo, ovvero il "base", e il quarto e il quinto che rappresentano rispettivamente l'opzione "desaturata" e "neon". Il processo è stato ripetuto per ogni colore, abbassando la luminosità della variante "scuro" al 30%.

Fase 3: Selezionare le variazioni utili al lavoro. In questo caso vediamo la creazione della palette colore del viola. Il procedimento è stato applicato per tutti gli 11 colori ripresi dai tarocchi.

Sulla base di ciò, è stato poi creato un file di three.js univoco e consultabile da tutta la classe contenente i codici colore di ogni variante, rappresentati da 44 sfere.

Palette colore generale dello spettacolo. Gli 11 colori hanno 3 variazioni ciascuno.

Ogni fila di sfere contiene una delle 4 variazioni del colore, in ordine riscontriamo:

Palette colore: Neon.

• 0xE48CFF // Violet
• 0x4DFFFF // Light blue
• 0xffffff // White
• 0x0000FF // Blue
• 0xFFFF00 // Yellow
• 0xFFF3D6 // Light Yellow
• 0xFFCFC0 // Pink
• 0xFF0000 // Red
• 0x93FF22 // Light green
• 0x00CF00 // Dark green
• 0x000000 // Black

Palette colore: Base.

• 0x532B5F // Violet
• 0x9eddec // Light blue
• 0xffffff // White
• 0x0140A6 // Blue
• 0xFFC702 // Yellow
• 0xFED374 // Light Yellow
• 0xFACDA4 // Pink
• 0xE33117 // Red
• 0x92BE23 // Light green
• 0x1E841E // Dark green
• 0x232323 // Black

Palette colore: Desaturato.

• 0xBDA7C4 // Violet
• 0xA3BCC3 // Light blue
• 0xF2F2F2 // White
• 0x2C5DAB // Blue
• 0xBFA132 // Yellow
• 0xBFAE88 // Light Yellow
• 0xCFBDAB // Pink
• 0xA34739 // Red
• 0x6B8037 // Light green
• 0x45631E // Dark green
• 0x3B3B3B // Black

Palette colore: Scuro.

• 0x46324D // Violet
• 0x1F3C43 // Light blue
• 0x9E9E9E // White
• 0x1A2433 // Blue
• 0x896930 // Yellow
• 0x403726 // Light Yellow
• 0x332110 // Pink
• 0x4E201E // Red
• 0x3A402B // Light green
• 0x214521 // Dark green
• 0x000000 // Black

In questa fase abbiamo confermato la presenza di una figura umana all'interno della scena. Questa avrebbe rappresentato le carte dei Tarocchi seguendo ed emulando le pose più o meno iconiche degli stessi. La sfida è stata riconoscere i tratti peculiari di ognuno degli Arcani e comprendere quale sarebbe stata la rappresentazione più corretta. Un errore che avremmo potuto commettere sarebbe stato quello di rappresentare e copiare le pose, dando per scontata una conoscenza da parte del pubblico degli Arcani maggiori, pretendendo di conseguenza la comprensione immediata dell'associazione posa/tarocco. Fondamentale è stato quindi scegliere una chiave di lettura e distinguere il nome dell'Arcano dalla posa (spesso il primo avrebbe suggerito una suggestione più immediata della seconda). Questa sarebbe stata in primis l'ironia, come già sottolineato. Di seguito alcune delle pose ipotizzate nelle prime fasi, dove la figura del character è ancora indefinita.

Prime esplorazioni e analisi delle pose degli Arcani Maggiori

Attraverso il software opensource 3D Blender, i primi rendering sono serviti per testare le qualità estetiche della scena progettata. Sono stati provati vari modelli e scene, per cercare le soluzioni più coerenti con lo spettacolo e la chiave di lettura data dal regista. In questa fase sono subentrate influenze e citazioni rispetto alla comunicazione dello spettacolo che si andava parallelamente definendo. Il nostro soggetto quindi, che incarna i tarocchi attraverso la successione delle pose, viene illuminato da un elemento che colora la scena in riferimento alla palette prima identificata.

Prime prove di scena e soggetto in stile cavalleresco, renderizzato in Blender Cycles.

Character selezionato, renderizzato con pose e materiali che riprendono la comunicazione dello spettacolo. Modello orginale di POLYTRICITY, renderizzato in Blender Cycles.

Mannequin.js è una libreria javascript, basata su Three.js, che permette la creazione, manipolazione e animazione di manichini snodabili in un ambiente web. Ѐ stata scelta per la semplicità con la quale permette di creare pose (posture), utili al progetto per realizzare personaggi in grado di interpretare le figure degli Arcani maggiori dei tarocchi. Mannequin.js include un posture editor, che permette di manipolare con feedback visivo i personaggi, restituendo le pose sotto forma di stringhe di oggetti javascript. Ѐ possibile modificarne i parametri -sotto forma di coordinate X,Y,Z e rotazione- manualmente o tramite script, e interpolare i passaggi tra questi valori per ottenere delle animazioni.

Manichino default di mannequin.js, messo nella posa del matto.

Rotazione delle pose, create su setpose e reimportate su mannequin, accessibili a questo link.

A partire da mannequin.js sono state sviluppate diverse applicazioni, tra cui Setpose.com, pensato come strumento per mettere in posa i manichini da disegno per artisti e illustratori, che a partire dall'editor di mannequin.js permette una gestione più comoda e granulare delle parti del corpo, introduce la possibilità di inserire non solo degli oggetti di scena, bensì una libreria di pose realistiche con la possibilità di salvarle e gestirle dall'interfaccia web. Abbiamo scelto di partire da questo sistema, nonostante non preveda nativamente la possibilità di esportare pose e manichini, per la capacità di gestire comodamente un numero di pose e per appoggiarci a quelle già esistenti; per questo motivo è stato studiato un sistema ad hoc che permette di esportare le pose per integrare nello sketch di Three.js.

Esportare i modelli da setpose si è rivelato piuttosto complesso e laborioso, soprattutto a causa del fatto che si basa su una versione personalizzata e non aggiornata di mannequin.js (setpose attualmente utilizza mannequin 4.41 ed il costruttore di posture alla v6, mentre le versioni di mannequin.js più recenti in uso sono rispettivamente 4.5 e v7), producendo di conseguenza array costruiti in maniera diversa rispetto sia all'originale aggiornato (v7), che a quello non aggiornato (v6). Ѐ stato quindi necessario fare reverse engineering sul processo di costruzione delle pose nelle diverse versione per studiarne il funzionamento e rapportarne coordinate e posizione negli array.

// un esempio di stringa ottenuta dal posture editor ufficiale è:
{"version":7,"data":[[0,3.8,0],[0,-90,0],[0,0,-2],[0,0,5],[6,0,0],[0],[-6,-6,-0.6],[-6,0,0],[0],[6,6,-0.6],[7,-0.6,-5],[15],[5,0,0],[-90,70,75,0,10,0,10],[0,0,10,0,10,0,10],[0,0,10,0,10,0,10],[0,0,10,0,10,0,10],[0,0,10,0,10,0,10],[-7,0.6,-5],[15],[-5,0,0],[90,-70,75,0,10,0,10],[0,0,10,0,10,0,10],[0,0,10,0,10,0,10],[0,0,10,0,10,0,10],[0,0,10,0,10,0,10]]}

// mentre una stringa ottenuta da setpose della stessa posa è:
{"version":6,"data":[[0,0,0],[0,-90,0],[0,0,-2],[0,0,5],[6,0,0],[0],[-6,-6,-0.6],[-6,0,0],[0],[6,6,-0.6],[7,-0.6,-5],[15],[-15,0,0],[10,10],[-7,0.6,-5],[15],[15,0,0],[10,10]],"props":[null,null]}'

Prima di tutto è stato necessario ricavare la stringa della posa dall’editor di setpose.com, che a differenza del posture editor ufficiale non prevede alcuna opzione di esportazione. Essendo uno basato sull’altro, era molto probabile che il funzionamento fosse il medesimo, e che fosse effettivamente possibile ottenere una stringa di output, richiamando la funzione giusta da console. Per questo motivo è stato necessario studiare il codice del sito, del quale è stato eseguito uno scraping della pagina web (utilizzando https://saveweb2zip.com/en). Una volta formattato, il suo funzionamento si è dimostrato effettivamente coerente con quello di mannequin.js, infatti è stato possibile trovare all’interno del constructor:

get postureString() { return JSON.stringify(this.posture); }

A questo punto, una volta aperta la console sul sito, è stato sufficiente richiedere

model.postureString

per ottenere un output in stringa della posa. Era quindi evidente che le pose, e di conseguenza le stringhe, venissero costruite in maniera differente. Era quindi necessario studiare in quale modo questo avvenisse nelle due versioni per trovare un sistema di conversione da una all’altra.

Console su setpose.com che mostra la stringa di coordinate.

Innanzitutto è stato fondamentale confrontare il js di setpose con quello ufficiale della stessa versione, trovata in precedenza all’inizio del js di setpose.

Verifica della versione di mannequin.js sulla variante modificata da setpose.com.

Dopodichè, è stato necessario accedere alla stessa versione del file ufficiale, per cui sono stati verificati i file contenuti nei diversi commit alla repository. Una volta trovata la versione corretta, è stato analizzato il codice originale per individuare il costruttore e rapportarlo ad una stringa ottenuta dal posture editor, per poi fare lo stesso con il codice di setpose. Utilizzando la console è stato possibile verificare la corrispondenza delle coordinate del codice disassemblato con quelle effettive del manichino.

Composizione della posa nel contructor di mannequin.js 4.41 originale.

Composizione della posa nel contructor di mannequin.js 4.41 modificato da setpose.

Composizione della posa nel contructor di mannequin.js 4.5 originale.

Controllo della corrispondenza delle coordinate.

L’ultimo passaggio riguarda la comparazione con la versione più recente di mannequin.js, e quindi il raffronto tra questo e i due precedenti costruttori. Una volta trovata la corrispondenza tra i valori mancanti (la v7 permette di regolare anche la posizione delle dita e la posizione del manichino nello spazio nei tre assi, possibilità assenti nella versione precedente che quindi aveva un oggetto con meno valori), è stato sufficiente aggiungere un valore neutro per le coordinate delle dita e per la posizione del manichino, oltre che rimuovere i riferimenti ai props (oggetti di scena), specifici di setpose.com.

Comparazione della stringa v6 e v7, con le rispettive parti assegnate in commento.

Una volta capito come adattare le stringhe ottenute da setpose in modo da funzionare su qualsiasi applicazione basata su mannequin.js, abbiamo creato uno strumento, pubblicato come Mannequin posture updater, live qui, che permette tramite una semplice interfaccia web di convertire le stringhe delle posture non aggiornate e quelle di setpose in posture funzionanti su mannequin.js.

Deepmotion è un tool che sfrutta l’IA per la creazione di modelli 3D riggati ed animati (text-to-3D Animation o Video-to-3D Animation). I test effettuati su questa piattaforma sono stati svolti per identificare un eventuale piano B o alternativa alla libreria di Mixamo. Trattandosi di pose molto specifiche è risultato complicato avvicinarsi ad un prompt vincente e che si avvicinasse alle pose ironiche concettualizzate. Vedi ad esempio la posa relativa all’Arcano del Diavolo. Una delle idee era quella di creare la posa di un idle che emulasse con gli indici due corna dietro la testa. Inizialmente l’indicazione "corna" e "diavolo” non hanno prodotto risultati utilizzabili, comprendendo quindi che la descrizione sarebbe dovuta essere relativa agli snodi e alla posizione delle articolazioni in relazione alle altre parti del corpo (ad esempio “gomiti all’altezza delle orecchie”). Inoltre le tempistiche non hanno permesso un approfondimento, che sarebbe risultato rischioso. La scelta è stata quindi quella di virare interamente sulle pose presenti su Mixamo.com, decidendo quindi di sfruttare e portare a nostro vantaggio il palese mood videoludico delle pose proposte.

Test DeepMotion _ Arcano 15, Il Diavolo. _ Prompt: "Person raising arms, bringing the elbows to shoulder height, with a mocking behaviour. The forearms are vertical and the wrists ar [Inpainting] raising both arms and elbows behind the neck. Hands are behind the head, raising both index fingers"

La libreria di mixamo.com offre centinaia di pose animate che possono essere attribuite a qualsiasi modello anche non "riggato"^[5], utilizzando una funzione specifica della piattaforma. Abbiamo quindi selezionato 11 pose (attribuibili una per colore) a cui si sono aggiunte situazioni ironiche e particolarmente efficaci che andassero a creare momenti divertenti e imprevedibili durante i vari ringraziamenti sul palco. Le pose sono state scaricate in formato .FBX, re-importate in Blender e concatenate utilizzando una non linear animation (NLA), associando ogni posa ad un nome da richiamare in Three.js. Questo ha permesso di avere già un’idea dei passaggi intermedi tra le pose andando a creare delle interpolazioni fluide e naturali.

Alcune delle pose selezionate e applicate al personaggio da Mixamo.

Interfaccia del software con le animazioni in successione attraverso la NLA.

Animazione test, Arcano VIIII, L'Eremita, renderizzata in Blender Cycles.

Una prima versione con doppie pareti e cornice luminosa.

Gli esperimenti su Three.js sono stati molteplici, ma tutti estremamente interessanti e ricchi di sfide progettuali che hanno portato a un risultato finale incredibile.

La prima fase si è concentrata sulla creazione della scena su Blender, facendo diverse prove relative a materiali, luci, colori e movimenti di camera, per giungere alla versione definitiva che è stata poi esportata come oggetto GLTF da importare su Three.js. La stessa cosa è stata fatta per la costruzione del character statico e della sua conseguente esportazione. Sin da subito però, si sono riscontrati dei problemi relativi all’orientamento dello sfondo sulla scena di Three.js. Il problema si è reso evidente dopo aver importato il character, poiché era rivolto verso la parete dello sfondo costruito su Blender anziché verso la camera.

Importazione del primo modello creato su Blender come oggetto GLTF su Three.js.

Non solo, il suo posizionamento era decisamente più in basso rispetto a quello dello sfondo, motivo per il quale i piedi risultavano tagliati. Un'altra difficoltà si è riscontrata nella capacità di inserire un colore emissivo intorno al bordo presente sulla prima parete. Dopo aver risolto entrambe le problematiche, siamo passati a quelle successive relative al posizionamento delle luci e delle ombre. É stato aggiunto un pannello dietro che illumina il secondo muro, enfatizzando l’effetto del controluce sul personaggio. Il piano è stato reso infinito, aggiungendo anche la nebbia per sottolinearne l’ampiezza.

Per risolvere il problema dell’ombra quadrata a terra abbiamo aggiunto il cast shadow (false) nella RectAreaLight. Quest’ultima è stata spostata poi più avanti e rimpicciolita per evitare il cono d'ombra creatosi che era troppo grande. Inoltre abbiamo aggiunto l’ombra anche al charater.

Creazione della cornice luminosa e della doppia parete dopo la risoluzione dei problemi iniziali.

Nonostante tutte le migliorie apportate, qualcosa continuava a non funzionare: il piano risultava invisibile a Three.js, motivo per il quale la luce non veniva bloccata dal piano e il character non proiettava nessun tipo di ombra a terra.

Nel frattempo è iniziata anche la ricerca delle pose da implementare nel personaggio. L’idea era quella di mantenere la simbologia dei tarocchi del numero 11, per avere un’ulteriore analogia con la quantità dei colori altrettanto presenti nelle carte.

Grazie all’aiuto del nostro docente, il Prof. Daniele Tabellini @Fupete, siamo passati a una fase successiva della progettazione. L’introduzione di un primer di base con un’ambientazione nativa su Three.js, un character animato in una sola posa e luci e ombre già impostate ci ha permesso di intraprendere nuovi tentativi. Il primo di tutti si è concentrato sulla costruzione del background per tentare di tornare all’idea originale della doppia parete che era stata costruita su Blender.

Prime righe di codice del primer.

Il tentativo successivo si è concentrato sulla volontà di riprendere lo stile visivo riproposto nella comunicazione dell’evento. Quest’ultima infatti presentava come protagonista dei manifesti un omino costituito da un materiale lucente e metallico con lo sguardo rivolto verso una sfera semitrasparente. Per questo motivo abbiamo deciso di ricercare un oggetto GLTF che riprendesse quelle caratteristiche estetiche, enfatizzando ulteriormente la coerenza visiva col progetto di comunicazione. Non solo, abbiamo provato anche a modificare l’ambientazione ricreando la stessa sfera come sfondo. Il risultato era interessante, però non valorizzava la forza del colore e del gioco di luci che la precedente ambientazione invece enfatizzava. Motivo per il quale si è deciso di fare un passo indietro e di mantenere solamente il nuovo character, introducendo un nuovo oggetto GLTF dotato di un materiale specchiato.

Riproduzione della sfera presente nella comunicazione visiva dell'evento.

Gli esperimenti fatti con setPose e mannequin.js si sono rivelati fallimentari, motivo per il quale è stata adottata un’altra strada approfondita nel paragrafo “Da Mixamo a Blender”.

L’idea era quella di creare un unico sketch dentro al quale il nostro character potesse riprodurre, in ordine casuale e con intervalli più o meno regolari, tutte le pose da noi selezionate col passaggio da una posa all’altra in maniera fluida e il più naturale possibile. Per questo motivo sono state aggiunte altre 3 pose “idle”, “run” e “walk” che fungono da intermezzi tra le altre 11, a sottolineare l’aspetto ironico e folle non solo della scena, bensì dell’intero spettacolo. Per prima cosa, è stato ricaricato su Three.js l’oggetto GLTF del character contenente le diverse animazioni, nonché pose, selezionate per il personaggio. Il primo errore è stato nella visualizzazione dell’oggetto GLTF, poiché era come se si fosse duplicato 14 volte e ogni character riproduceva una delle pose aggiunte che, una volta terminata, si interrompeva e non ripartiva in loop.

Tentativo fallimentare di inserimento dell'oggetto GLTF animato dentro alla scena costruita su Three.js.

Il problema è stato poi risolto creando un altro sketch a parte da three-sessions-2024-senigallia che prendeva spunto da un esempio su Three.js (“Skinning and Morph”) per la creazione di una GUI che controllasse le differenti pose caricate nell’oggetto GLTF. Non solo, il passaggio da un’animazione a un’altra era estremamente fluido e ogni posa proseguiva in loop.

Il tasto dolente era proprio la GUI: questo perché avevamo bisogno di un character che si muovesse in autonomia, passando da una posa all’altra in loop senza il controllo da remoto.

Introduzione di una GUI per controllare le pose attribuite all'oggetto GLTF.

Grazie alla revisione del codice da parte del docente @Fupete siamo riusciti a integrare il tutto in un unico sketch all’interno di three-sessions-2024-senigallia. Più nel dettaglio, l’ambientazione creata nel primer con il nuovo character dotato di 14 pose funzionanti, casuali e intercambiabili tra di loro attraverso una serie di intervalli e ripetizioni stabilite nel codice. Non solo, cambiando la posa cambia anche il colore dell’ambientazione che è associato a ciascuna di esse. L’unica costante sono le pose “Idle” che mantengono sempre il colore bianco.

Ulteriori migliore che sono state apportate sono:

• L’introduzione di una seconda variante del materiale del character di colore nero e che si scambia casualmente con quello metallico/specchiante al caricamento dello sketch da tastiera.
• Aggiunta di una variazione dello sketch nel quale è stata cambiata solo la posizione della camera. Nel primo è posizionata frontalmente alla scena, in quest’ultimo è leggermente laterale e ravvicinata.
• Aggiunta di ulteriori pose per arricchire l’animazione, per un totale di 28 pose, delle quali 3 sono gli “Idle” citati in precedenza. Ad ogni posa è stato attribuito un colore che fosse il più adatto per riprendere la simbologia dei tarocchi.

Sketch definitivo con vista frontale.

Sketch definitivo con vista laterale.

Tra gli ultimi esperimenti non inseriti nello sketch definitivo ritroviamo le lucciole, pensate per aggiungere luminosità e tridimensionalità alla scena. Erano però troppo piccole e di fatto non aggiungevano alcun tipo di valore sperato.

Prova di inserimento di lucciole nello sketch.

L'ultimo esperimento consiste nella creazione di un sistema multicam che permette di vedere simultaneamente la scena da diversi punti di vista. Ѐ stato pensato per essere utilizzato durante i crediti finali. Sebbene l'implementazione del sistema (a partire dall'esempio multiple views ), non sia stata particolarmente complicata (specialmente dopo aver rimosso tutte le parti non essenziali grazie a https://sbedit.net, che permette di modificare codice di Three.js con preview in tempo reale) sono stati riscontrati problemi in relazione agli orbitcontrols: se rimossi non consentono di visualizzare correttamente il contenuto delle diverse viste. Essenzialmente, il sistema si basa su due parti fondamentali: vengono stabilite le diverse viste all'interno di un array di oggetti (e in queste viene stabilito anche il posizionamento del riquadro della vista, così come angolo, distanza e zona [tramite setScissor] della camera);

const views = [
    {
        left: 0,
        bottom: 0,
        width: 0.5,
        height: 1,
        eye: [0, 300, 1800],
        up: [0, 1, 0],
        fov: 30,
        updateCamera: function (camera, scene) {

            camera.lookAt(scene.position);

        }

    },
    {
        left: 0,
        bottom: 0, ...
];

durante il rendering vengono create tante camere quante sono le viste, a ognuna delle quali sono associati i valori dati alle viste.

for (let i = 0; i < views.length; ++i) {

            const view = views[i];
            const camera = view.camera;

            const left = Math.floor(windowWidth * view.left);
            const bottom = Math.floor(windowHeight * view.bottom);
            const width = Math.floor(windowWidth * view.width);
            const height = Math.floor(windowHeight * view.height);

            renderer.setViewport(left, bottom, width, height);
            renderer.setScissor(left, bottom, width, height);
            renderer.setScissorTest(true);
            renderer.setClearColor(view.background);

            camera.aspect = width / height;
            camera.updateProjectionMatrix();
            view.updateCamera(camera, scene);
            renderer.render(scene, camera);
        }

Esempio di utilizzo della multicam.

Seguendo il processo dall'ideazione al codice in Three.js, si arriva al suo inserimento (assieme a quelli degli altri gruppi di lavoro) all'interno di una "scatola" che permette di gestire e controllare le varie scene in tempo reale durante lo spettacolo. Basandosi sul gestore di pacchetti npm, il software realizzato da @Fupete utilizza la tastiera del computer assieme al touchpad per navigare e controllare gli sketch. La metafora che rende meglio l'idea è quella dello strumento musicale in cui il visivo si sostituisce alla musica. Come in quest'ultimo caso, è il ritmo, la conoscenza dello spartito, ossia lo spettacolo, e anche la capacità di improvvisazione che garantisce una performance efficace.

Lo script JavaScript ottenuto utilizza Three.js per creare una scena 3D interattiva con un modello umano animato e un sistema di illuminazione avanzato. Inizia importando GLTFLoader, OrbitControls, RectAreaLightHelper e RectAreaLightUniformsLib. Vengono dichiarate variabili globali per telecamera, scena, animazioni, controlli, caricatore GLTF, mixer di animazione, materiali e luci. La funzione principale sketch() configura la scena, definisce le animazioni, gestisce il ridimensionamento della finestra, abilita i controlli della telecamera, crea il terreno, carica il modello umano, imposta le luci e aggiorna continuamente la scena. La funzione dispose(), infine, pulisce e libera le risorse quando la scena non è più necessaria. Ne risulta una scena che cambia in maniera controllata e automatica variando animazione e colore, mentre tramite l'interazione con la tastiera è possibile passare da un setting all'altro, per un totale di 3 scene.

L'utilizzo di Three.js, open-source e non oneroso in termini di potenza di calcolo e hardware, ha reso possibile il caricamento e la gestione di modelli 3D a cui sono attribuibili qualità fisiche ed estetiche visualizzabili in tempo reale, senza sacrificare qualità in termini di resa grafica. Il GLTF^[6] del nostro modello è stato importato e "lavorato" in sketch differenti, ognuno con parametri propri che andassero a definire l'inquadratura, la posa, il ciclo di pose da iterare e il colore attribuito alla scena ad ognuna di esse. In particolare, la corrispondenza tasti/scena/caratteristiche è la seguente:

• 4+B: Soggetto visualizzato frontalmente come un'ombra (materiale shader nero). L'animazione è un loop dell'idle statico in cui il personaggio respira rimanendo fermo con dei micromovimenti generati da un lieve noise. Il colore che illumina la scena è neutro.

Idle ombra, prima apparizione del character nel finale. Sketch 4B.

• 4+C: Soggetto visualizzato lateralmente come un'ombra (materiale shader nero). L'animazione è composta da tutte le pose attribuite al personaggio (11 Arcani maggiori + extra) intervallate dai vari idle (statico, camminata, corsa). Cromaticamente la scena cambia colore in relazione alla posa.

Idle ombra in corsa. Sketch 4C.

Idle ombra, ARCANO XI, Gli Amanti. Sketch 4C.

• 4+D: Soggetto visualizzato frontalmente con materiale riflettente (specchio). L'animazione è composta da tutte le pose attribuite al personaggio (11 Arcani maggiori + extra) intervallate dai vari idle (statico, camminata, corsa). Cromaticamente la scena cambia colore in relazione alla posa.

Idle specchio sdraiato a terra. Sketch 4D.

Idle specchio, ARCANO XVI, La Torre. Sketch 4D.

Il risultato, nel complesso, porta in sé il processo e gli obiettivi con il quale è stato progettato e raggiunto. Collocandosi alla fine, chiude e racchiude uno studio che nel nostro caso è stato fatto sullo spettacolo intero, avendo ipotizzato una sua lettura simbolico-cromatica. La selezione finale fatta sulle pose contiene gli Arcani più ricorrenti e principali, una serie di idle che hanno una funzione pratica di separazione tra di essi e alcuni movimenti definiti "extra" (in relazione alla scena e al concept dello spettacolo). Di seguito uno schema che riassume la sintesi della ricerca sui tarocchi e sul colore utilizzata operativamente nello sketch:

Qui l'ordine segue la numerazione delle carte, mentre nella live session si passa da un elemento all'altro in maniera randomica.

Anche le varianti di inquadratura e materiale riprendono concetti condivisi dalle scene presenti, mentre il dinamismo dell'ombra proiettata a terra nello spazio della retroproiezione estende l'area stessa del palco avvicinando il pubblico e inserendolo in un terzo ambiente virtuale. Non ultimo, il colore: diffuso, estremamente presente, crea un effetto "area light" capace di colorare l'ambiente anche oltre la zona degli attori.

Idle "ombra", utilizzato come prima apparizione del personaggio nel finale	Idle "camminata", nella variante materiale specchio

Idle "corsa", nella variante materiale specchio	Idle "spaventato", nella variante materiale specchio

ARCANO I, Il Mago	ARCANO VI, Gli Amanti

ARCANO XII, L'Appeso	ARCANO XI, La Forza

Bonus idle, "salsa"	Idle "finale", uscita di scena

Prove dello spettacolo. Associazione degli sketch alle varie scene. Foto di Sirio Procacci (@sprocacci).

Prove dello sketch dei tarocchi prima dello spettacolo. Foto di Laura Facchini (@laurafacchini30).

Prove dello sketch dei tarocchi prima dello spettacolo. Foto di Giacomo Albani (@giaaaacomo).

Le prove in loco nella mattinata stessa ci hanno permesso di ricalibrare i tempi e la successione delle varie scene. Come anticipato, lo spazio pensato per i nostri sketch era quello subito dopo la fine dello spettacolo, ma provando in maniera sinergica con gli attori, è stata definita la prima apparizione del nostro personaggio poco prima il termine delle battute finali, presentandolo come un deus-ex machina che sta lì ad ascoltare l'attore-Ariosto che commenta (rispettando in pieno la visione del meta-teatro e del far percepire lo spettacolo nella sua "finzione" e "artificiosità") gli eventi appena accaduti. La risata collettiva degli attori sul palco spezza la tensione data dal monologo e dalla sagoma nera sullo sfondo, chiudendo lo spettacolo e facendo passare la scena all'inquadratura successiva in cui anche il nostro soggetto si lascia andare ad una successione di pose più o meno serie, simboliche, buffe. L'utilizzo ordinato dei 3 sketch segue in maniera filologica e causale quanto avveniva sul palco, influenzando e lasciandosi influenzare dal mood creato dalla parte attoriale e musicale, con cui il nostro omino ad un certo punto sembrava interagire e rispondere. Anche il livello di illuminazione e la predominanza del colore si sono rivelate corrette in relazione alla luce ambientale del teatro una volta finito lo spettacolo, integrandosi in maniera adattiva ai vari cambi di scena e di ambiente. Di seguito alcune immagini e filmati dallo spettacolo:

Animazioni del character subito dopo il finale. Utilizzo dello sketch D. Video di Alessia Tiberi (@alessiatibe).

Comparsa del character nel finale. Foto di Luca Trentalange(@LucaTrentalange).

Altre pose durante i ringraziamenti finali. Utilizzo dello sketch D. Video di Mario Falasca (@MarFal00).

Regia dello spettacolo. Foto di Giacomo Albani(@giaaaacomo).

Ringraziamenti finali. Foto di Luca Trentalange(@LucaTrentalange).

Riflettendo sul percorso progettuale, il metodo di lavoro basato su brainstorming altamente divergenti, senza pensare inizialmente alla traduzione "tecnica" di quanto emerso dalla lettura della sceneggiatura, si è rivelato fondamentale e non limitante. La collaborazione con il laboratorio di teatro, ossia un contesto non professionale, ha presentato sfide organizzative, ma ha anche offerto l'opportunità di testare un flusso di lavoro effettivo andando oltre il contesto universitario, ottenendo risultati che fino a qualche giorno prima dello spettacolo erano poco definiti e chiari. Questa condizione ha rappresentato uno degli aspetti più soddisfacenti: il momento delle prove in teatro ha generato un contesto di lavoro sinergico dove i vari pezzi del puzzle hanno preso ognuno il proprio posto, secondo un disegno celato che avevamo costruito senza rendercene, forse, troppo conto. Il designer ha agito come mediatore tra diverse visioni e competenze, utilizzando strumenti open source per garantire una customizzazione del progetto sartoriale. Questo approccio ha permesso di creare un'esperienza unica, non replicabile, che ha valorizzato l'interazione tra tecnologia e performance live. Le tematiche borderline come la psicomagia assieme al simbolismo del colore, hanno giocato un ruolo cruciale nel processo creativo. Questi elementi hanno offerto nuove prospettive e hanno arricchito la narrazione con profondità e significato, tradotti in forme contemporanee e non scontate. L'output finale, con questa sagoma titanica che entra a far parte del gruppo di attori, a volte compresa a volte no, ha generato reazioni anch'esse imprevedibili non solo nel pubblico ma anche tra i ragazzi stessi, creando pieghe all'interno dello spettacolo e dei suoi ruoli. Seppur "invisibile" ai più, la vera parte arricchente è quella raccontata in questo documento: idee, suggestioni, test falliti e tanti file nel cassetto che potrebbero non rivedere più la luce, ma senza i quali non saremmo arrivati qui.

1. L'approccio nei confronti dei Tarocchi è leggero e ironico, in linea con la percezione dello spettacolo in quanto tale e le indicazioni del regista.
2. L'associazione posa-arcano segue le stesse logiche (ad esempio, l'arcano XVIII "La Luna" è rappresentato dal passo del moonwalk)
3. Si tratta dei colori campionati dai Tarocchi di Marsiglia, quelli presi in analisi da Jodorowsky, ritenuti i più "puri".
4. Considerando le esperienze passate, si tratta di un momento abbastanza lungo che può avvicinarsi anche all'intera durata dello spettacolo (circa 1h)
5. Ovvero che ha un "Rig", uno scheletro composto da ossa virtuali a cui sono legate le mesh costituenti il modello che permettono il suo movimento nello spazio.
6. Il GL Transmission Format è un formato di file 3D che memorizza le informazioni sul modello 3D in formato JSON, includendo informazioni sulla gerarchia dei nodi, sui materiali, sulle telecamere, nonché sui descrittori per mesh, animazioni e altri costrutti.

1. Jodorowsky, A. (2004). La via dei tarocchi. Feltrinelli
2. Dean L. (2019). Interpretare i tarocchi. Armenia Edizioni
3. Ariosto, L. (2017). Orlando Furioso. Garzanti
4. Calvino, I. (2012). Orlando Furioso di Ludovico Ariosto raccontato da Italo Calvino. Mondadori.
5. Three.js
6. Mixamo.com
7. Blender.org
8. Sketchfab.com
9. Setpose.com