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

Pete LePage

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.

Construir el mundo en 3D

El experimento se creó solo con HTML5 y el entorno se creó íntegramente con lenguaje de marcado y CSS. Al igual que las piezas del escenario, los objetos div, img, video pequeños y otros elementos se posicionan en un espacio 3D con CSS. Con la nueva API de getUserMedia, se habilitó una manera completamente nueva de interactuar con el experimento. En lugar de usar el teclado o el mouse, una biblioteca de detección facial de JavaScript rastrea la cabeza y mueve el entorno contigo.

Toda la Web es un escenario

Para crear este experimento, es mejor imaginar al navegador como una etapa y los elementos (como <div>s, imágenes, videos y otros elementos) como escenografías posicionadas en un espacio 3D con CSS. Cada elemento, o pieza de escenario, se posiciona en la etapa con una transformación 3D. Si no estás familiarizado con la transformación translate3d, esta requiere 3 parámetros: X, Y y Z. X mueve el elemento por una línea horizontal, Y mueve el elemento hacia arriba y hacia abajo, y Z lo acerca o aleja más. Por ejemplo, si aplicas un transform: translate3d(100px, -200px, 300px), el elemento se moverá 100 píxeles hacia la derecha, 200 píxeles hacia abajo y 300 píxeles más cerca del visor.

Edificio del auditorio

Echemos un vistazo a la última escena y veamos cómo se arma. Todas las escenas se dividen en tres contenedores principales: el contenedor de mundos, un contenedor de perspectiva y la etapa. El contenedor del mundo configura de manera efectiva la cámara del visor y usa la propiedad perspective de CSS para indicarle al navegador desde dónde mirará el elemento. El objeto #perspective-container se usa para cambiar nuestra perspectiva mediante la aplicación de transformaciones 3D. Por último, el escenario contiene las piezas preparadas reales que serán visibles en la 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); % }
}

Visualización del escenario

Dentro del 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 adicional de niebla y, por último, los acantilados que están en el frente. Cada elemento se coloca en el escenario con una propiedad de CSS transform: translate3d(x, y, z) que indica dónde cabe en el espacio 3D. Usamos el valor z de manera similar a como usaríamos z-index, pero, con la propiedad translate3d, también podemos proporcionar una unidad con el valor.

En la Figura 1, se muestra la escena alejada y rotada casi 90 grados para que puedas visualizar la forma en que se coloca cada una de las diferentes piezas del escenario. Al fondo (más a la izquierda), se ve el fondo, la niebla, las puertas, el agua y, por último, los acantilados.

Cómo colocar el fondo en un escenario

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

La escena, con solo el fondo colocado a -990 px — Figura 2: La etapa, con solo el fondo colocado a -990 px

A medida que se mueve de vuelta al espacio, la física exige que se reduzca, por lo que se debe cambiar el tamaño mediante una propiedad scale(3.3) para que se ajuste al viewport y se alinee el borde superior con la parte superior 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: La etapa con fondo posicionado y ajustado. — Figura 3: La etapa, 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 se acumula la niebla detrás de las puertas y detrás de los acantilados.

Figura 4: El escenario, con niebla, puertas y acantilados posicionados y ajustados.

Agregando el mar

Para crear un entorno lo más realista posible, sabíamos que no podíamos simplemente poner el agua en un plano vertical; por lo general, no existe así en el mundo real. Además de aplicar el objeto translate3d para posicionar el agua en la etapa, también aplicamos una rotación del eje x (horizontal) de 60 grados (rotateX(60deg)) para que parezca 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: La etapa, con todo posicionado y ajustado.

Cada escena se compiló de manera similar, los elementos se visualizaron en el espacio 3D de una etapa y se aplicó una transformación adecuada a cada una.