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

Logo Movi Kanti Revo

Movi.Kanti.Revo to nowy eksperyment w Chrome, który powstał we współpracy Cirque du Soleil i Subatomic Systems. Dzięki nowoczesnym technologiom internetowym pozwala on przenieść magię Cirque du Soleil do internetu.

Tworzenie świata 3D

Eksperyment został utworzony tylko w języku HTML5, a środowisko zostało w pełni zbudowane za pomocą znaczników i CSS. Podobnie jak elementy scenografii na scenie, div, img, małe video i inne elementy są umieszczane w przestrzeni 3D za pomocą CSS. Korzystanie z nowego interfejsu API getUserMedia umożliwiło zupełnie nowy sposób interakcji z eksperymentem. Zamiast klawiatury czy myszy biblioteka JavaScript do wykrywania twarzy śledzi ruchy głowy i przemieszcza otoczenie wraz z użytkownikiem.

Internet to scena

Aby przeprowadzić ten eksperyment, wyobraź sobie przeglądarkę jako scenę, a elementy takie jak <div>, obrazy, filmy i inne elementy jako elementy scenografii umieszczone w przestrzeni 3D za pomocą CSS. Każdy element lub element scenografii jest umieszczany na scenie przez zastosowanie transformacji 3D. Jeśli nie znasz transformacji translate3d, to 3 parametry: X, Y i Z. X przesuwa element wzdłuż linii poziomej, Y przesuwa element w górę i w dół, a Z przesuwa element bliżej lub dalej. Na przykład zastosowanie wartości transform: translate3d(100px, -200px, 300px) spowoduje przesunięcie elementu o 100 pikseli w prawo, 200 pikseli w dół i 300 pikseli bliżej widza.

Tworzenie sali konferencyjnej

Przyjrzyjmy się ostatniej scenie i zobaczmy, jak została złożona. Wszystkie sceny są podzielone na 3 główne kontenery: kontener świata, kontener perspektywy i scenę. Identyfikator świata skonfiguruje skutecznie kamerę widza i użyje właściwości CSS perspective, aby poinformować przeglądarkę, z jakiej perspektywy widz będzie oglądać element. Element #perspective-container służy do zmiany perspektywy przez zastosowanie do niego transformacji 3D. Scena zawiera rzeczywiste elementy, 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

W scenie końcowej jest 7 elementów. Idąc od tyłu do przodu, zobaczysz niebo, warstwę mgły, drzwi, wodę, odbicia, dodatkową warstwę mgły i w końcu klify na pierwszym planie. Każdy element jest umieszczany na scenie za pomocą właściwości CSS transform: translate3d(x, y, z), która wskazuje, gdzie element pasuje w przestrzeni 3D. Wartość z została użyta w podobny sposób jak z-index, ale w przypadku właściwości translate3d możemy też podać jednostkę z wartością.

Rysunek 1. Scena z boku
Ryc. 1. Scena z boku

Rysunek 1 przedstawia scenę po zbliżeniu i obrócone o prawie 90 stopni, aby można było zobaczyć, jak poszczególne elementy scenografii są rozmieszczone na scenie. W tle (po lewej stronie) widać tło, mgłę, drzwi, wodę i w końcu urwisko.

Umieszczenie tła na scenie

Zacznijmy od obrazu tła. Ponieważ jest ona najdalej, zastosowaliśmy transformację -990 pikseli na osi Z, aby przesunąć ją w naszej perspektywie (patrz rysunek 2).

Scena z tylko tłem umieszczonym w miejscu -990 pikseli
Rysunek 2. Scena z tłem umieszczonym w pozycji –990 pikseli

Gdy obiekt się cofa, zgodnie z zasadami fizyki staje się mniejszy, więc trzeba zmienić jego rozmiar za pomocą właściwości scale(3.3), aby pasował do widocznego obszaru, a jego górna krawędź musi być wyrównana z górną krawędzią widocznego obszaru za pomocą właściwości translate3d na osi y (patrz rysunek 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 umieszczonym i powiększonym tłem.
Rysunek 3. Scena z jedynie tłem umieszczonym i powiększonym.

Mgła, drzwi i klify w taki sam sposób, każdy z zastosowaniem translate3d z odpowiednim położeniem i współczynnikiem skalowania (patrz rys. 4). Zwróć uwagę, jak mgła gromadzi się za drzwiami i za klifami.

Rysunek 4. Ustawienie i wymiary sceny, mgły, drzwi i klifu
Ryc. 4. Scena z umiejscowioną i wymiarowaną mgłą, drzwiami i urwiskiem.

Dodawanie morza

Aby stworzyć jak najbardziej realistyczne środowisko, wiedzieliśmy, że nie możemy po prostu umieścić wody na płaszczyźnie pionowej, ponieważ w rzeczywistości tak się nie dzieje. Oprócz zastosowania translate3d do ustawienia wody na scenie stosujemy też obrócenie o 60 stopni (rotateX(60deg)) na osi X (poziomej), aby woda wyglądała na płaską i teksturowaną. Dodałem podobne obracanie do odbicia drzwi i drugiej mgły, aby były widoczne na właściwej płaszczyźnie (patrz rys. 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 z wszystkimi elementami w odpowiednim położeniu i rozmiarze.
Ryc. 5. Scena z wszystkimi elementami w odpowiednich miejscach i w odpowiednich rozmiarach.
>

Każda scena została zbudowana w podobny sposób, elementy zostały zwizualizowane w przestrzeni 3D sceny, a do każdej zastosowano odpowiednią transformację.

Więcej informacji