Movi Kanti Revo – Część 1 – Tworzenie świata 3D

Pete LePage

Movi.Kanti.Revo to nowy, sensoryczny eksperyment w Chrome stworzony przez Cirque du Soleil i opracowany przez firmę Subatomic Systems. Dzięki nim możesz przenieść cuda Cirque du Soleil do sieci dzięki nowoczesnym technologiom internetowym.

Tworzenie świata 3D

Eksperyment został utworzony wyłącznie w języku HTML5, a środowisko w całości jest zbudowane w oparciu o znaczniki oraz CSS. Podobnie jak elementy dekoracyjne na scenie, elementy div, img, małe elementy video i inne elementy są umieszczane w przestrzeni 3D za pomocą CSS. Nowy interfejs API getUserMedia umożliwił zupełnie nowy sposób interakcji z eksperymentem. Zamiast używać klawiatury lub myszy, biblioteka wykrywania twarzy w języku JavaScript śledzi Twoją głowę i przesuwa środowisko wraz z Tobą.

Etap wszystkich sieci

Aby stworzyć taki eksperyment, najlepiej wyobrazić sobie przeglądarkę jako scenę, a elementy takie jak <div>, obrazy, filmy i inne elementy jako zestawy umieszczone w przestrzeni 3D za pomocą CSS. Każdy element lub scena jest umiejscowiony na scenie przez przekształcenie 3D. Jeśli nie znasz przekształcenia translate3d, musi ono zawierać 3 parametry: X, Y i Z. X – wzdłuż poziomej linii, Y – w górę i w dół, a Z – bliżej lub dalej. Na przykład zastosowanie właściwości transform: translate3d(100px, -200px, 300px) spowoduje przesunięcie elementu o 100 pikseli w prawo, o 200 pikseli w dół i o 300 pikseli w stronę osoby przeglądającej.

Budowanie audytorium

Spójrzmy na ostatnią scenę i sprawdźmy, jak został złożony. Wszystkie sceny są podzielone na 3 główne kontenery: kontener świata, kontener perspektywy i scenę. Kontener świata skutecznie konfiguruje kamerę do wyświetlania widzów i używa właściwości CSS perspective, aby informować przeglądarkę, z jakiego miejsca będzie patrzeć na element. #perspective-container służy do zmiany perspektywy przez stosowanie w niej przekształceń 3D. Na scenie znajdują się też kompozycje, które będą widoczne na ekranie.

<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); % }
}

Wizualizacja sceny

Scena finałowa składa się z 7 elementów. Obejmują one tło nieba, warstwę mgły, drzwi, wodę, odbicia, dodatkową warstwę mgły i na koniec klify z przodu. Każdy element jest umieszczany na scenie z właściwością CSS transform: translate3d(x, y, z), która wskazuje, gdzie mieści się w przestrzeni 3D. Użyliśmy wartości z w podobny sposób, jak w przypadku właściwości z-index, ale dzięki właściwości translate3d możemy też podać jednostkę z tą wartością.

Ilustracja 1 przedstawia pomniejszoną i obróconą scenę o prawie 90 stopni, dzięki czemu można zobaczyć, w jaki sposób różne elementy składowe są rozmieszczone na scenie. Z tyłu (najdalej z lewej strony) widać tło, mgłę, drzwi, wodę i na koniec klify.

Umieszczanie tła na scenie

Zacznijmy od obrazu tła. Ponieważ siatka jest najdalej z tyłu, zastosowaliśmy przekształcenie o długości -990 pikseli na osi Z, aby przesunąć ją w dół z naszej perspektywy (patrz Rysunek 2).

na scenie z jedynym tłem w rozdzielczości -990 pikseli, — Rysunek 2. Scena z jedynym tłem umieszczonym w odległości -990 pikseli

Ponieważ obiekt cofa się w przestrzeni, zgodnie z prawem fizycznym trzeba go zmniejszyć, więc trzeba zmienić jego rozmiar za pomocą właściwości scale(3.3), by pasował do widocznego obszaru, i wyrównać górną krawędź do górnej krawędzi widocznego obszaru z translate3d na osi Y (zobacz ilustrację 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>; % }
}

Rysunek 3. Scena z określonym i skalowanym tłem. — Rysunek 3. Scena z ustalonym i skalowanym tylko tłem.

Mgła, drzwi i klify w taki sam sposób – w każdym przypadku zastosowano właściwość translate3d o odpowiedniej pozycji Z i odpowiednim współczynniku skali (zobacz ilustrację 4). Spójrzcie, jak mgła kryje się za drzwiami i za klifami.

Rysunek 4. Scena z mgłą, drzwiami i urwiskiem ułożonym i skalowanym.

Dodawanie morza

Aby stworzyć jak najbardziej realistyczne otoczenie, nie możemy po prostu ustawić wody na pionowej płaszczyźnie. Takie otoczenie zazwyczaj nie istnieje w świecie rzeczywistym. Oprócz zastosowania metody translate3d do ustawiania wody na scenie stosujemy też obrót w poziomie względem osi X o 60 stopni (rotateX(60deg)), dzięki czemu obraz wygląda na płasko i pofałdowana. Analogiczny obrót został dodany do odbicia drzwi i dodatkowej mgły, aby ukazywały się we właściwej płaszczyźnie (zobacz ilustrację 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>; % }
}

Rysunek 5. Scena, na której wszystkie elementy są ułożone i przeskalowane. — Rysunek 5. Scena, na której wszystkie elementy są ułożone i skalowane.

Każdą scenę zbudowano w podobny sposób, zwizualizowano elementy w przestrzeni 3D sceny i do każdej z nich zastosowano odpowiednie przekształcenie.