Movi.Kanti.Revo ist ein neues sensorisches Chrome-Experiment, das vom Cirque du Soleil entwickelt und von Subatomic Systems umgesetzt wurde. Es bringt die Magie des Cirque du Soleil durch moderne Webtechnologien ins Web.
3D-Welt erstellen
Der Test wurde nur mit HTML5 erstellt und die Umgebung besteht vollständig aus Markup und CSS. Wie Bühnenbilder auf einer Bühne werden divs, imgs, kleine videos und andere Elemente mithilfe von CSS in einem 3D-Raum positioniert. Die neue getUserMedia-API ermöglichte eine völlig neue Art der Interaktion mit dem Experiment. Anstelle von Tastatur oder Maus wird eine JavaScript-Bibliothek zur Gesichtserkennung verwendet, die Ihren Kopf verfolgt und die Umgebung entsprechend bewegt.
Die ganze Welt ist eine Bühne
Für diesen Test stellen Sie sich den Browser am besten als Bühne vor. Die Elemente wie <div>s, Bilder, Videos und andere Elemente sind wie Kulissen, die mit CSS im 3D-Raum positioniert werden. Jedes Element oder jede Kulisse wird durch Anwenden einer 3D-Transformation auf der Bühne positioniert. Wenn Sie mit der translate3d-Transformation nicht vertraut sind, sollten Sie wissen, dass sie drei Parameter hat: 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, um 200 Pixel nach unten und um 300 Pixel näher zum Betrachter verschoben.
Aufbau des Auditoriums
Sehen wir uns die letzte Szene an und wie sie zusammengesetzt ist. Alle Szenen sind in drei primäre Container unterteilt: den Weltcontainer, einen Perspektivcontainer und die Bühne. Im Weltcontainer wird die Kamera des Betrachters eingerichtet. Mit der CSS-Eigenschaft perspective wird dem Browser mitgeteilt, aus welcher Richtung der Betrachter das Element sieht. Mit #perspective-container können wir die Perspektive ändern, indem wir 3D-Transformationen darauf anwenden. Schließlich enthält die Bühne die tatsächlichen Kulissenteile, die auf dem Bildschirm zu sehen sein werden.
<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 letzten Szene sind sieben Elemente zu sehen. Von hinten nach vorn sind das der Himmel, eine Nebelschicht, die Türen, das Wasser, Spiegelungen, eine weitere Nebelschicht und schließlich die Klippen im Vordergrund.
Jedes Element wird auf der Bühne mit einer transform: translate3d(x, y, z)-CSS-Eigenschaft platziert, die angibt, wo es sich im 3D-Raum befindet. Wir haben den z-Wert ähnlich wie z-index verwendet, aber mit der Property translate3d können wir auch eine Einheit für den Wert angeben.
Abbildung 1 zeigt die Szene verkleinert und um fast 90 Grad gedreht, damit Sie sehen können, wie die einzelnen Kulissenteile auf der Bühne platziert sind. Ganz hinten (ganz links) sehen Sie den Hintergrund, Nebel, Türen, Wasser und schließlich die Klippen.
Hintergrund auf der Bühne platzieren
Beginnen wir mit dem Hintergrundbild. Da es am weitesten hinten liegt, haben wir eine Transformation von -990 px auf der Z-Achse angewendet, um es in unserer Perspektive nach hinten zu verschieben (siehe Abbildung 2).
Wenn es sich wieder nach hinten bewegt, muss es aufgrund der Physik kleiner werden. Daher muss es über die Eigenschaft scale(3.3) an den Darstellungsbereich angepasst und die obere Kante mit translate3d auf der Y-Achse an den oberen Rand des Darstellungsbereichs ausgerichtet werden (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>; % }
}
Der Nebel, die Türen und die Klippen werden auf dieselbe Weise gerendert, indem jeweils ein translate3d mit einer geeigneten Z-Position und einem geeigneten Skalierungsfaktor angewendet wird (siehe Abbildung 4). Der Nebel ist hinter den Türen und hinter den Klippen gestapelt.
Das Meer hinzufügen
Um eine möglichst realistische Umgebung zu schaffen, konnten wir das Wasser nicht einfach auf einer vertikalen Ebene platzieren, da es in der realen Welt normalerweise nicht so vorkommt. Zusätzlich zur Anwendung von translate3d, um das Wasser auf der Bühne zu positionieren, wenden wir auch eine Drehung um die x-Achse (horizontal) von 60 Grad (rotateX(60deg)) an, damit es flach und strukturiert wirkt.
Eine ähnliche Drehung wurde der Türspiegelung und dem sekundären Nebel hinzugefügt, 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 jedes Element wurde eine entsprechende Transformation angewendet.