Movi.Kanti.Revo est une nouvelle expérience sensorielle conçue par Chrome par le Cirque du Soleil et développée par Subatomic Systems. Elle apporte sur le Web les merveilles du Cirque du Soleil grâce à des technologies Web modernes.
Créer le monde 3D
Le test a été créé en HTML5 uniquement, et l'environnement est entièrement basé sur le balisage et le CSS. Comme les éléments définis dans l'espace de création, les éléments div, img, les petits éléments video et d'autres éléments sont positionnés dans un espace 3D à l'aide de CSS. L'utilisation de la nouvelle API getUserMedia a permis d'interagir avec le test d'une toute nouvelle manière : au lieu d'utiliser le clavier ou la souris, une bibliothèque de détection de visages JavaScript suit votre tête et déplace l'environnement en même temps que vous.
Tout le Web est une étape
Pour concevoir cette expérience, 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 un espace 3D à l'aide de code CSS. Chaque élément ou pièce définie est positionné sur l'espace de création via l'application d'une transformation 3D. Si vous ne connaissez pas la transformation translate3d, 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 vers le haut et vers le bas, et Z le rapproche ou le éloigne. Par exemple, l'application d'un élément 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 bas.
Construction de l'auditorium
Jetons un coup d'œil à la dernière scène et voyons comment elle se présente. Toutes les scènes sont divisées en trois conteneurs principaux : le conteneur "World", un conteneur de perspective et l'espace de création. Le conteneur "world" configure efficacement la caméra du lecteur et utilise la propriété CSS perspective pour indiquer au navigateur d'où il verra l'élément. #perspective-container permet de modifier notre perspective en lui appliquant des transformations 3D. Enfin, l'espace de création contient les éléments
définis 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 l'espace de création
La scène finale contient sept éléments. De l'arrière vers l'avant, ils incluent le fond du ciel, une couche de brouillard, les portes, l'eau, les reflets, une couche de brouillard supplémentaire et enfin les falaises qui se trouvent devant.
Chaque élément est placé dans l'espace de création avec une propriété CSS transform: translate3d(x, y, z) qui indique sa position 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.
La figure 1 montre la scène avec un zoom arrière et une rotation de près de 90 degrés. Vous pouvez ainsi visualiser la façon dont les différentes pièces de la scène sont placées dans l'espace de création. À l'arrière-plan (tout à gauche), on peut voir l'arrière-plan, le brouillard, les portes, l'eau et enfin les falaises.
Placer l'arrière-plan sur l'espace de création
Commençons par l'image de fond. Comme il s'agit du point le plus éloigné en arrière, nous avons appliqué une transformation de -990 pixels à l'axe Z pour le repousser dans notre perspective (voir la figure 2).
À mesure qu'il revient dans l'espace, la physique exige qu'il diminue. Il doit donc être redimensionné via une propriété scale(3.3) pour s'adapter à la fenêtre d'affichage et aligner le bord supérieur avec le haut de la fenêtre d'affichage avec un translate3d sur l'axe des ordonnées (voir la 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>; % }
}
le brouillard, les portes et les falaises de la même manière, chacun en appliquant un translate3d avec une position Z et un facteur d'échelle appropriés (voir Figure 4). Notez que le brouillard s'empile derrière les portes et derrière les falaises.
Ajouter la mer
Pour créer un environnement aussi réaliste que possible, nous savions que nous ne pouvions pas simplement mettre l'eau sur un plan vertical, car elle n'existe généralement pas ainsi dans le monde réel. En plus d'appliquer le translate3d pour positionner l'eau sur l'espace de création, nous appliquons également une rotation horizontale (axe X) de 60 degrés (rotateX(60deg)) pour qu'elle soit plate et texturée.
Une rotation similaire a été ajoutée au reflet de la porte et au brouillard secondaire pour qu'elle apparaisse sur le plan correct (voir la 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>; % }
}
Chaque scène a été conçue de la même manière, 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 d'elles.