Movi Kanti Revo - Parte 1: Construindo o mundo 3D

Logotipo do Movi Kanti Revo.

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, divs, imgs, pequenos videos 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.

Figura 1: o palco visto de lado
Figura 1: o palco visto de lado.

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).

O palco, com apenas o plano de fundo colocado em -990px
Figura 2: o palco, com apenas o plano de fundo colocado em -990px

À 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>; % }
}
Figura 3: o palco, com o plano de fundo posicionado e dimensionado.
Figura 3: o cenário, com apenas o plano de fundo posicionado e dimensionado.

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.

Figura 4: o palco, com névoa, portas e penhasco posicionados e dimensionados
Figura 4: o palco, com a névoa, as portas e o penhasco posicionados e dimensionados.

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>; % }
}
Figura 5: o palco, com tudo posicionado e dimensionado.
Figura 5: o palco, com tudo posicionado e dimensionado.
>

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.

Leitura adicional