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

Pete LePage

Movi.Kanti.Revo ist ein neues sensorisches Chrome-Experiment, das von Cirque du Soleil und von Subatomic Systems entwickelt wurde. Es bringt mithilfe moderner Webtechnologien die Wunder von Cirque du Soleil im Web.

Die 3D-Welt erschaffen

Der Test wurde ausschließlich mit HTML5 erstellt und die Umgebung wurde vollständig mit Markup und CSS erstellt. Wie Bühnenstücke werden divs, imgs, kleine videos und andere Elemente mithilfe von CSS in einem 3D-Raum positioniert. Die neue getUserMedia API ermöglicht eine ganz neue Art der Interaktion mit dem Experiment. Statt mit Tastatur oder Maus erfasst eine JavaScript-Bibliothek zur Gesichtserkennung deinen Kopf und bewegt die Umgebung mit dir.

Das gesamte Web ist eine Bühne

Stellen Sie sich den Browser für dieses Experiment am besten als Bühne vor und die Elemente wie <div>s, Bilder, Videos und andere Elemente werden mithilfe von CSS im 3D-Raum positioniert. Jedes Element oder Set wird durch Anwendung einer 3D-Transformation im Anzeigebereich positioniert. Wenn Sie mit der translate3d-Transformation nicht vertraut sind, benötigen Sie drei Parameter: X, Y und Z. X verschiebt das Element entlang einer horizontalen Linie, Y verschiebt es nach oben und unten und Z verschiebt es 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.

Der Bau des Auditoriums

Sehen wir uns die letzte Szene einmal genauer an. Alle Szenen werden in drei primäre Container unterteilt: den Weltcontainer, einen perspektivischen Container und den Anzeigebereich. Der World Container richtet die Kamera des Viewer ein und verwendet die CSS-Eigenschaft perspective, um dem Browser mitzuteilen, von wo aus der Betrachter das Element betrachten wird. #perspective-container wird verwendet, um unsere Perspektive durch Anwenden von 3D-Transformationen zu ändern. Schließlich enthält der Anzeigebereich die eigentlichen Sets, 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

Die Endszene zeigt sieben Elemente. Von hinten nach vorn zeigen sie den Himmelshintergrund, eine Nebelschicht, die Türen, das Wasser, Reflexionen, eine weitere Nebelschicht und schließlich die Klippen davor. Jedes Element wird im Anzeigenbereich mit der CSS-Eigenschaft transform: translate3d(x, y, z) platziert, die angibt, wie es in den 3D-Raum passt. Wir haben den z-Wert in ähnlicher Weise wie für z-index verwendet, aber mit dem Attribut translate3d können wir auch eine Einheit mit dem Wert angeben.

Abbildung 1: Der Anzeigebereich von der Seite.

In Abbildung 1 ist die Szene verkleinert und um fast 90 Grad gedreht, sodass Sie sich ansehen können, wie die verschiedenen Sets im Anzeigebereich platziert sind. Auf der Rückseite (ganz links) sind der Hintergrund, der Nebel, die Türen, das Wasser und schließlich die Klippen zu sehen.

Platzieren des Hintergrunds auf einer Bühne

Beginnen wir mit dem Hintergrundbild. Da sie am weitesten zurück ist, haben wir eine -990px-Transformation auf die Z-Achse angewendet, um sie aus unserer Perspektive nach hinten zu verschieben (siehe Abbildung 2).

Der Anzeigebereich mit nur dem Hintergrund auf 990 Pixeln — Abbildung 2: Anzeigebereich mit nur einem Hintergrund von -990 px

Wenn es sich in den Weltraum zurückbewegt, muss es kleiner werden. Deshalb muss die Größe über eine scale(3.3)-Eigenschaft angepasst werden, damit sie in den Darstellungsbereich passt. Außerdem muss der obere Rand am oberen Rand des Darstellungsbereichs an einem translate3d auf der Y-Achse 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>; % }
}

Abbildung 3: Anzeigebereich mit positioniertem und skaliertem Hintergrund — Abbildung 3: Anzeigebereich, in dem nur der Hintergrund positioniert und skaliert ist.

Nebel, Türen und Klippen auf dieselbe Weise, indem ein translate3d mit einer geeigneten z-Position und einem geeigneten Skalierungsfaktor angewendet wird (siehe Abbildung 4). Beachten Sie, wie sich hinter den Türen und hinter den Klippen der Nebel lagert.

Abbildung 4: Bühne mit Nebel, Türen und Steilküste — Abbildung 4: Bühne mit Nebel, Türen und Felswänden, die groß positioniert ist.

Das Meer hinzufügen

Um ein möglichst realistisches Umfeld zu schaffen, wussten wir, dass wir das Wasser nicht einfach auf eine vertikale Ebene stellen könnten. So etwas existiert in der realen Welt normalerweise nicht. Zusätzlich zur Positionierung des Wassers im Anzeigebereich wird translate3d angewendet und eine Drehung um 60 Grad an der x-Achse (horizontal) (rotateX(60deg)) angewendet, damit es flach und texturiert wirkt. Die Türreflexion und der sekundäre Nebel wurden um eine ähnliche Drehung gebracht, damit sie in der richtigen Ebene erscheint (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: Anzeigebereich, in dem alles positioniert und skaliert ist.

Jede Szene wurde auf ähnliche Weise erstellt. Elemente wurden im 3D-Raum eines Anzeigebereichs visualisiert und auf jede Szene wurde eine entsprechende Transformation angewendet.