Movi Kanti Revo, Parte 1: Crea el mundo en 3D

Logotipo de Movi Kanti Revo.

Movi.Kanti.Revo es un nuevo experimento sensorial de Chrome creado por Cirque du Soleil y desarrollado por Subatomic Systems que lleva la maravilla del Cirque du Soleil a la Web a través de tecnologías web modernas.

Cómo crear el mundo 3D

El experimento se creó solo con HTML5, y el entorno se compila completamente con lenguaje de marcado y CSS. Al igual que los elementos de escenografía, los div, los img, los video pequeños y otros elementos se posicionan en un espacio 3D con CSS. El uso de la nueva API de getUserMedia habilitó una forma completamente nueva de interactuar con el experimento. En lugar de usar el teclado o el mouse, una biblioteca de detección facial de JavaScript hace un seguimiento de tu cabeza y mueve el entorno junto contigo.

Todo el escenario es la Web

Para compilar este experimento, es mejor imaginar el navegador como un escenario y los elementos como <div>, imágenes, videos y otros elementos como piezas fijas posicionadas en el espacio 3D con CSS. Cada elemento o accesorio de escenografía se posiciona en el escenario aplicando una transformación 3D. Si no conoces la transformación translate3d, esta toma 3 parámetros: X, Y y Z. X mueve el elemento a lo largo de una línea horizontal, Y mueve el elemento hacia arriba y hacia abajo, y Z mueve el elemento hacia adentro o hacia afuera. Por ejemplo, aplicar un transform: translate3d(100px, -200px, 300px) moverá el elemento 100 píxeles hacia la derecha, 200 píxeles hacia abajo y 300 píxeles más cerca del usuario.

Construcción del auditorio

Veamos la última escena y cómo se armó. Todas las escenas se dividen en tres contenedores principales: el contenedor del mundo, un contenedor de perspectiva y el escenario. El contenedor mundial configura de manera eficaz la cámara del usuario y usa la propiedad perspective de CSS para indicarle al navegador desde dónde el usuario verá el elemento. #perspective-container se usa para cambiar nuestra perspectiva aplicando transformaciones 3D. Por último, el escenario contiene las piezas del set que se verán en pantalla.

<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 el escenario

En el escenario, hay siete elementos en la escena final. De atrás hacia adelante, incluyen el fondo del cielo, una capa de niebla, las puertas, el agua, los reflejos, una capa de niebla adicional y, por último, los acantilados de frente. Cada elemento se coloca en el escenario con una propiedad CSS transform: translate3d(x, y, z) que indica dónde se ajusta en el espacio 3D. Usamos el valor z de una manera similar a la que usábamos z-index, pero con la propiedad translate3d, también podemos proporcionar una unidad con el valor.

Figura 1: El escenario de costado
Figura 1: El escenario de costado.

En la Figura 1, se muestra la escena con zoom hacia afuera y rotada casi 90 grados para que puedas visualizar la forma en que se colocan cada una de las diferentes piezas del escenario. En la parte posterior (más a la izquierda), puedes ver el fondo, la niebla, las puertas, el agua y, por último, los acantilados.

Coloca el fondo en el escenario

Comencemos con la imagen de fondo. Como es el más alejado, aplicamos una transformación de -990 px en el eje Z para alejarlo en nuestra perspectiva (consulta la Figura 2).

El escenario, con solo el fondo ubicado en -990 px
Figura 2: El escenario, con solo el fondo ubicado en -990 px

A medida que se mueve hacia atrás en el espacio, la física exige que se reduzca, por lo que se debe cambiar el tamaño a través de una propiedad scale(3.3) para que se ajuste al viewport y alinear el borde superior con la parte superior del viewport con un translate3d en el eje y (consulta la 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: El escenario, con el fondo posicionado y ajustado
Figura 3: El escenario, con solo el fondo posicionado y ajustado

La niebla, las puertas y los acantilados de la misma manera, cada uno aplicando un translate3d con una posición z y un factor de escala adecuados (consulta la Figura 4). Observa cómo la niebla se acumula detrás de las puertas y de los acantilados.

Figura 4: El escenario, con la niebla, las puertas y el acantilado posicionados y ajustados
Figura 4: El escenario, con la niebla, las puertas y el acantilado posicionados y ajustados.

Agrega el mar

Para crear un entorno lo más realista posible, sabíamos que no podíamos simplemente colocar el agua en un plano vertical, ya que, por lo general, no existe de esa manera en el mundo real. Además de aplicar translate3d para posicionar el agua en el escenario, también aplicamos una rotación de 60 grados (rotateX(60deg)) en el eje X (horizontal) para que se vea plana y con textura. Se agregó una rotación similar al reflejo de la puerta y a la niebla secundaria para que aparezcan en el plano correcto (consulta la 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: El escenario, con todo posicionado y ajustado
Figura 5: El escenario, con todo posicionado y ajustado
>

Cada escena se creó de manera similar, los elementos se visualizaron dentro del espacio 3D de un escenario y se aplicó una transformación adecuada a cada uno.

Lecturas adicionales