Movi.Kanti.Revo هي تجربة جديدة حسية في Chrome صمّمتها شركة Cirque du Soleil، وتم تطويرها من قِبل شركة SubAtomic Systems، وهي ميزة جديدة تجلب عجائب Cirque du Soleil إلى الويب من خلال تقنيات الويب الحديثة.
بناء العالم الثلاثي الأبعاد
تم إنشاء التجربة باستخدام HTML5 فقط، وتم تصميم البيئة بشكل كامل باستخدام الترميز وCSS. ومثل الأجزاء المحددة على المرحلة، يتم وضع عناصر div وimg وvideo الصغيرة والعناصر الأخرى في مساحة ثلاثية الأبعاد باستخدام CSS. أتاح استخدام واجهة برمجة التطبيقات getUserMedia الجديدة طريقة جديدة تمامًا للتفاعل مع التجربة، فبدلاً من استخدام لوحة المفاتيح أو الماوس، تتتبّع مكتبة JavaScript للتعرّف على الوجه رأسك وتحرّك البيئة المحيطة بك.
الويب هو خشبة مسرح
لإنشاء هذه التجربة، من الأفضل تصور المتصفّح على أنّه مرحلة، والعناصر مثل <div> والصور والفيديوهات وغيرها من العناصر كقطع محددة موضوعة في مساحة ثلاثية الأبعاد باستخدام CSS. يتم وضع كل عنصر أو قطعة مجموعة على
المسرح من خلال تطبيق تحويل ثلاثي الأبعاد. إذا لم تكن معتادًا على التحويل translate3d، فإن ذلك يتطلب 3 معلمات، X، وY، وZ. يقوم X بتحريك العنصر على طول خط أفقي، ويتحرك Y العنصر لأعلى ولأسفل،
وZ يحرّك العنصر إلى مكان أقرب أو بعيدًا. على سبيل المثال، يؤدي تطبيق transform: translate3d(100px, -200px, 300px) إلى تحريك العنصر بمقدار 100 بكسل إلى اليمين، و200 بكسل لأسفل، و300 بكسل أقرب إلى العارض.
بناء القاعة
هيا نلقي نظرة على المشهد الأخير ونرى كيف تم إعدادها. يتم تقسيم كل المشاهد إلى ثلاث حاويات أساسية، والحاوية العالمية، وحاوية المنظور، والمسرح. تعمل الحاوية العالمية على إعداد كاميرا المشاهدين بشكل فعّال وتستخدم السمة perspective في CSS لتحديد الموقع الجغرافي الذي سينظر منه المشاهد إلى العنصر. يُستخدم
#perspective-container لتغيير وجهة نظرنا من خلال
تطبيق التحويلات ثلاثية الأبعاد عليها. أخيرًا، تحتوي المرحلة على القطع
المحددة التي ستكون مرئية على الشاشة.
<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); % }
}
تصور المسرح
داخل المسرح، توجد سبعة عناصر في المشهد الأخير. عند الانتقال من الخلف إلى الأمام، تشمل خلفية السماء، وطبقة من الضباب، والأبواب، والماء، والانعكاسات، وطبقة ضباب إضافية، وأخيرًا المنحدرات الأمامية.
يتم وضع كل عنصر على الجزء الرئيسي باستخدام السمة transform: translate3d(x, y, z) CSS التي تشير إلى المكان المناسب للمساحة الثلاثية الأبعاد. لقد استخدمنا قيمة z على نحو مشابه نستخدمه لـ z-index، ولكن مع السمة translate3d، يمكننا أيضًا توفير وحدة مع القيمة.
يوضح الشكل 1 أنه تم تصغير المشهد وتدويره بنسبة 90 درجة تقريبًا بحيث يمكنك تصور طريقة وضع كل مجموعة من القطع المختلفة داخل المرحلة. في الخلف (في أقصى اليسار)، يمكنك رؤية الخلفية والضباب والأبواب والمياه، وأخيرًا المنحدرات.
وضع الخلفية على المسرح
لنبدأ بصورة الخلفية. وبما أن هذا العنصر هو في أقصى الخلف، فقد طبقنا تحويل -990 بكسل على المحور Z لتحريكه مرة أخرى في منظورنا (انظر الشكل 2).
عندما ينتقل إلى الوراء في الفضاء، تتطلب الفيزياء تصغيره، لذلك يجب تغيير حجمه من خلال خاصية scale(3.3) ليناسب إطار العرض مع محاذاة الحافة العلوية مع الجزء العلوي من إطار العرض باستخدام العلامة translate3d على المحور ص (انظر الشكل 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>; % }
}
الضباب والأبواب والمنحدرات بالطريقة نفسها، وكل ذلك من خلال تطبيق
translate3d مع موضع z وعامل قياس مناسبين
(انظر الشكل 4). لاحظ كيف يكدس الضباب خلف الأبواب وخلف
المنحدرات.
إضافة البحر
لإنشاء بيئة واقعية قدر الإمكان، كنا نعرف أنه لا يمكننا ببساطة وضع الماء على مستوى عمودي، إلا أنه عادةً لا يكون موجودًا بهذه الطريقة في العالم الحقيقي. بالإضافة إلى تطبيق السمة translate3d على وضع المياه على الجزء الرئيسي، نطبق أيضًا دورانًا على المحور س (أفقيًا) بمقدار 60 درجة (rotateX(60deg)) كي يظهر بشكل مستوٍ ومزخرف.
تمت إضافة تدوير مماثل إلى انعكاس الباب والضباب الثانوي لإظهاره على المستوى الصحيح (انظر الشكل 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>; % }
}
تم تصميم كل مشهد بطريقة مماثلة، وتم تصور العناصر داخل المساحة ثلاثية الأبعاد للمسرح، وتم تطبيق التحويل المناسب على كل منها.