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).
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>; % }
}
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.
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>; % }
}
Każdą scenę zbudowano w podobny sposób, zwizualizowano elementy w przestrzeni 3D sceny i do każdej z nich zastosowano odpowiednie przekształcenie.