
Movi.Kanti.Revo é um novo experimento sensorial do Chrome criado pelo Cirque du Soleil e desenvolvido pela Subatomic Systems, que traz a magia do Cirque du Soleil para a Web usando tecnologias modernas da Web.
Como criar o mundo 3D
O experimento foi criado usando apenas HTML5, e o ambiente foi criado
inteiramente com markup e CSS. Como peças de cenário no
palco, div
s, img
s, pequenos video
s e
outros elementos são posicionados em um espaço 3D usando CSS. O uso da nova
API getUserMedia
possibilitou uma nova maneira de interagir com o
experimento. Em vez de usar o teclado ou o mouse, uma biblioteca de detecção
facial do JavaScript rastreia sua cabeça e move o ambiente com você.
Toda a Web é um palco
Para criar esse experimento, é melhor imaginar o navegador como um palco e os
elementos como <div>
s, imagens, vídeos e outros elementos como
peças definidas posicionadas no espaço 3D usando CSS. Cada elemento ou peça do set é
posicionado no palco aplicando uma transformação 3D. Se você não conhece
a transformação translate3d
, ela usa três parâmetros: X, Y e Z. X
move o elemento ao longo de uma linha horizontal, Y move o elemento para cima e para baixo,
e Z move o elemento para mais perto ou mais longe. Por exemplo, aplicar um
transform: translate3d(100px, -200px, 300px)
move o elemento
100 pixels para a direita, 200 pixels para baixo e 300 pixels mais perto do
visualizador.
Como criar o auditório
Vamos conferir a última
cena e ver como ela é montada. Todas as cenas são divididas em
três contêineres principais: o contêiner do mundo, um contêiner de perspectiva e
o palco. O contêiner do mundo configura a câmera do espectador e
usa a propriedade perspective
do CSS para informar ao navegador de onde o
espectador vai olhar o elemento. O
#perspective-container
é usado para mudar nossa perspectiva
aplicando transformações 3D a ele. Por fim, o palco contém as peças
reais do cenário que vão aparecer na tela.
<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); % }
}
Como visualizar o cenário
No palco, há sete elementos na cena final. Movendo-se de
trás para a frente, eles incluem o plano de fundo do céu, uma camada de neblina, as portas, a
água, os reflexos, outra camada de neblina e, por fim, as falésias à frente.
Cada item é colocado no palco com uma
propriedade CSS transform: translate3d(x, y, z)
que indica onde
ele se encaixa no espaço 3D. Usamos o valor z de maneira semelhante a z-index
, mas com a propriedade translate3d
, também podemos fornecer uma unidade com o valor.

A Figura 1 mostra a cena com zoom desativado e girada em quase 90 graus para que você possa visualizar a maneira como cada uma das peças do cenário é colocada no palco. Na parte de trás (mais à esquerda), é possível ver o plano de fundo, a névoa, as portas, a água e, por fim, os penhascos.
Como colocar o plano de fundo no palco
Vamos começar com a imagem de plano de fundo. Como ele está mais para trás, aplicamos uma transformação de -990 px no eixo Z para empurrá-lo para trás na perspectiva (consulte a Figura 2).

À medida que ele se move para trás no espaço, a física exige que ele fique menor. Portanto, ele precisa
ser redimensionado usando uma propriedade scale(3.3)
para caber na janela de visualização e
alinhar a borda superior com a parte de cima da janela de visualização com um
translate3d
no eixo y (consulte a 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>; % }
}

A neblina, as portas e os penhascos da mesma forma, cada um aplicando um
translate3d
com uma posição z e um fator de escala adequados
(consulte a Figura 4). Observe como a névoa está acumulada atrás das portas e dos penhascos.

Adicionando o mar
Para criar um ambiente o mais realista possível, sabíamos que não poderíamos simplesmente
colocar a água em um plano vertical, porque isso não existe no
mundo real. Além de aplicar o translate3d
para
posicionar a água no palco, também aplicamos uma rotação do eixo x (horizontal) de
60 graus (rotateX(60deg)
) para que ela pareça plana e com textura.
Uma rotação semelhante foi adicionada ao reflexo da porta e à névoa secundária para que
ela aparecesse no plano correto (consulte a 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>; % }
}

Cada cena foi criada de maneira semelhante, os elementos foram visualizados no espaço 3D de um palco e uma transformação adequada foi aplicada a cada um.