
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
, оно принимает три параметра: 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>; % }
}

Каждая сцена была построена одинаковым образом, элементы визуализировались в трехмерном пространстве сцены и к каждому применялось соответствующее преобразование.