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

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

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.

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

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