Movi Kanti Revo - Parte 1 - Costruire il mondo 3D

Pete LePage

Logo Movi Kanti Revo.

Movi.Kanti.Revo è un nuovo esperimento sensoriale di Chrome realizzato dal Cirque du Soleil e sviluppato da Subatomic Systems, che porta le meraviglie del Cirque du Soleil sul web tramite le moderne tecnologie web.

Costruire il mondo in 3D

L'esperimento è stato creato utilizzando solo HTML5 e l'ambiente è stato realizzato interamente con markup e CSS. Come per i set set sul palco, div, img, piccoli video e altri elementi vengono posizionati in uno spazio 3D tramite CSS. La nuova API getUserMedia ti consente di interagire con l'esperimento in un modo completamente nuovo. Anziché usare la tastiera o il mouse, una libreria JavaScript di rilevamento facciale monitora la tua testa e sposta l'ambiente insieme a te.

Tutto il web è uno stadio

Per creare questo esperimento, è preferibile immaginare il browser come uno stadio e gli elementi come <div>, immagini, video e altri elementi come set di dati posizionati nello spazio 3D utilizzando CSS. Ogni elemento o set viene posizionato sullo stage applicando una trasformazione 3D. Se non hai dimestichezza con la trasformazione translate3d, sono necessari 3 parametri: X, Y e Z. X sposta l'elemento lungo una linea orizzontale, Y sposta l'elemento verso l'alto e il basso e Z sposta l'elemento più vicino o più lontano. Ad esempio, l'applicazione di un transform: translate3d(100px, -200px, 300px) sposterà l'elemento di 100 pixel a destra, di 200 pixel in basso e di 300 pixel più vicino verso lo spettatore.

La costruzione dell'Auditorium

Diamo un'occhiata all'ultima scena e vediamo com'è compiuta. Tutte le scene sono suddivise in tre container principali: il container World, un container di prospettiva e lo stage. Il contenitore del mondo configura in modo efficace la videocamera degli spettatori e utilizza la proprietà CSS perspective per indicare al browser da dove lo spettatore vedrà l'elemento. L'elemento #perspective-container viene utilizzato per cambiare la nostra prospettiva applicando trasformazioni 3D. Infine, lo stage contiene i set effettivi che saranno visibili sullo schermo.

<div id="world-container">
  <div id="perspective-container">
    <div id="stage">
    </div>
  </div>
</div>

#world-container {
perspective: 700px;
overflow: hidden;
}

#perspective-container {
{ % mixin transform-style: preserve-3d; % }
{ % mixin transform-origin: center center; % }
{ % mixin perspective-origin: center center; % }
{ % mixin transform: translate3d(0, 0, 0) rotateX(0deg) rotateY(0deg) rotateZ(0deg); % }
}

Visualizzazione dello stage

Nello stage, ci sono sette elementi nella scena finale. Spostandosi da un punto all'altro, includono lo sfondo del cielo, uno strato di nebbia, le porte, l'acqua, i riflessi, un ulteriore strato di nebbia e infine le scogliere davanti. Ogni elemento viene posizionato sullo stage con una proprietà CSS transform: translate3d(x, y, z) che indica dove si adatta allo spazio 3D. Abbiamo usato il valore z in modo simile a z-index, ma con la proprietà translate3d possiamo fornire anche un'unità con il valore.

Figura 1: lo stage dal lato
Figura 1: la fase laterale.

La Figura 1 mostra la scena con lo zoom diminuito e ruotato di quasi 90 gradi, in modo da poter visualizzare il modo in cui ogni singolo set viene posizionato all'interno dello stage. Sul retro (più a sinistra) si possono vedere lo sfondo, la nebbia, le porte, l'acqua e infine le scogliere.

Collocare lo sfondo sullo stage

Iniziamo dall'immagine di sfondo. Poiché è il punto più indietro, abbiamo applicato una trasformazione di -990 px sull'asse Z per spingerla indietro nel nostro punto di vista (vedi Figura 2).

Lo stage, con solo lo sfondo posizionato a -990 px
Figura 2: lo stage, con solo lo sfondo posizionato a -990 px

Quando si sposta di nuovo nello spazio, la fisica richiede che diventi più piccolo, quindi deve essere ridimensionato tramite una proprietà scale(3.3) per adattarsi all'area visibile e allineato il bordo superiore alla parte superiore dell'area visibile con translate3d sull'asse y (vedi Figura 3).

.background {
width: 1280px;
height: 800px;
top: 0px;
background-image: url(stars.png);
{ % mixin transform: translate3d(0, 786px, <b>-990px</b>) <b>scale(3.3)</b>; % }
}
Figura 3: lo stage, con lo sfondo posizionato e ridimensionato.
Figura 3: lo stage, con solo lo sfondo posizionato e ridimensionato.

Nebbia, porte e scogliere allo stesso modo, ciascuna applicando un translate3d con una posizione z e un fattore di scala appropriati (vedi la Figura 4). Osserva come la nebbia si trova dietro le porte e dietro le scogliere.

Figura 4: il palco, con nebbia, porte e dirupo posizionati e scalati
Figura 4: il palco, con nebbia, porte e dirupo posizionati e scalati.

Aggiunta del mare

Per creare un ambiente il più realistico possibile, sapevamo di non poter semplicemente posizionare l'acqua su un piano verticale: in genere questo non esiste nel mondo reale. Oltre ad applicare translate3d per posizionare l'acqua sullo stage, applichiamo anche una rotazione sull'asse X (orizzontale) di 60 gradi (rotateX(60deg)) per farla apparire piatta e con texture. È stata aggiunta una rotazione simile al riflesso della porta e alla nebbia secondaria per farla apparire nel piano corretto (vedi Figura 5).

.sea {
bottom: 120px;
background-image: url(sea2.png);
width: 1280px;
height: 283px;
{ % mixin transform: translate3d(-100px, 225px, -30px) scale(2.3) <b>rotateX(60deg)</b>; % }
}
Figura 5: lo stage, con tutto posizionato e ridimensionato.
Figura 5: la fase, con tutto posizionato e scalato.
>

Ogni scena è stata costruita in modo simile, gli elementi sono stati visualizzati all'interno dello spazio 3D di uno stage e viene applicata una trasformazione appropriata a ciascuno.

Per approfondire