
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 بكسل أقرب إلى
المشاهد.
إنشاء القاعة
لنلقِ نظرة على المشهد
المتأخر ونتعرّف على كيفية إنشائه. يتم تقسيم جميع المشاهد إلى
ثلاث حاويات أساسية، وهي حاوية العالم وحاوية المنظور
والحاوية المسرحية. تعمل حاوية العالم على ضبط كاميرا المشاهدين بفعالية، و
تستخدِم سمة CSS perspective
لإعلام المتصفّح بالمكان الذي
سينظر منه المشاهد إلى العنصر. يتم استخدام الرمز
#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); % }
}
تصور المرحلة
في المشهد النهائي، هناك سبعة عناصر ضمن المسرح. بدءًا من
الخلفية إلى الأمام، تشمل هذه الطبقات خلفية السماء وطبقة الضباب والأبواب
والماء والانعكاسات وطبقة ضباب إضافية وأخيراً المنحدرات في المقدّمة.
يتم وضع كل عنصر على المسرح باستخدام سمة CSS
transform: translate3d(x, y, z)
التي تشير إلى مكانه
في الفضاء الثلاثي الأبعاد. لقد استخدمنا قيمة z بالطريقة نفسها التي نستخدم بها
z-index
، ولكن باستخدام السمة translate3d
، يمكننا
أيضًا تقديم وحدة مع القيمة.

يعرض الشكل 1 المشهد بعد تكبيره وتدويره بزاوية 90 درجة تقريبًا حتى تتمكّن من الاطّلاع على طريقة وضع كل قطعة من قطع الإعداد المختلفة في المشهد. في الخلف (أقصى يمين الشاشة)، يمكنك رؤية الخلفية والضباب والأبواب والماء وأخيراً المنحدرات.
وضع الخلفية على المسرح
لنبدأ بصورة الخلفية. وبما أنّه الأبعد، طبّقنا تحويلًا بقيمة -990 بكسل على محور Z لإبعاده في منظورنا (راجِع الشكل 2).

وعندما يتحرك إلى الخلف في الفضاء، تتطلّب قوانين الفيزياء أن يصغر حجمه، لذا يجب
تغيير حجمه من خلال سمة scale(3.3)
ليلائم إطار العرض، ويجب
محاذاة الحافة العلوية مع أعلى إطار العرض باستخدام
translate3d
على محور y (راجِع الشكل 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>; % }
}

تم إنشاء كل مشهد بطريقة مشابهة، وتم عرض العناصر في المساحة الثلاثية الأبعاد للمسرح، وتم تطبيق تحويل مناسب على كل منها.