Movi Kanti Revo - Phần 1 - Xây dựng thế giới 3D

Biểu trưng của Movi Kanti Revo.

Movi.Kanti.Revo là một thử nghiệm Chrome mới về giác quan do Cirque du Soleil tạo ra và được Subatomic Systems phát triển, mang đến sự kỳ diệu của Cirque du Soleil cho web thông qua các công nghệ web hiện đại.

Xây dựng thế giới 3D

Thử nghiệm này được tạo chỉ bằng HTML5 và môi trường được tạo hoàn toàn bằng mã đánh dấu và CSS. Giống như các phần thiết lập trên sân khấu, div, img, video nhỏ và các phần tử khác được định vị trong không gian 3D bằng CSS. Việc sử dụng API getUserMedia mới đã cho phép một cách tương tác hoàn toàn mới với thử nghiệm, thay vì sử dụng bàn phím hoặc chuột, thư viện phát hiện khuôn mặt JavaScript sẽ theo dõi đầu của bạn và di chuyển môi trường cùng với bạn.

Mọi trang web đều là một sân khấu

Để xây dựng thử nghiệm này, tốt nhất bạn nên tưởng tượng trình duyệt là một sân khấu và các phần tử như <div>, hình ảnh, video và các phần tử khác là các mảnh được đặt trong không gian 3D bằng CSS. Mỗi phần tử hoặc mảnh được đặt trên sân khấu bằng cách áp dụng phép biến đổi 3D. Nếu bạn chưa quen với phép biến đổi translate3d, thì phép biến đổi này sẽ có 3 tham số là X, Y và Z. X di chuyển phần tử dọc theo một đường ngang, Y di chuyển phần tử lên và xuống, còn Z di chuyển phần tử lại gần hoặc ra xa hơn. Ví dụ: việc áp dụng transform: translate3d(100px, -200px, 300px) sẽ di chuyển phần tử 100 pixel sang phải, 200 pixel xuống dưới và 300 pixel gần người xem hơn.

Xây dựng khán phòng

Hãy cùng xem cảnh cuối cùng và cách kết hợp cảnh này. Tất cả cảnh được chia thành ba vùng chứa chính, vùng chứa thế giới, vùng chứa phối cảnh và sân khấu. Vùng chứa thế giới thiết lập hiệu quả máy ảnh của người xem và sử dụng thuộc tính perspective CSS để cho trình duyệt biết vị trí người xem sẽ xem phần tử. #perspective-container được dùng để thay đổi phối cảnh bằng cách áp dụng các phép biến đổi 3D cho phối cảnh đó. Cuối cùng, sân khấu chứa các mảnh thực tế sẽ hiển thị trên màn hình.

<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); % }
}

Trực quan hoá giai đoạn

Trong sân khấu, có 7 phần tử trong cảnh cuối cùng. Di chuyển từ sau ra trước, các lớp này bao gồm nền trời, lớp sương mù, cửa, nước, hình phản chiếu, lớp sương mù bổ sung và cuối cùng là vách đá ở phía trước. Mỗi mục được đặt trên sân khấu bằng một thuộc tính CSS transform: translate3d(x, y, z) cho biết vị trí của mục đó trong không gian 3D. Chúng ta đã sử dụng giá trị z theo cách tương tự như cách sử dụng z-index, nhưng với thuộc tính translate3d, chúng ta cũng có thể cung cấp một đơn vị có giá trị.

Hình 1: Sân khấu nhìn từ bên cạnh
Hình 1: Sân khấu nhìn từ bên cạnh.

Hình 1 cho thấy cảnh được thu nhỏ và xoay gần 90 độ để bạn có thể hình dung cách mỗi phần của cảnh được đặt trong sân khấu. Ở phía sau (xa nhất về bên trái), bạn có thể thấy nền, sương mù, cửa, nước và cuối cùng là vách đá.

Đặt nền trên sân khấu

Hãy bắt đầu với hình nền. Vì đây là phần lùi xa nhất, nên chúng ta đã áp dụng phép biến đổi -990px trên trục Z để đẩy phần này lùi trong phối cảnh (xem Hình 2).

Phông nền, chỉ có nền được đặt ở -990px
Hình 2: Phông nền, chỉ đặt ở -990px

Khi di chuyển trở lại trong không gian, vật thể cần phải nhỏ hơn, do đó, cần phải thay đổi kích thước thông qua thuộc tính scale(3.3) để vừa với khung nhìn và căn chỉnh cạnh trên cùng với đầu khung nhìn bằng translate3d trên trục y (xem Hình 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>; % }
}
Hình 3: Phông nền được định vị và điều chỉnh theo tỷ lệ.
Hình 3: Phông nền, chỉ có nền được định vị và điều chỉnh theo tỷ lệ.

Sương mù, cửa và vách đá theo cách tương tự, mỗi lần áp dụng một translate3d với vị trí z và hệ số tỷ lệ thích hợp (xem Hình 4). Hãy chú ý đến cách sương mù xếp chồng lên nhau phía sau các cánh cửa và phía sau vách đá.

Hình 4: Phông nền, với sương mù, cửa và vách đá được định vị và điều chỉnh theo tỷ lệ
Hình 4: Phông nền, với sương mù, cửa và vách đá được định vị và điều chỉnh theo tỷ lệ.

Thêm biển

Để tạo ra môi trường chân thực nhất có thể, chúng tôi biết rằng không thể chỉ đặt nước trên một mặt phẳng dọc, vì nước thường không tồn tại như vậy trong thế giới thực. Ngoài việc áp dụng translate3d để đặt nước trên sân khấu, chúng ta cũng áp dụng chế độ xoay trục x (nằm ngang) 60 độ (rotateX(60deg)) để nước trông phẳng và có kết cấu. Một góc xoay tương tự đã được thêm vào hình ảnh phản chiếu của cửa và sương mù phụ để hình ảnh đó xuất hiện ở đúng mặt phẳng (xem Hình 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>; % }
}
Hình 5: Phông nền, với mọi thứ được định vị và điều chỉnh theo tỷ lệ.
Hình 5: Phông nền, với mọi thứ được định vị và điều chỉnh theo tỷ lệ.
>

Mỗi cảnh được tạo theo cách tương tự, các phần tử được hình dung trong không gian 3D của một sân khấu và một phép biến đổi thích hợp được áp dụng cho từng cảnh.

Tài liệu đọc thêm