Movi Kanti Revo - Bagian 1 - Membangun Dunia 3D

Pete LePage

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.

Membangun Dunia 3D

Eksperimen ini dibuat hanya menggunakan HTML5, dan lingkungannya sepenuhnya dibuat dengan markup dan CSS. Seperti potongan set di atas tahap, div, img, video kecil, dan elemen lainnya diposisikan dalam ruang 3D menggunakan CSS. Menggunakan getUserMedia API yang baru memungkinkan cara baru untuk berinteraksi dengan eksperimen, bukan menggunakan keyboard atau mouse, library deteksi wajah JavaScript melacak kepala Anda dan menggerakkan lingkungan bersama Anda.

Semua Web Adalah Tahapan

Untuk membuat eksperimen ini, sebaiknya bayangkan browser sebagai panggung, dan elemen seperti <div>, gambar, video, dan elemen lainnya sebagai set yang diposisikan di ruang 3D menggunakan CSS. Setiap elemen, atau bagian set diposisikan pada bidang dengan menerapkan transformasi 3D. Jika Anda tidak terbiasa dengan transformasi translate3d, transformasi ini memerlukan 3 parameter, X, Y, dan Z. X memindahkan elemen 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 penampil.

Membangun Auditorium

Mari kita lihat adegan terakhir dan cara menyatukannya. Semua scene dibagi menjadi tiga container utama, container dunia, container perspektif, dan stage. Penampung dunia secara efektif menyiapkan kamera pelihat, dan menggunakan properti perspective CSS untuk memberi tahu browser dari mana pengguna akan melihat elemen. #perspective-container digunakan untuk mengubah perspektif dengan menerapkan transformasi 3D padanya. Akhirnya, tahap berisi set potongan aktual 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 Tahapan

Di dalam panggung, ada tujuh elemen dalam adegan akhir. Bergerak dari belakang ke depan, latar belakang tersebut meliputi latar belakang langit, lapisan kabut, pintu, air, pantulan, lapisan kabut tambahan, dan terakhir tebing di depan. Setiap item ditempatkan di atas panggung dengan properti CSS transform: translate3d(x, y, z) yang menunjukkan posisinya dalam ruang 3D. Kita menggunakan nilai z dengan cara yang sama seperti menggunakan z-index, tetapi dengan properti translate3d, kita juga dapat memberikan unit dengan nilai.

Gambar 1 menunjukkan scene yang diperkecil dan diputar hampir 90 derajat sehingga Anda dapat memvisualisasikan cara penempatan setiap bagian set yang berbeda dalam tahap. Di belakang (paling 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 posisi paling belakang, kami menerapkan transformasi -990px pada sumbu Z untuk mendorongnya kembali ke perspektif kami (lihat Gambar 2).

Panggung, dengan hanya latar belakang yang ditempatkan pada resolusi -990 piksel — Gambar 2: Panggung, dengan latar belakang yang ditempatkan pada -990 piksel

Saat bergerak kembali ke ruang angkasa, fisika menuntut agar ukurannya menjadi lebih kecil, sehingga perlu diubah ukurannya melalui properti scale(3.3) agar sesuai dengan area pandang dan diselaraskan 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>; % }
}

Gambar 3: Panggung, dengan latar belakang diposisikan dan diskalakan. — Gambar 3: Tahap, dengan hanya latar belakang yang diposisikan dan diskalakan.

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 ditumpuk di belakang pintu, dan di balik tebing.

Gambar 4: Panggung, dengan kabut, pintu, dan tebing yang diposisikan serta diskalakan.

Menambahkan Laut

Untuk menciptakan lingkungan yang serealistis mungkin, kami tahu bahwa kami tidak bisa begitu saja menempatkan air pada bidang vertikal, biasanya tidak ada seperti itu di dunia nyata. Selain menerapkan translate3d untuk memosisikan air pada bidang, kami juga menerapkan rotasi sumbu x (horizontal) 60 derajat (rotateX(60deg)) agar tampak rata 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>; % }
}

Gambar 5: Tahap, dengan semua yang diposisikan dan diskalakan.

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