
Movi.Kanti.Revo ist ein neues sensorisches Chrome-Experiment, das von Cirque du Soleil entworfen und von Subatomic Systems entwickelt wurde. Es bringt die Faszination von Cirque du Soleil mithilfe moderner Webtechnologien ins Web.
3D-Welt erstellen
Der Test wurde nur mit HTML5 erstellt und die Umgebung besteht ausschließlich aus Markup und CSS. Ähnlich wie Kulissen auf der Bühne werden div
, img
, kleine video
und andere Elemente mithilfe von CSS in einem 3D-Raum positioniert. Mit der neuen getUserMedia
API können Nutzer ganz neu mit dem Test interagieren. Anstatt die Tastatur oder Maus zu verwenden, wird die Umgebung mithilfe einer JavaScript-Bibliothek für die Gesichtserkennung an die Bewegungen des Kopfes angepasst.
Das ganze Web ist eine Bühne
Stellen Sie sich den Browser als Bühne und Elemente wie <div>
s, Bilder, Videos und andere Elemente als Requisiten vor, die mithilfe von CSS im 3D-Raum positioniert werden. Jedes Element oder Requisit wird durch Anwenden einer 3D-Transformation auf der Bühne positioniert. Die translate3d
-Transformation benötigt drei Parameter: X, Y und Z. Mit X wird das Element entlang einer horizontalen Linie verschoben, mit Y nach oben und unten und mit Z näher heran oder weiter weg. Wenn Sie beispielsweise transform: translate3d(100px, -200px, 300px)
anwenden, wird das Element um 100 Pixel nach rechts, 200 Pixel nach unten und 300 Pixel näher zum Betrachter verschoben.
Auditorium erstellen
Sehen wir uns die letzte Szene an und wie sie aufgebaut ist. Alle Szenen sind in drei primäre Container unterteilt: den Weltcontainer, einen Perspektive-Container und die Bühne. Der World-Container richtet die Kamera des Betrachters ein und gibt mithilfe der CSS-Eigenschaft perspective
dem Browser an, aus welcher Perspektive der Betrachter das Element sehen wird. Mit #perspective-container
können wir die Perspektive ändern, indem wir 3D-Transformationen anwenden. Schließlich enthält die Bühne die eigentlichen Kulissenteile, die auf dem Bildschirm zu sehen sind.
<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); % }
}
Bühne visualisieren
In der Bühne gibt es sieben Elemente in der letzten Szene. Von hinten nach vorne sind das der Himmel, eine Nebelschicht, die Türen, das Wasser, Reflexionen, eine weitere Nebelschicht und schließlich die Felsen im Vordergrund.
Jedes Element wird mit einer transform: translate3d(x, y, z)
-CSS-Property auf der Bühne platziert, die angibt, wo es im 3D-Raum passt. Wir haben den Z‑Wert ähnlich wie z-index
verwendet. Mit der Property translate3d
können wir dem Wert jedoch auch eine Einheit zuweisen.

Abbildung 1 zeigt die Szene herangezoomt und fast um 90 Grad gedreht, damit Sie sich vorstellen können, wie die einzelnen Kulissen auf der Bühne platziert sind. Im Hintergrund (ganz links) sehen Sie den Hintergrund, Nebel, Türen, Wasser und schließlich die Klippen.
Hintergrund auf die Bühne bringen
Beginnen wir mit dem Hintergrundbild. Da es am weitesten hinten ist, haben wir eine Transformation von -990 px auf der Z‑Achse angewendet, um es in unserer Perspektive nach hinten zu verschieben (siehe Abbildung 2).

Da es sich im Raum nach hinten bewegt, muss es gemäß den Gesetzen der Physik kleiner werden. Daher muss es mithilfe einer scale(3.3)
-Property so zugeschnitten werden, dass es in den Darstellungsbereich passt. Der obere Rand muss mit dem oberen Rand des Darstellungsbereichs übereinstimmen. Dazu wird eine translate3d
auf der y-Achse verwendet (siehe Abbildung 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>; % }
}

Für Nebel, Türen und Klippen wird jeweils eine translate3d
mit einer geeigneten Z‑Position und einem geeigneten Skalierungsfaktor angewendet (siehe Abbildung 4). Beachten Sie, wie sich der Nebel hinter den Türen und hinter den Klippen stapelt.

Meer hinzufügen
Um eine möglichst realistische Umgebung zu schaffen, wussten wir, dass wir das Wasser nicht einfach auf eine vertikale Ebene legen konnten, da es in der realen Welt normalerweise nicht so vorkommt. Zusätzlich zum Anwenden von translate3d
, um das Wasser auf der Bühne zu positionieren, wenden wir auch eine horizontale Drehung von 60 Grad (rotateX(60deg)
) auf die X-Achse an, damit es flach und strukturiert erscheint.
Die Türreflexion und der sekundäre Nebel wurden ebenfalls ähnlich gedreht, damit sie in der richtigen Ebene erscheinen (siehe Abbildung 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>; % }
}

Jede Szene wurde auf ähnliche Weise erstellt, Elemente wurden im 3D-Raum einer Bühne visualisiert und auf jede eine geeignete Transformation angewendet.