Movi Kanti Revo - الجزء 1 - بناء العالم الثلاثي الأبعاد

Pete LePage

شعار Movi Kanti Revo

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. يحرِّك المحور س العنصر على طول خط أفقي، ويحرِّك المحور ص العنصر للأعلى وللأسفل، ويحرِّك المحور ص العنصر أقرب أو أبعد. على سبيل المثال، سيؤدي تطبيق قيمة 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: المسرح من الجانب
الشكل 1: المسرح من الجانب

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

وضع الخلفية على المسرح

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

المسرح، مع وضع الخلفية فقط على -990px
الشكل 2: المسرح مع الخلفية فقط في -990 بكسل

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

الضباب والأبواب والمنحدرات بالطريقة نفسها، كلٌّ منها من خلال تطبيق translate3d مع موضع z وعامل مقياس مناسبين (راجِع الشكل 4). لاحظ كيف يتراكم الضباب خلف الأبواب وخلف المنحدرات.

الشكل 4: المسرح مع الضباب والأبواب والمنحدر تم وضعها وتغيير حجمها
الشكل 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>; % }
}
الشكل 5: المسرح، مع تحديد موضع كل شيء وتغيير حجمه
الشكل 5: المسرح، مع تحديد موضع كل شيء وتغيير حجمه
>

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

مراجع إضافية