Movi.Kanti.Revo là một thử nghiệm Chrome cảm giác mới do Cirque du Soleil tạo ra và do Subatomic Systems phát triển, mang sự kỳ diệu của Cirque du Soleil đến với web thông qua các công nghệ web hiện đại.
Xây dựng thế giới 3D
Thử nghiệm được tạo chỉ bằng HTML5 và môi trường được xây dựng hoàn toàn bằng mã đánh dấu và CSS. Giống như các phần đã dựng sẵn 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 cách sử dụng CSS. Việc sử dụng API getUserMedia mới đã mang đến một cách hoàn toàn mới để tương tác với thử nghiệm, thay vì 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.
Tất cả các giai đoạn của web
Để tạo thử nghiệm này, tốt nhất bạn nên tưởng tượng trình duyệt là một giai đoạn và các phần tử như <div>, hình ảnh, video và các phần tử khác như là các phần được đặt trong không gian 3D bằng CSS. Mỗi phần tử hoặc phần tử cố định được đặt trên vùng hiển thị bằng cách áp dụng phép biến đổi 3D. Nếu bạn chưa quen thuộc với phép biến đổi translate3d, bạn cần 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ụ: khi áp dụng transform: translate3d(100px, -200px, 300px), phần tử sẽ di chuyển phần tử 100 pixel sang phải, xuống 200 pixel và tiến gần hơn 300 pixel về phía trình xem.
Xây dựng khán phòng
Hãy cùng xem cảnh cuối và xem cách kết hợp cảnh này. Tất cả cảnh được chia thành 3 vùng chứa chính: vùng chứa thế giới, vùng chứa phối cảnh và vùng hiển thị. 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 nơi mà người xem sẽ xem phần tử. #perspective-container dùng để thay đổi góc nhìn của chúng ta bằng cách áp dụng các phép biến đổi 3D cho đối tượng đó. Cuối cùng, giai đoạn này chứa các phần đã tập hợp 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); % }
}
Hình ảnh hoá vùng hiển thị
Có 7 thành phần trong cảnh cuối cùng. Di chuyển từ sau ra trước, bao gồm nền trời, lớp sương mù, cửa ra vào, nước, bóng phản chiếu, lớp sương mù bổ sung và cuối cùng là những vách đá ở phía trước.
Mỗi mục được đặt lên vùng hiển thị bằng một thuộc tính CSS transform: translate3d(x, y, z) cho biết vị trí mục đó nằm vừa trong không gian 3D. Chúng ta sử dụng giá trị z theo cách tương tự như z-index. Tuy nhiên, với thuộc tính translate3d, chúng ta cũng có thể cung cấp một đơn vị cùng với giá trị.
Hình 1 cho thấy cảnh được thu nhỏ và xoay gần như 90 độ để bạn có thể hình dung cách đặt từng phần trong bối cảnh. Ở phía sau (xa nhất về bên trái), bạn có thể thấy nền, sương mù, cửa ra vào, nước và cuối cùng là các vách đá.
Hiển thị nền
Hãy bắt đầu với hình nền. Vì đây là điểm lùi xa nhất, nên chúng tôi đã áp dụng phép biến đổi -990px trên trục Z để đẩy nó trở lại theo góc nhìn của mình (xem Hình 2).
Khi di chuyển trở lại không gian, vật lý yêu cầu nó nhỏ hơn, vì vậy cần được đổ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 đỉnh của 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>; % }
}
Sương mù, cửa và vách đá theo cách tương tự, áp dụng một translate3d với một 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ù che phủ sau cánh cửa và
sau các vách đá.
Thêm biển
Để tạo ra một môi trường thực tế nhất có thể, chúng tôi biết rằng chúng tôi không thể chỉ đơn giản là
đặt nước trên một mặt phẳng thẳng đứng, nó thường không tồn tại theo cách đó
trong thế giới thực. Ngoài việc áp dụng translate3d để định vị vùng nước trên vùng hiển thị, chúng ta cũng áp dụng chế độ xoay trục x (ngang) 60 độ (rotateX(60deg)) để làm cho vùng nước trông phẳng và có hoạ tiết.
Một góc xoay tương tự đã được thêm vào phản chiếu cửa và sương mù thứ cấp để làm cho nó xuất hiện trong đú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>; % }
}
Mỗi cảnh được xây dựng theo một cách tương tự nhau, các phần tử được trực quan hoá trong không gian 3D của sân khấu và một phép biến đổi phù hợp đã được áp dụng cho từng cảnh.