Movi.Kanti.Revo — это новый сенсорный эксперимент Chrome, созданный Cirque du Soleil и разработанный Subatomic Systems, который переносит чудеса Cirque du Soleil в Интернет с помощью современных веб-технологий.
Создание 3D-мира
Эксперимент был создан с использованием только HTML5, а среда полностью построена с помощью разметки и CSS. Подобно декорациям на сцене, div s, img s, небольшие video s и другие элементы размещаются в трехмерном пространстве с помощью CSS. Использование нового API getUserMedia позволило совершенно по-новому взаимодействовать с экспериментом, вместо использования клавиатуры или мыши, библиотека распознавания лиц JavaScript отслеживает вашу голову и перемещает среду вместе с вами.
Вся паутина — это сцена
Чтобы построить этот эксперимент, лучше всего представить браузер как сцену, а элементы, такие как <div> s, изображения, видео и другие элементы, как набор частей, размещенных в трехмерном пространстве с помощью CSS. Каждый элемент или набор частей размещается на сцене путем применения трехмерного преобразования. Если вы не знакомы с преобразованием translate3d , оно принимает 3 параметра: X, Y и Z. X перемещает элемент по горизонтальной линии, Y перемещает элемент вверх и вниз, а Z перемещает элемент ближе или дальше. Например, применение transform: translate3d(100px, -200px, 300px) переместит элемент на 100 пикселей вправо, на 200 пикселей вниз и на 300 пикселей ближе к зрителю.
Строительство Аудитории
Давайте взглянем на последнюю сцену и посмотрим, как она собрана. Все сцены разбиты на три основных контейнера: контейнер мира, контейнер перспективы и сцена. Контейнер мира эффективно настраивает камеру зрителя и использует свойство CSS perspective , чтобы сообщить браузеру, откуда зритель будет смотреть на элемент. #perspective-container используется для изменения нашей перспективы путем применения к ней 3D-преобразований. Наконец, сцена содержит фактические элементы набора, которые будут видны на экране.
<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); % }
}
Визуализация сцены
В сцене есть семь элементов в финальной сцене. Двигаясь от заднего плана к переднему, они включают фон неба, слой тумана, двери, воду, отражения, дополнительный слой тумана и, наконец, скалы впереди. Каждый элемент размещается на сцене с CSS-свойством transform: translate3d(x, y, z) , которое указывает, где он вписывается в трехмерное пространство. Мы использовали значение z таким же образом, как использовали бы z-index , но с помощью свойства translate3d мы также можем предоставить единицу со значением.
На рисунке 1 показана сцена, уменьшенная и повернутая почти на 90 градусов, чтобы вы могли визуализировать, как каждая из различных частей декораций размещена на сцене. На заднем плане (самом левом) вы можете видеть фон, туман, двери, воду и, наконец, скалы.
Размещение фона на сцене
Начнем с фонового изображения. Поскольку оно находится дальше всего, мы применили трансформацию -990px по оси Z, чтобы отодвинуть его назад в нашей перспективе (см. рисунок 2).
По мере того, как он движется обратно в пространстве, физика требует, чтобы он становился меньше, поэтому его размер необходимо изменить с помощью свойства scale(3.3) , чтобы он соответствовал окну просмотра, и выровнять верхний край с верхом окна просмотра с помощью translate3d по оси Y (см. рисунок 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>; % }
}
Туман, двери и скалы тем же способом, каждый раз применяя translate3d с соответствующим положением z и масштабным коэффициентом (см. Рисунок 4). Обратите внимание, как туман накладывается за дверями и за скалами.
Добавляем море
Чтобы создать максимально реалистичную среду, мы знали, что не можем просто поместить воду в вертикальную плоскость, в реальном мире она обычно не существует. В дополнение к применению translate3d для позиционирования воды на сцене, мы также применяем поворот по оси x (горизонтальный) на 60 градусов ( rotateX(60deg) ), чтобы она выглядела плоской и текстурированной. Аналогичный поворот был добавлен к отражению двери и вторичному туману, чтобы он отображался в правильной плоскости (см. рисунок 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>; % }
}
Каждая сцена была построена схожим образом, элементы визуализировались в трехмерном пространстве сцены, и к каждому из них применялось соответствующее преобразование.