
Movi.Kanti.Revo adalah eksperimen Chrome sensorik baru yang dibuat oleh Cirque du Soleil dan dikembangkan oleh Subatomic Systems yang menghadirkan keajaiban Cirque du Soleil ke web melalui teknologi web modern.
Membuat Dunia 3D
Eksperimen ini dibuat hanya menggunakan HTML5, dan lingkungannya dibuat sepenuhnya dengan markup dan CSS. Seperti set piece di
panggung, div
, img
, video
kecil, dan
elemen lainnya diposisikan dalam ruang 3D menggunakan CSS. Penggunaan getUserMedia
API
yang baru memungkinkan cara baru untuk berinteraksi dengan
eksperimen. Library deteksi wajah JavaScript
melacak kepala Anda dan menggerakkan lingkungan bersama Anda, bukan menggunakan keyboard atau mouse.
Semua Web adalah Panggung
Untuk membuat eksperimen ini, sebaiknya bayangkan browser sebagai panggung, dan elemen seperti <div>
, gambar, video, dan elemen lainnya sebagai potongan set yang diposisikan di ruang 3D menggunakan CSS. Setiap elemen, atau bagian set,
diposisikan di panggung dengan menerapkan transformasi 3D. Jika Anda belum memahami
transformasi translate3d
, transformasi ini memerlukan 3 parameter, X, Y, dan Z. X
memindahkan elemen di sepanjang garis horizontal, Y memindahkan elemen ke atas dan ke bawah,
dan Z memindahkan elemen lebih dekat atau lebih jauh. Misalnya, menerapkan
transform: translate3d(100px, -200px, 300px)
akan memindahkan elemen
100 piksel ke kanan, 200 piksel ke bawah, dan 300 piksel lebih dekat ke
pelihat.
Membuat Auditorium
Mari kita lihat adegan
terakhir dan melihat cara menyusunnya. Semua tampilan dibagi menjadi
tiga penampung utama, penampung dunia, penampung perspektif, dan
panggung. Penampung dunia secara efektif menyiapkan kamera pelihat, dan
menggunakan properti perspective
CSS untuk memberi tahu browser tempat
pelihat akan melihat elemen. #perspective-container
digunakan untuk mengubah perspektif kita dengan
menerapkan transformasi 3D ke dalamnya. Terakhir, panggung berisi bagian set
yang sebenarnya yang akan terlihat di layar.
<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); % }
}
Memvisualisasikan Tahap
Dalam panggung, ada tujuh elemen di scene akhir. Berpindah dari
belakang ke depan, lapisan tersebut mencakup latar belakang langit, lapisan kabut, pintu, air, refleksi, lapisan kabut tambahan, dan terakhir tebing di depan.
Setiap item ditempatkan di panggung dengan properti CSS transform: translate3d(x, y, z)
yang menunjukkan tempatnya sesuai dalam ruang 3D. Kita menggunakan nilai z dengan cara yang mirip dengan cara kita menggunakan
z-index
, tetapi dengan properti translate3d
, kita juga dapat
memberikan unit dengan nilai.

Gambar 1 menunjukkan tampilan yang diperkecil dan diputar hampir 90 derajat sehingga Anda dapat memvisualisasikan cara setiap bagian set yang berbeda ditempatkan dalam panggung. Di bagian belakang (paling jauh ke kiri), Anda dapat melihat latar belakang, kabut, pintu, air, dan terakhir tebing.
Menempatkan Latar Belakang di Panggung
Mari kita mulai dengan gambar latar. Karena berada paling jauh di belakang, kami menerapkan transformasi -990 piksel pada sumbu Z untuk mendorongnya kembali dalam perspektif kita (lihat Gambar 2).

Saat bergerak kembali dalam ruang, fisika menuntut agar ukurannya menjadi lebih kecil, sehingga perlu
diubah ukurannya melalui properti scale(3.3)
agar sesuai dengan area pandang dan
meratakan tepi atas dengan bagian atas area pandang dengan
translate3d
pada sumbu y (lihat Gambar 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>; % }
}

Kabut, pintu, dan tebing dengan cara yang sama, masing-masing dengan menerapkan
translate3d
dengan posisi z dan faktor skala yang sesuai
(lihat Gambar 4). Perhatikan bagaimana kabut menumpuk di belakang pintu, dan di belakang
tebing.

Menambahkan Laut
Untuk membuat lingkungan yang serealistis mungkin, kita tahu bahwa kita tidak bisa begitu saja
menempatkan air di bidang vertikal, karena biasanya tidak ada di
dunia nyata. Selain menerapkan translate3d
untuk
memosisikan air di panggung, kita juga menerapkan rotasi sumbu x (horizontal) sebesar
60 derajat (rotateX(60deg)
) agar terlihat datar dan bertekstur.
Rotasi serupa ditambahkan ke refleksi pintu dan kabut sekunder agar
muncul di bidang yang benar (lihat Gambar 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>; % }
}

Setiap scene dibuat dengan cara yang serupa, elemen divisualisasi dalam ruang 3D panggung, dan transformasi yang sesuai diterapkan ke setiap elemen.