Movi.Kanti.Revo to nowy eksperyment w Chrome, który powstał we współpracy Cirque du Soleil i Subatomic Systems. Dzięki nowoczesnym technologiom internetowych 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 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. Obiekt #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 sposób podobny do właściwości 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 rys. 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 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, zastosowaliśmy też obrót 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ę.