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