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. Dzięki nowemu interfejsowi API getUserMedia możliwe było wprowadzenie zupełnie nowego sposobu interakcji z eksperymentem. Zamiast klawiatury czy myszy wykorzystaliśmy bibliotekę JavaScript do wykrywania twarzy, która śledzi ruchy głowy i przesuwa 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 auli
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. #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
Na scenie znajduje się 7 elementów w końcowej scenie. Idąc od tyłu do przodu, zobaczysz niebo, warstwę mgły, drzwi, wodę, odbicia, dodatkową warstwę mgły i w końcu skały z przodu.
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 px na osi Z, aby przesunąć ją do tyłu (patrz rysunek 2).
Gdy obiekt się cofa, prawa fizyki nakazują, aby się zmniejszał, więc należy zmienić jego rozmiar za pomocą właściwości scale(3.3), aby pasował do widocznego obszaru, oraz wyrównać górną krawędź 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 użyciem
translate3d z odpowiednim położeniem z oraz 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 obrócenie do odbicia drzwi i drugiego mglistego obiektu, aby były widoczne w prawidłowej 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 odpowiednie przekształcenie.