Movi Kanti Revo - Bagian 1 - Membangun Dunia 3D

Logo Movi Kanti Revo.

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: Panggung dari samping
Gambar 1: Panggung dari samping.

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).

Panggung, dengan hanya latar belakang yang ditempatkan di -990 piksel
Gambar 2: Panggung, dengan hanya latar belakang yang ditempatkan di -990 piksel

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>; % }
}
Gambar 3: Panggung, dengan latar belakang diposisikan dan diskalakan.
Gambar 3: Panggung, 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 menumpuk di belakang pintu, dan di belakang tebing.

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

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>; % }
}
Gambar 5: Panggung, dengan semua elemen diposisikan dan diskalakan.
Gambar 5: Panggung, dengan semua yang diposisikan dan diskalakan.
>

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

Bacaan Lebih Lanjut