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

Pete LePage

Logotipo do Movi Kanti Revo.

O Movi.Kanti.Revo é um novo experimento sensorial do Google Chrome desenvolvido pelo Cirque du Soleil e desenvolvido pela subatomic Systems que leva o maravilha do Cirque du Soleil para a Web por meio de tecnologias modernas da Web.

Como construir o mundo em 3D

O experimento foi criado usando apenas HTML5, e o ambiente foi totalmente desenvolvido com marcação e CSS. Como peças no cenário, divs, imgs, videos pequenas e outros elementos são posicionados em um espaço 3D usando CSS. O uso da nova API getUserMedia possibilitou uma maneira totalmente nova de interagir com o experimento, em vez de usar o teclado ou o mouse, uma biblioteca de detecção facial JavaScript rastreia sua cabeça e move o ambiente junto com você.

A Web é um palco

Para criar esse experimento, é melhor imaginar o navegador como um cenário 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 conjunto é posicionado no cenário aplicando uma transformação 3D. Se você não conhece a transformação translate3d, ela requer 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 uma transform: translate3d(100px, -200px, 300px) vai mover o elemento 100 pixels para a direita, 200 pixels para baixo e 300 pixels mais perto do visualizador.

Construção do auditório

Vamos analisar a última cena e entender como ela é organizada. Todas as cenas são divididas em três contêineres principais: o contêiner mundial, um contêiner de perspectiva e o cenário. O contêiner global configura a câmera dos visualizadores e usa a propriedade CSS perspective para informar ao navegador de onde o usuário verá o elemento. O #perspective-container é usado para mudar nossa perspectiva aplicando transformações 3D a ele. Finalmente, o cenário contém as peças do cenário que estarão visíveis 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); % }
}

Visualização do cenário

Dentro do cenário, há sete elementos na cena final. Indo de trás para frente, elas incluem o fundo do céu, uma camada de neblina, as portas, a água, reflexos, uma camada adicional de neblina e, finalmente, os penhascos à frente. Cada item é colocado no cenário 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 que usaríamos z-index, mas com a propriedade translate3d, também podemos fornecer uma unidade com o valor.

Figura 1: a lateral do palco
Figura 1: lateral do cenário.

A Figura 1 mostra a cena com zoom diminuído e girado quase 90 graus para que você possa visualizar como cada uma das diferentes peças do cenário é colocada dentro do cenário. Na parte de trás (mais à esquerda), você vê o plano de fundo, a neblina, as portas, a água e, finalmente, os penhascos.

Colocar o plano de fundo no cenário

Vamos começar com a imagem de plano de fundo. Como é o ponto mais distante nas costas, aplicamos uma transformação de -990 pixels no eixo Z para empurrá-la de volta na nossa perspectiva (veja a Figura 2).

O cenário, com apenas o plano de fundo posicionado em -990px
Figura 2: o cenário, posicionado apenas em -990 px

À medida que ele volta no espaço, a física exige que ele diminua. Portanto, ele precisa ser redimensionado por meio de uma propriedade scale(3.3) para se ajustar à janela de visualização e alinhado a borda superior com a parte de cima da janela com um translate3d no eixo Y (veja 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 cenário, 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 (veja a Figura 4). Observe como a neblina está atrás das portas e atrás dos penhascos.

Figura 4: o palco, com neblina, portas e penhascos posicionados e dimensionados
Figura 4: cenário com neblina, portas e um penhasco posicionados e dimensionados.

Como adicionar 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. Normalmente, isso não existe assim no mundo real. Além de aplicar a translate3d para posicionar a água no cenário, também aplicamos uma rotação de 60 graus (rotateX(60deg)) no eixo x (horizontal) para que ela pareça plana e texturizada. Uma rotação semelhante foi adicionada ao reflexo da porta e à neblina 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 cenário, com tudo posicionado e dimensionado.
>

Cada cena foi construída de maneira semelhante, os elementos foram visualizados dentro do espaço 3D de um cenário e uma transformação apropriada foi aplicada a cada uma.

Leia mais