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

Logo Movi Kanti Revo.

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

Creare il mondo 3D

L'esperimento è stato creato utilizzando solo HTML5 e l'ambiente è stato creato interamente con markup e CSS. Come le scenografie sul palco, i div, i img, i piccoli video e altri elementi vengono posizionati in uno spazio 3D utilizzando CSS. L'utilizzo della nuova API getUserMedia ha consentito un modo completamente nuovo di interagire con l'esperimento: anziché utilizzare la tastiera o il mouse, una libreria di rilevamento del volto in JavaScript monitora la tua testa e sposta l'ambiente con te.

Tutto il web è una fase

Per creare questo esperimento, è meglio immaginare il browser come un palcoscenico e gli elementi come <div>, immagini, video e altri elementi come set di pezzi posizionati nello spazio 3D utilizzando il CSS. Ogni elemento o elemento di scena viene posizionato sullo stage applicando una trasformazione 3D. Se non hai dimestichezza con la trasformazione translate3d, tieni presente che richiede tre parametri: X, Y e Z. X muove l'elemento lungo una linea orizzontale, Y lo muove verso l'alto e verso il basso e Z lo avvicina o allontana. Ad esempio, l'applicazione di un valore transform: translate3d(100px, -200px, 300px) consente di spostare l'elemento di 100 pixel verso destra, 200 pixel verso il basso e 300 pixel verso lo spettatore.

Costruzione dell'auditorium

Diamo un'occhiata all'ultima scena e vediamo come è composta. Tutte le scene sono suddivise in tre contenitori principali: il contenitore del mondo, un contenitore prospettico e il palco. Il contenitore del mondo configura efficacemente la videocamera dello spettatore e utilizza la proprietà CSS perspective per indicare al browser da dove lo spettatore osserverà l'elemento. #perspective-container viene utilizzato per cambiare la nostra prospettiva applicando trasformazioni 3D. Infine, lo stage contiene gli elementi scenici 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 della fase

All'interno della scena finale sono presenti sette elementi. Dal retro in primo piano, includono lo sfondo cielo, un livello di nebbia, le porte, l'acqua, le riflessioni, un altro livello 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 inserisce nello spazio 3D. Abbiamo utilizzato il valore z in modo simile a come useremmo z-index, ma con la proprietà translate3d possiamo anche fornire un'unità con il valore.

Figura 1: il palco visto di lato
Figura 1: il palco visto di lato.

La Figura 1 mostra la scena con lo zoom ridotto e ruotata di quasi 90 gradi in modo da poter visualizzare il modo in cui ogni elemento del set è posizionato all'interno del palco. Sul retro (più a sinistra), puoi vedere lo sfondo, la nebbia, le porte, l'acqua e infine le scogliere.

Posizionare lo sfondo nella scena

Iniziamo con l'immagine di sfondo. Poiché è l'elemento più arretrato, abbiamo applicato una trasformazione di -990 pixel sull'asse Z per spingerlo indietro nella nostra prospettiva (vedi Figura 2).

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

Quando si sposta indietro nello spazio, la fisica richiede che si rimpicciolisca, quindi deve essere ridimensionato tramite una proprietà scale(3.3) per adattarsi all'area visibile e allineare il bordo superiore con la parte superiore dell'area visibile con un 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.

La nebbia, le porte e le scogliere nello stesso modo, applicando a ciascuna un translate3d con una posizione z e un fattore di scala appropriati (vedi Figura 4). Notare come la nebbia si accumula dietro le porte e dietro le scogliere.

Figura 4: la scena, con nebbia, porte e scogliera posizionate e scalate
Figura 4: il palco, con nebbia, porte e scogliera posizionati e ridimensionati.

Aggiunta del mare

Per creare un ambiente il più realistico possibile, sapevamo che non potevamo semplicemente mettere l'acqua su un piano verticale, perché non esiste nel mondo reale. Oltre ad applicare translate3d per posizionare l'acqua sulla scena, applichiamo anche una rotazione sull'asse X (orizzontale) di 60 gradi (rotateX(60deg)) per renderla piatta e strutturata. Una rotazione simile è stata aggiunta al riflesso della porta e alla nebbia secondaria per farli 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: il palco, con tutto posizionato e ridimensionato.
Figura 5: la scena, con tutto posizionato e ridimensionato.
>

Ogni scena è stata creata in modo simile, gli elementi sono stati visualizzati nello spazio 3D di una scena e a ciascuno è stata applicata una trasformazione appropriata.

Per approfondire