Movi Kanti Revo – Partie 1 – Construire le monde 3D

Logo Movi Kanti Revo.

Movi.Kanti.Revo est une nouvelle expérience Chrome sensorielle conçue par le Cirque du Soleil et développée par Subatomic Systems. Elle fait découvrir l'émerveillement du Cirque du Soleil sur le Web grâce à des technologies Web modernes.

Créer le monde 3D

Le test a été créé uniquement avec HTML5, et l'environnement est entièrement basé sur le balisage et le CSS. Comme les éléments de décor sur scène, les div, les img, les petits video et d'autres éléments sont positionnés dans un espace 3D à l'aide du CSS. L'utilisation de la nouvelle API getUserMedia a permis d'interagir de manière totalement nouvelle avec l'expérience. Au lieu d'utiliser le clavier ou la souris, une bibliothèque JavaScript de détection des visages suit votre tête et déplace l'environnement avec vous.

Tout le Web est une scène

Pour créer ce test, il est préférable d'imaginer le navigateur comme une scène, et les éléments tels que les <div>, les images, les vidéos et d'autres éléments comme des éléments de décor positionnés dans l'espace 3D à l'aide de CSS. Chaque élément ou élément de décor est positionné sur la scène en appliquant une transformation 3D. Si vous ne connaissez pas la transformation translate3d, sachez qu'elle prend trois paramètres : X, Y et Z. X déplace l'élément le long d'une ligne horizontale, Y le déplace de haut en bas, et Z le rapproche ou l'éloigne. Par exemple, appliquer un transform: translate3d(100px, -200px, 300px) déplace l'élément de 100 pixels vers la droite, de 200 pixels vers le bas et de 300 pixels vers le spectateur.

Créer l'auditorium

Voyons comment la dernière scène est assemblée. Toutes les scènes sont réparties en trois conteneurs principaux : le conteneur du monde, un conteneur de perspective et la scène. Le conteneur du monde configure efficacement la caméra du spectateur et utilise la propriété CSS perspective pour indiquer au navigateur d'où le spectateur regardera l'élément. #perspective-container permet de modifier notre perspective en lui appliquant des transformations 3D. Enfin, l'étape contient les éléments de décor qui seront visibles à l'écran.

<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); % }
}

Visualiser la scène

La scène finale comporte sept éléments. De l'arrière-plan au premier plan, ils incluent l'arrière-plan du ciel, une couche de brume, les portes, l'eau, les reflets, une couche de brume supplémentaire et enfin les falaises à l'avant. Chaque élément est placé sur la scène avec une propriété CSS transform: translate3d(x, y, z) qui indique où il s'intègre dans l'espace 3D. Nous avons utilisé la valeur z de la même manière que z-index, mais avec la propriété translate3d, nous pouvons également fournir une unité avec la valeur.

Figure 1: Vue latérale de la scène
Illustration 1: Vue latérale de la scène

La figure 1 montre la scène avec un zoom arrière et une rotation d'environ 90 degrés afin que vous puissiez visualiser la façon dont chacun des différents éléments de décor est placé sur la scène. À l'arrière (le plus à gauche), vous pouvez voir l'arrière-plan, le brouillard, les portes, l'eau et enfin les falaises.

Placer l'arrière-plan sur la scène

Commençons par l'image de fond. Comme il est le plus éloigné, nous avons appliqué une transformation de -990 px sur l'axe Z pour le repousser dans notre perspective (voir la figure 2).

La scène, avec uniquement l&#39;arrière-plan placé à -990 px
Figure 2: La scène, avec uniquement l'arrière-plan placé à -990 px

À mesure qu'il recule dans l'espace, les lois de la physique exigent qu'il rétrécisse. Il doit donc être redimensionné à l'aide d'une propriété scale(3.3) pour s'adapter à la fenêtre d'affichage et aligner le bord supérieur sur le haut de la fenêtre d'affichage avec un translate3d sur l'axe Y (voir figure 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>; % }
}
Figure 3: L&#39;espace de création, avec l&#39;arrière-plan positionné et mis à l&#39;échelle.
Figure 3: L'espace de création, avec uniquement l'arrière-plan positionné et mis à l'échelle.

Appliquez de la même manière le brouillard, les portes et les falaises, en appliquant un translate3d avec une position z et un facteur de mise à l'échelle appropriés (voir figure 4). Notez comment le brouillard est empilé derrière les portes et derrière les falaises.

Figure 4: La scène, avec le brouillard, les portes et la falaise positionnés et mis à l&#39;échelle
Illustration 4: La scène, avec le brouillard, les portes et la falaise positionnés et mis à l'échelle.

Ajouter la mer

Pour créer un environnement aussi réaliste que possible, nous savions que nous ne pouvions pas simplement placer l'eau sur un plan vertical, car cela n'existe généralement pas dans le monde réel. En plus d'appliquer translate3d pour positionner l'eau sur la scène, nous appliquons également une rotation de 60 degrés (rotateX(60deg)) sur l'axe X (horizontal) pour la faire apparaître plate et texturée. Une rotation similaire a été ajoutée à la réflexion de la porte et au brouillard secondaire pour qu'ils apparaissent dans le bon plan (voir figure 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>; % }
}
Figure 5: La scène, avec tous les éléments positionnés et mis à l&#39;échelle.
Figure 5: La scène, avec tous les éléments positionnés et mis à l'échelle.
>

Chaque scène a été créée de manière similaire, les éléments ont été visualisés dans l'espace 3D d'une scène et une transformation appropriée a été appliquée à chacune.

Documentation complémentaire