بناء لعبة WebGL عبر منصة مع Babylon.js

إليك تحدٍ لك: ماذا عن بناء لعبة ثلاثية الأبعاد خلال عطلة نهاية الأسبوع؟ Babylon.js هو إطار عمل JavaScript لإنشاء ألعاب ثلاثية الأبعاد باستخدام HTML5 و WebGL و Web Audio ، تم إنشاؤه بواسطة فريقك أنت وفريق Babylon.js. للاحتفال بالإصدار 2.3 الجديد من المكتبة ، قررنا إنشاء عرض توضيحي جديد باسم "Sponza" لتسليط الضوء على ما يمكن فعله باستخدام محرك WebGL و HTML5 عندما يتعلق الأمر ببناء ألعاب رائعة في الوقت الحاضر.

كانت الفكرة هي إنشاء تجربة متسقة ، متشابهة ، إن لم تكن متطابقة ، على جميع الأنظمة الأساسية المدعومة من WebGL ومحاولة الوصول إلى ميزات التطبيقات الأصلية. في هذه المقالة ، سأشرح كيف يعمل كل شيء معًا ، جنبًا إلى جنب مع التحديات المختلفة التي واجهناها والدروس التي تعلمناها أثناء بنائها.

مزيد من القراءة على SmashingMag:

• بناء شادر مع Babylon.js
• استخدام واجهة برمجة تطبيقات Gamepad في ألعاب الويب
• مقدمة في النمذجة المضلعة و Three.js
• كيفية إنشاء آلة طبل متجاوبة 8 بت

لتحقيق هذا الهدف ، تستخدم Sponza عددًا من ميزات HTML5 مثل WebGL و Web Audio ، بالإضافة إلى أحداث المؤشر (مدعومة على نطاق واسع الآن بفضل jQuery PEP polyfill) و Gamepad API و IndexedDB و HTML5 AppCache و CSS3. API. يمكنك اختبار العرض التوضيحي لـ Sponza على سطح المكتب أو الهاتف المحمول أو Xbox One.

اكتشاف العرض التوضيحي

أولاً ، ستبدأ في تسلسل رسوم متحركة تلقائي لمنح الائتمانات لمن قام ببناء المشهد. يأتي معظم أعضاء الفريق من المشهد التجريبي. ستكتشف أن هذا جزء مهم من ثقافة المطورين ثلاثي الأبعاد. من جانبي ، كنت في Atari بينما كان David Catuhe في Amiga التي لا تزال مصدرًا منتظمًا للصراعات بيننا ، صدق أو لا تصدق. كنت أقوم بترميز بعض الشيء ولكني ألّف الموسيقى بشكل أساسي في مجموعتي التجريبية. كنت من أشد المعجبين بـ Future Crew وبشكل أكثر تحديدًا لـ Purple Motion ، الملحن المفضل للمشهد التجريبي في كل العصور. لكن دعونا لا نحيد عن الموضوع.

بالنسبة لـ Sponza ، ها هم المساهمون:

• قام Michel Rousseau المعروف أيضًا باسم "Mitch" بعمل رسوم متحركة مرئية رائعة وتقديم تحسينات كفنان ثلاثي الأبعاد. استغرق الأمر نموذج Sponza الذي قدمته Crytek مجانًا على موقعه على الويب واستخدم مصدر 3DS Max لإنشاء ما تراه.
• David Catuhe المعروف أيضًا باسم "deltakosh" ولقد قمت بالجزء الأساسي من محرك Babylon.js وأيضًا جميع التعليمات البرمجية للعرض التوضيحي (مُحمل مخصص ، مؤثرات خاصة للوضع التجريبي باستخدام عمليات التلاشي إلى اللون الأسود وما إلى ذلك) بالإضافة إلى نوع جديد من الكاميرات يسمى " UniversalCamera " يتعامل مع جميع أنواع المدخلات بطريقة عامة.
• لقد قمت بتأليف الموسيقى باستخدام Renoise وبنك صوت EastWest Symphonic Orchestra. إذا كنت مهتمًا ، فقد شاركت بالفعل سير العمل والعملية في المقالة حول تأليف الموسيقى للعبة World Monger Windows 8 باستخدام Renoise tracker & East West VST Plug-ins
• ساعدنا Julien Moreau-Mathis من خلال بناء أداة جديدة لمساعدة الفنانين ثلاثي الأبعاد على إنهاء المهمة بين أدوات النمذجة (3DS Max ، Blender) والنتيجة النهائية. على سبيل المثال ، استخدمها ميشيل لاختبار وضبط العديد من الكاميرات المتحركة ولحقن الجسيمات في المشهد.

إذا انتظرت حتى نهاية التسلسل التلقائي حتى "النهاية الملحمية" ، فسيتم تحويلك تلقائيًا إلى الوضع التفاعلي. إذا كنت ترغب في تجاوز الوضع التجريبي ، فما عليك سوى النقر فوق رمز الكاميرا أو الضغط على A في لوحة الألعاب.

في الوضع التفاعلي ، إذا كنت تستخدم جهاز Mac أو كمبيوتر شخصي ، فستتمكن من التحرك داخل المشهد باستخدام لوحة المفاتيح / الماوس مثل لعبة FPS. إذا كنت تستخدم هاتفًا ذكيًا ، فستتمكن من التحرك بلمسة واحدة (و 2 لتدوير الكاميرا). أخيرًا ، على Xbox One ، يمكنك استخدام لوحة الألعاب (أو سطح المكتب إذا كنت تقوم بتوصيل لوحة الألعاب بها). حقيقة ممتعة: على جهاز كمبيوتر يعمل بنظام Windows ، يمكنك استخدام 3 أنواع من الإدخال في نفس الوقت.

يختلف الجو في الوضع التفاعلي. لديك ثلاثة مصادر صوتية للعواصف موضوعة بشكل عشوائي في بيئة ثلاثية الأبعاد ، وهبوب الرياح وشقوق النار في كل زاوية. في المتصفحات المدعومة (Chrome و Firefox و Opera و Safari) ، يمكنك حتى التبديل بين وضع مكبر الصوت العادي ووضع سماعة الرأس من خلال النقر على الرمز المخصص. سيستخدم بعد ذلك عرض الصوت بكلتا الأذنين لـ Web Audio لمحاكاة صوتية أكثر واقعية - إذا كنت تستمع عبر سماعات الرأس.

للحصول على تجربة كاملة شبيهة بالتطبيق ، قمنا بإنشاء أيقونات ومربعات لجميع الأنظمة الأساسية. هذا يعني ، على سبيل المثال ، أنه في Windows ⁸ ⁄ ₁₀ يمكنك تثبيت تطبيق الويب في قائمة "ابدأ". لدينا حتى أحجام متعددة متاحة:

غير متصل أولا!

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

نحن نستخدم طبقة IndexedDB المتوفرة أصلاً داخل Babylon.js لذلك. يتم تخزين المشهد (تنسيق JSON) والموارد (مواد JPG / PNG وكذلك MP3 للموسيقى والأصوات) في IDB. توفر طبقة IDB المقترنة بذاكرة التخزين المؤقت لتطبيق HTML5 تجربة وضع عدم الاتصال. لمعرفة المزيد حول هذا الجزء وكيفية تكوين لعبتك للحصول على نتائج مماثلة ، يمكنك قراءة المقالة حول استخدام IndexedDB للتعامل مع أصول WebGL ثلاثية الأبعاد الخاصة بك: مشاركة تعليقات ونصائح Babylon.JS و Caching Resources في IndexedDB في Babylon.js

يستمتع Xbox One بالعرض

أخيرًا وليس آخرًا ، يعمل نفس العرض التوضيحي بشكل لا تشوبه شائبة في MS Edge على جهاز Xbox One الخاص بك:

اضغط على A للتبديل إلى الوضع التفاعلي . سيعلمك Xbox One أنه يمكنك الآن التحرك باستخدام لوحة الألعاب داخل المشهد ثلاثي الأبعاد:

لذا ، دعونا نلخص بإيجاز.

تعمل قاعدة الشفرة نفسها عبر أنظمة تشغيل Mac و Linux و Windows على MS Edge و Chrome و Firefox و Opera و Safari وعلى iPhone / iPad وعلى أجهزة Android مع Chrome أو Firefox و Firefox OS وعلى Xbox One! أليس هذا رائعًا؟ أن تكون قادرًا على استهداف العديد من الأجهزة بتجربة أصلية كاملة على حد سواء مباشرة من خادم الويب الخاص بك؟

لقد شاركت بالفعل حماسي حول إمكانات التكنولوجيا في مقال سابق على الويب: حدود اللعبة التالية؟

هاك المشهد مع طبقة التصحيح

إذا كنت ترغب في فهم كيف يتقن ميشيل سحر النمذجة ثلاثية الأبعاد ، فيمكنك اختراق المشهد باستخدام أداة Babylon.js Debug Layer . لتمكينه على جهاز به لوحة مفاتيح ، اضغط على CMD/CTRL + SHIFT + D وإذا كنت تستخدم لوحة ألعاب على الكمبيوتر الشخصي أو Xbox ، فاضغط على Y يرجى ملاحظة أن عرض طبقة التصحيح يكلف قليلاً من الأداء بسبب مهمة التركيب التي يحتاجها محرك العرض. لذا فإن FPS المعروضة أقل أهمية قليلاً من FPS الحقيقية التي حصلت عليها دون عرض طبقة التصحيح.

دعنا نختبرها على جهاز كمبيوتر ، على سبيل المثال.

تحرك بالقرب من رأس الأسد وقطع قناة التضاريس من خط أنابيب الظل الخاص بنا:

يجب أن ترى أن الرأس أصبح الآن أقل واقعية. العب مع القناة الأخرى للتحقق مما يحدث.

يمكنك أيضًا قطع محرك البرق الديناميكي أو تعطيل محرك التصادم ليطير أو يتحرك عبر الجدران. على سبيل المثال ، قم بتعطيل مربع الاختيار " الاصطدامات " وانتقل إلى الطابق الأول. ضع الكاميرا أمام الرايات الحمراء. يمكنك رؤيتهم يتحركون قليلا. استخدم ميشيل دعم العظام / الهياكل العظمية من Babylon.js لتحريكها. الآن ، قم بتعطيل خيار " الهياكل العظمية " ويجب أن يتوقفوا عن الحركة:

أخيرًا ، يمكنك عرض شجرة الشبكات في الزاوية اليمنى العليا. يمكنك تمكينهم أو تعطيلهم لكسر العمل الذي قام به ميشيل تمامًا:

يمكن أن تساعدك إزالة الأشكال الهندسية أو قنوات التظليل أو بعض خيارات المحرك في استكشاف الأخطاء وإصلاحها على جهاز معين لمعرفة ما يكلف حاليًا الكثير. يمكنك أيضًا التحقق مما إذا كنت مقيدًا بوحدة المعالجة المركزية أو مقيدًا بوحدة معالجة الرسومات ، على الرغم من أنك في معظم الأحيان ، ستكون مقيدًا بوحدة المعالجة المركزية في WebGL نظرًا لطبيعة الترابط الأحادي لجافا سكريبت. أخيرًا ، تعد الأداة أيضًا مفيدة جدًا لمساعدتك في معرفة كيف تم إنشاء مشهد بواسطة فنان ثلاثي الأبعاد.

بالمناسبة ، إنه يعمل بشكل جيد على Xbox One أيضًا:

التحديات

على طول الطريق ، واجهنا عددًا من المشكلات والتحديات لبناء العرض التوضيحي. دعونا ننظر في بعضها بالتفصيل.

أداء WebGL والتوافق عبر الأنظمة الأساسية

ربما كان جانب البرمجة أسهل ما يمكن معالجته حيث تم التعامل معه بالكامل بواسطة محرك Babylon.js نفسه. نحن نستخدم بنية تظليل مخصصة تتكيف مع النظام الأساسي من خلال محاولة العثور على أفضل تظليل متاح للمتصفح الحالي / وحدة معالجة الرسومات باستخدام العديد من الإجراءات الاحتياطية. تكمن الفكرة في تقليل جودة محرك العرض وتعقيده حتى نتمكن من عرض شيء ذي معنى على الشاشة.

يعتمد Babylon.js بشكل أساسي على WebGL 1.0 لضمان تشغيل التجارب ثلاثية الأبعاد المبنية عليه في كل مكان تقريبًا. لقد تم بناؤه مع وضع فلسفة الويب في الاعتبار ، لذلك نحن نعمل تدريجياً على تحسين عملية تجميع التظليل. هذا شفاف تمامًا بالنسبة للفنان ثلاثي الأبعاد الذي لا يريد التعامل مع هذه التعقيدات في معظم الأوقات.

لا يزال ، الفنان ثلاثي الأبعاد يلعب دورًا مهمًا للغاية في تحسين الأداء. يجب أن تعرف النظام الأساسي الذي تستهدفه ، والميزات المدعومة والقيود. لا يمكنك الحصول على أصول من ألعاب AAA المصممة لوحدات معالجة الرسومات المتطورة و DirectX 12 ودمجها فقط في لعبة تعمل على محرك WebGL. أود أن أزعم أن استهداف WebGL اليوم يشبه إلى حد كبير العمل الذي يتعين عليك القيام به لتحسين التجارب على الأجهزة المحمولة ، مع اندفاعة من JavaScript إضافي يجب أن يكون مترابطًا للغاية.

ميتش بارع للغاية في ذلك: تحسين القوام ، وحساب البرق مسبقًا لخبزه في القوام ، وتقليل عدد مكالمات السحب قدر الإمكان ، وما إلى ذلك. لديه سنوات من الخبرة وراءه وشاهد الأجيال المختلفة من الأجهزة والمحركات ثلاثية الأبعاد (من PowerVR / 3DFX إلى وحدات معالجة الرسومات الحالية) والتي ساعدت حقًا في إجراء العرض التوضيحي.

لقد شارك بالفعل بعضًا من هذه الأساسيات في مقالاته حول Real Time 3D: عمل عرض توضيحي لأهداف WebGL - أساسيات وأثبت بالفعل عدة مرات أنه يمكنك إنشاء تجربة مرئية رائعة جدًا على الويب بأداء عالٍ على وحدات معالجة رسومات صغيرة مدمجة ، على سبيل المثال مشاهد العرض التوضيحي للقصر أو Hill Valley أو Espilit. إذا كنت مهتمًا ، خذ الوقت الكافي لمشاهدة حديثه على NGF2014 - إنشاء أصول ثلاثية الأبعاد لعالم الهاتف المحمول والويب ، وجهة نظر مصمم ثلاثي الأبعاد حيث شارك تجربته وكيف تمكن من تحسين مشهد Hill Valley من أقل من 1 إطارًا في الثانية إلى 60 إطارًا في الثانية.

كان الهدف الأولي لسبونزا هو بناء مشهدين. واحد لسطح المكتب والآخر للجوال مع أقل تعقيدًا وأنسجة أصغر وشبكات وهندسة أبسط. ولكن أثناء اختباراتنا ، اكتشفنا أخيرًا أن إصدار سطح المكتب كان يعمل جيدًا أيضًا على الهاتف المحمول حيث يمكن تشغيله حتى 60 إطارًا في الثانية على iPhone 6s أو Android OnePlus 2. ثم قررنا عدم الاستمرار في العمل على إصدار الهاتف المحمول الأبسط.

ولكن مرة أخرى ، ربما كان من الأفضل أن يكون لديك نهج محمول نظيف على Sponza للوصول إلى 30 إطارًا في الثانية + على العديد من الأجهزة المحمولة ، ثم تحسين المشهد للهاتف المحمول وسطح المكتب المتطور. ومع ذلك ، يبدو أن معظم التعليقات التي تلقيناها حتى الآن على Twitter تشير إلى أن النتيجة النهائية تعمل جيدًا على معظم الأجهزة. باعتراف الجميع ، تم تحسين Sponza على وحدة معالجة الرسومات HD4000 (Intel Core i5 المدمجة) والتي تعادل إلى حد ما وحدات معالجة الرسومات الفعلية للهواتف المحمولة المتطورة.

كنا سعداء للغاية بالأداء الذي تمكنا من تحقيقه. تستخدم Sponza أداة التظليل الخاصة بنا مع تمكين البيئة المحيطة والمنتشرة والنتوءات والمرايا والانعكاس . لدينا بعض الجسيمات لمحاكاة الحرائق الصغيرة في كل زاوية ، وعظام متحركة للأعلام الحمراء ، والأصوات ثلاثية الأبعاد والاصطدامات عندما تتحرك باستخدام الوضع التفاعلي.

من الناحية الفنية ، لدينا 98 شبكة مستخدمة في المشهد ، تنتج ما يصل إلى 377781 رأسًا ، و 16 عظمة نشطة ، وأكثر من 60 جسيمًا يمكنها توليد ما يصل إلى 36 مكالمة سحب. ماذا تعلمنا؟ شيء واحد مؤكد: الحصول على عدد أقل من المكالمات هو مفتاح الأداء الأمثل ، وأكثر من ذلك على الويب.

المحمل

بالنسبة إلى Sponza ، أردنا إنشاء أداة تحميل جديدة ، تختلف عن أداة التحميل الافتراضية التي نستخدمها على موقع BabylonJS على الويب ، للحصول على تطبيق ويب نظيف ومصقول. ثم طلبت من ميشيل أن يقترح شيئًا جديدًا.

أرسل لي الشاشة التالية أولاً:

في الواقع ، تبدو الشاشة جميلة جدًا عند إلقاء نظرة عليها لأول مرة. ولكن بعد ذلك قد تبدأ في التساؤل عن كيفية جعله يعمل على جميع الأجهزة ، بطريقة سريعة الاستجابة حقًا؟ دعونا نفهم ذلك.

لنتحدث عن الخلفية أولاً. كان التأثير الضبابي الذي أنشأه ميشيل لطيفًا ولكنه لم يكن يعمل جيدًا عبر جميع أحجام النوافذ ودرجات الدقة التي تولد بعض التموج. ثم قمت باستبدالها بلقطة شاشة "كلاسيكية" للمشهد. ومع ذلك ، أردت أن تملأ الخلفية الشاشة بالكامل بدون أشرطة سوداء وبدون تمديد الصورة لكسر النسبة.

يأتي الحل بشكل أساسي من background-size: cover + توسيط الصورة على محوري X و Y. نتيجة لذلك ، لدينا التجربة التي كنت أتطلع إليها ، بغض النظر عن نسبة الشاشة المستخدمة:

تستخدم الأجزاء الأخرى موضع CSS الجيد القائم على النسبة المئوية. حسنًا ، مع هذا الترتيب ، كيف نتعامل مع الطباعة - يجب أن يعتمد حجم الخط على حجم منفذ العرض. من الواضح أنه يمكننا استخدام وحدات منفذ العرض لذلك. يتم دعم vw و vh (حيث يمثل 1vw 1٪ من عرض منفذ العرض و 1٪ من ارتفاع منفذ العرض) بشكل جيد عبر المتصفحات ، لا سيما في جميع المتصفحات المتوافقة مع WebGL. (هناك أيضًا مقال عن طباعة حجم منفذ العرض في مجلة Smashing وأنا أوصيك بشدة بقراءته.)

أخيرًا ، نحن نلعب بخاصية opacity صورة الخلفية لنقلها من 0 إلى 1 بناءً على عملية التنزيل الحالية التي تنتقل من 0 إلى 100٪.

أوه ، بالمناسبة ، الرسوم المتحركة النصية تتم ببساطة باستخدام انتقالات CSS أو الرسوم المتحركة جنبًا إلى جنب مع تخطيط flexbox للحصول على طريقة بسيطة ولكنها فعالة للعرض في المركز أو في كل زاوية.

التعامل مع جميع المدخلات بطريقة شفافة

يقوم محرك WebGL الخاص بنا بكل العمل على جانب العرض لعرض المرئيات بشكل صحيح على جميع الأنظمة الأساسية. ولكن كيف نضمن أن يكون المستخدم قادرًا على التحرك داخل المشهد مهما كان نوع الإدخال المستخدم؟

في الإصدار السابق من Babylon.js ، كنا ندعم جميع أنواع المدخلات وتفاعلات المستخدم: لوحة المفاتيح / الماوس ، واللمس ، وعصا التحكم التي تعمل باللمس الافتراضي ، ولوحة الألعاب ، وتوجيه الجهاز VR (للوحة البطاقات) و WebVR ، كل عبر كاميرا مخصصة. يمكنك قراءة وثائقنا لمعرفة المزيد عنها.

تتم إدارة Touch عالميًا من خلال نشر مواصفة Pointer Events على جميع الأنظمة الأساسية عبر jQuery PEP polyfill (إنشاء أحداث Touch للتطبيق عند الحاجة). لمعرفة المزيد عن أحداث المؤشر ، يمكنك القراءة عن توحيد اللمس والماوس: كيف ستجعل Pointer Events دعم اللمس عبر المتصفحات أمرًا سهلاً

ثم العودة إلى العرض التوضيحي. كانت فكرة Sponza هي امتلاك كاميرا فريدة ، تتعامل مع سيناريوهات جميع المستخدمين في وقت واحد: سطح المكتب والجوال ووحدة التحكم.

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

توفر FreeCamera منطق لوحة المفاتيح / الماوس ؛ توفر TouchCamera منطق اللمس ، ويوفر الامتداد النهائي منطق لوحة الألعاب.

يتم الآن استخدام UniversalCamera في Babylon.js افتراضيًا. إذا كنت تتصفح العروض التوضيحية ، يمكنك التنقل داخل المشاهد باستخدام الماوس واللمس ولوحة الألعاب عليها جميعًا. مرة أخرى ، يمكنك دراسة الكود لترى كيف يتم ذلك بالضبط.

مزامنة الانتقالات مع الموسيقى

الآن ، هذا الجزء هو المكان الذي طرحنا فيه على أنفسنا معظم الأسئلة. ربما لاحظت أن تسلسل المقدمة متزامن مع مناطق معينة من مسار تشغيل الموسيقى . يتم عرض الأسطر الأولى عند بدء تشغيل بعض الطبول ، ويتحول تسلسل النهاية النهائية بسرعة من كاميرا إلى أخرى في كل نغمة من آلة البوق التي نستخدمها.

مزامنة الصوت مع حلقة عرض WebGL ليس بالأمر السهل. مرة أخرى ، هذه هي طبيعة الخيوط الأحادية لجافا سكريبت التي تولد هذا التعقيد. المقالات حول مقدمة إلى عمال ويب HTML5: نهج JavaScript متعدد مؤشرات الترابط تشارك بعض الأفكار وراء ذلك. من المهم حقًا فهم المشكلة لفهم المشكلة العالمية التي نواجهها ، ولكن الدخول في التفاصيل هنا خارج نطاق هذه المقالة.

عادةً ، في المشاهد التجريبية (وألعاب الفيديو) ، إذا كنت ترغب في مزامنة المرئيات مع الأصوات / الموسيقى ، فستكون مدفوعًا بمكدس الصوت. غالبًا ما يتم استخدام طريقتين:

1. إنشاء البيانات الوصفية التي سيتم حقنها في الملفات الصوتية ، ومن ثم يمكن أن "تستدعي" بعض الأحداث عندما تصل إلى جزء معين منها ،
2. تحليل في الوقت الحقيقي لدفق الصوت عبر FFT أو تقنيات مماثلة لاكتشاف القمم المثيرة للاهتمام أو تغييرات BPM التي من شأنها أن تولد مرة أخرى أحداثًا للمحرك المرئي.

تعمل هذه الأساليب بشكل جيد بشكل خاص في البيئات متعددة الخيوط مثل C ++. لكن في JavaScript ، مع Web Audio ، لدينا مشكلتان:

1. جافا سكريبت ، وهي أحادية الترابط ، وللأسف ، لن يساعدنا العاملون على الويب في أغلب الأحيان ،
2. لا يحتوي Web Audio على أي أحداث يمكن إرسالها مرة أخرى إلى مؤشر ترابط واجهة المستخدم حتى إذا تم التعامل مع Web Audio في سلسلة منفصلة بواسطة المستعرض.

يحتوي Web Audio على مؤقت أكثر دقة من JavaScript. كان من الرائع أن تكون قادرًا على استخدام هذا المؤقت المنفصل في سلسلة منفصلة لإعادة الأحداث إلى مؤشر ترابط واجهة المستخدم. لكن اليوم ، لا يمكنك فعل ذلك (حتى الآن؟).

على الجانب الآخر ، نجعل المشهد باستخدام WebGL وطريقة requestAnimationFrame . هذا يعني أنه ، في "أفضل الحالات" ، لدينا إطار زمني يبلغ 16 مللي ثانية. إذا فقدت واحدة ، فسيتعين عليك الانتظار حتى 16 مللي ثانية لتتمكن من العمل على الإطار التالي لعكس مزامنة الصوت (على سبيل المثال لإطلاق تأثير "التلاشي إلى الأسود").

كنت أفكر بعد ذلك في إدخال منطق المزامنة في حلقة requestAnimationFrame . لقد درست الوقت الذي أمضيته منذ بداية التسلسل وبحثت في خيار تعديل الصورة لتتفاعل مع حدث صوتي. والخبر السار هو أن صوت الويب سيعرض الصوت مهما كان ما يحدث في مؤشر ترابط واجهة المستخدم الرئيسي. على سبيل المثال ، يمكنك التأكد من أن الطابع الزمني 12 ثانية للموسيقى سيصل بالضبط بعد 12 ثانية من بدء تشغيل الموسيقى حتى إذا كانت وحدة معالجة الرسومات تواجه صعوبة في عرض المشهد.

في النهاية ، اخترنا أخيرًا أبسط حل على الإطلاق: استخدام مكالمات setTimeout() ! نعم انا اعرف. إذا نظرت إلى معظم المقالات الموجودة هناك ، بما في ذلك المقالة التي ربطتها أعلاه ، فستجد أنها غير موثوقة تمامًا. ولكن في حالتنا ، بمجرد أن يصبح المشهد جاهزًا للعرض ، نعلم أننا قمنا بتنزيل جميع مواردنا (القوام والأصوات) وقمنا بتجميع تظليلاتنا. يجب ألا نشعر بالانزعاج الشديد من الأحداث غير المتوقعة التي تشبع مؤشر ترابط واجهة المستخدم. قد تكون GC مشكلة ولكننا أمضينا أيضًا الكثير من الوقت في محاربتها في المحرك: تقليل الضغط على مجمع القمامة باستخدام شريط مطور F12 في Internet Explorer 11.

ومع ذلك ، فإننا نعلم أن هذا الحل بعيد كل البعد عن كونه مثاليًا. قد يؤدي التبديل إلى علامة تبويب أخرى أو قفل هاتفك وإلغاء قفله بعد بضع ثوانٍ إلى حدوث بعض المشكلات في جزء المزامنة من العرض التوضيحي. يمكننا إصلاح هذه المشكلات باستخدام واجهة برمجة تطبيقات Page Visibility ، على سبيل المثال عن طريق الإيقاف المؤقت لحلقة العرض والأصوات المختلفة وإعادة حساب الأطر الزمنية التالية لاستدعاءات setTimeout() .

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

التعامل مع Web Audio على iOS

التحدي الأخير الذي أود مشاركته معك هو الطريقة التي يتم بها التعامل مع Web Audio بواسطة iOS على iPhone و iPad. إذا كنت تبحث عن مقالات حول "صوت الويب + iOS" ، فستجد الكثير من الأشخاص يواجهون صعوبة في تشغيل الأصوات على iOS. الآن ، ما الذي يحدث هناك؟

يتمتع iOS بدعم رائع لنظام Web Audio - حتى وضع الصوت بكلتا الأذنين. لكن شركة Apple قررت أن صفحة الويب لا يمكنها تشغيل أي صوت افتراضيًا دون تفاعل مستخدم معين. ربما تم اتخاذ هذا القرار لتجنب الإعلان أو أي شيء آخر يزعج المستخدم من خلال تشغيل أصوات غير مرغوب فيها.

ماذا يعني ذلك لمطوري الويب؟ حسنًا ، تحتاج أولاً إلى فتح سياق صوت الويب لنظام iOS بعد لمس المستخدم - قبل محاولة تشغيل أي صوت. وإلا فسيظل تطبيق الويب الخاص بك صامتًا للغاية.

لسوء الحظ ، الطريقة الوحيدة التي اكتشفتها لإجراء هذا التحقق من خلال اتباع نهج شم النظام الأساسي للمستخدم لأنني لم أجد طريقة لاكتشاف الميزات للقيام بذلك. هذا ليس أقل من تقنيات مروعة وليست مضادة للرصاص ، لكنني لم أجد أي حل آخر من شأنه أن يحل المشكلة. الرمز؟ ها أنت ذا!

إذا لم تكن تستخدم جهاز iPad / iPhone / iPod ، فسيكون سياق الصوت متاحًا للاستخدام على الفور. بخلاف ذلك ، نقوم بإلغاء تأمين السياق الصوتي لنظام iOS عن طريق تشغيل رمز تم إنشاؤه بصوت فارغ في حدث touchend . يمكنك التسجيل في حدث onAudioUnlocked إذا كنت ترغب في الانتظار قبل بدء تشغيل اللعبة. لذلك إذا كنت تقوم بتشغيل Sponza على جهاز iPhone / iPad ، فستحصل على هذه الشاشة الأخيرة في نهاية تسلسل التحميل:

سيؤدي لمس أي مكان على الشاشة إلى إلغاء قفل حزمة الصوت في iOS وبدء تشغيل "العرض".

حسنا هيا بنا! آمل أن تكون قد استمتعت ببعض الأفكار وراء تطوير العرض التوضيحي. لمعرفة المزيد ، اقرأ الكود المصدري الكامل لهذا العرض التوضيحي على جيثب. من الواضح أن كل شيء مفتوح المصدر ، ويمكنك العثور على الملفات الرئيسية على GitHub: index.js و babylon.demo.ts.

أخيرًا ، آمل حقًا أن تكون أكثر اقتناعًا الآن بأن الويب هو بالتأكيد منصة رائعة للألعاب! ابق على اتصال ، فنحن نعمل على عروض تجريبية جديدة في هذه اللحظة بالذات ، ونأمل أن تكون رائعة أيضًا.

هذه المقالة جزء من سلسلة تطوير الويب من المبشرين والمهندسين التقنيين في Microsoft حول تعلم JavaScript العملي ، ومشاريع مفتوحة المصدر ، وأفضل ممارسات التشغيل البيني بما في ذلك مستعرض Microsoft Edge.

نحن نشجعك على الاختبار عبر المتصفحات والأجهزة بما في ذلك Microsoft Edge - المتصفح الافتراضي لنظام التشغيل Windows 10 - باستخدام أدوات مجانية على dev.microsoftedge.com ، بما في ذلك أدوات المطور F12 - سبع أدوات مميزة وموثقة بالكامل لمساعدتك في تصحيح الأخطاء والاختبار و تسريع صفحات الويب الخاصة بك. قم أيضًا بزيارة مدونة Edge لتبقى على اطلاع دائم بالمطورين والخبراء من Microsoft.