Movi Kanti Revo – Teil 1 – Aufbau der 3D-Welt

Logo von Movi Kanti Revo

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: Bühne von der Seite
Abbildung 1: Die Bühne von der Seite.

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).

Die Bühne, auf der nur der Hintergrund bei -990 Pixeln platziert ist
Abbildung 2: Die Bühne, auf der nur der Hintergrund bei -990 Pixeln platziert ist

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>; % }
}
Abbildung 3: Der Bühnenbereich mit positioniertem und skaliertem Hintergrund
Abbildung 3: Der Bühnenbereich, auf dem nur der Hintergrund positioniert und skaliert ist.

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.

Abbildung 4: Die Bühne mit Nebel, Türen und Klippe, positioniert und skaliert
Abbildung 4: Die Bühne mit Nebel, Türen und Klippe, positioniert und skaliert.

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>; % }
}
Abbildung 5: Die Bühne, auf der alle Elemente positioniert und skaliert sind.
Abbildung 5: Die Bühne, auf der alle Elemente positioniert und skaliert sind.
>

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

Weiterführende Literatur