WebVR وثورة الحوسبة في متصفح Edge

نشرت: 2022-03-11

وصلت موجة تكنولوجية ضخمة - الواقع الافتراضي (VR). مهما كان ما شعرت به في المرة الأولى التي تحمل فيها هاتفًا ذكيًا ، فإن تجربة الواقع الافتراضي لأول مرة توفر تجربة عاطفية أكثر جوهرية في كل جانب من جوانب الحوسبة. لقد مرت 12 عامًا فقط على أول iPhone. كمفهوم ، كان الواقع الافتراضي موجودًا لفترة أطول ، لكن التكنولوجيا اللازمة لجلب الواقع الافتراضي إلى المستخدمين العاديين لم تكن متاحة حتى وقت قريب.

Oculus Quest هي منصة ألعاب للمستهلكين على Facebook للواقع الافتراضي. ميزته الرئيسية هي أنه لا يحتاج إلى جهاز كمبيوتر. يوفر تجربة VR لاسلكية ومتحركة. يمكنك تسليم شخص ما سماعة رأس VR في أحد المقاهي لمشاركة نموذج ثلاثي الأبعاد بنفس درجة الإحراج مثل البحث عن شيء ما في googling في محادثة ، ومع ذلك فإن عائد التجربة المشتركة أكثر إقناعًا.

سيغير الواقع الافتراضي طريقة عملنا والتسوق والاستمتاع بالمحتوى وغير ذلك الكثير.

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

في المقالات التالية ، سنسلط الضوء على بعض التحديات والفرص الفريدة في الكود. لاستكشاف هذه التقنية ، قمت بعمل عرض توضيحي لـ Canvas و WebVR ونشرت الكود على GitHub.

نص بديل
لمزيد من التفاصيل ، راجع العرض التوضيحي لـ Canvas ، وعرض WebVR ، وكود المثال.

ماذا يعني VR لـ UX

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

سيؤدي المحتوى الترفيهي إلى استيعاب الواقع الافتراضي (كما حدث على الهاتف المحمول). ومع ذلك ، بمجرد أن يصبح الواقع الافتراضي سائدًا مثل الجوّال ، ستكون "VR-first design" هي التجربة المتوقعة (على غرار "Mobile-first").

كان "Mobile-first" نقلة نوعية ، و "Offline-first" هو تحول نموذجي حالي ، و "VR-first" يلوح في الأفق. هذا وقت مثير للغاية لكونك مصممًا ومطورًا ، لأن الواقع الافتراضي هو نموذج تصميم مختلف تمامًا (سنستكشف هذا في المقالة الأخيرة من السلسلة). أنت لست مصمم VR إذا كنت لا تستطيع السيطرة.

بدأت VR في ثورة الحوسبة الشخصية (PC) ولكنها وصلت كخطوة تالية في ثورة الأجهزة المحمولة. تم بناء Oculus Quest من Facebook على Google Cardboard باستخدام Qualcomm's Snapdragon 835 System-on-Chip (SoC) ، وتتبع سماعات الرأس (باستخدام كاميرات محمولة) ، ويعمل على نظام Android - وكلها مجمعة لتثبيتها بشكل مريح على أجهزة الإحساس الرقيقة لوجهك.

يحمل Oculus Quest الذي تبلغ تكلفته 400 دولار تجارب مذهلة يمكنني مشاركتها مع أصدقائي. لم يعد هاتف iPhone الجديد الذي تبلغ تكلفته 1000 دولار يثير إعجاب أي شخص بعد الآن. لن تبصق الإنسانية مأزق الواقع الافتراضي.

تطبيقات صناعة الواقع الافتراضي

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

  • تخلق الهندسة المعمارية والعقارات قيمة للواقع المادي بتكاليف غير عادية (مقارنة بالتكاليف الرقمية) ، لذلك من المناسب للمهندسين المعماريين ووكلاء العقارات جلب العملاء من خلال الواقع الافتراضي لإظهار التجربة. يقدم VR "اختبارًا تجريبيًا" لملعبك الذي تبلغ تكلفته 200 مليون دولار ، أو جولة افتراضية عبر الهاتف.
  • ينقل التعلم والتعليم في الواقع الافتراضي الخبرات التي كان من المستحيل تكرارها بالصور أو الفيديو.
  • تستفيد شركات السيارات من الواقع الافتراضي ، من التصميم والأمان إلى التدريب والتسويق.
  • يستخدم أخصائيو الرعاية الصحية في مستشفى Lucile Packard للأطفال في ستانفورد الواقع الافتراضي للتخطيط لعمليات القلب ، مما يسمح لهم بفهم تشريح المريض قبل إجراء شق واحد. يعمل الواقع الافتراضي أيضًا على استبدال المستحضرات الصيدلانية لتخفيف الآلام.
  • يقدم البيع بالتجزئة والتسويق والضيافة بالفعل جولات افتراضية للمنتجات والأماكن. عندما يبدأ تجار التجزئة في فهم مدى إقناع تجربة التسوق الخاصة بهم ، سيضع مبتكرو التجزئة المسمار الأخير في نعش التسوق من الطوب والملاط.

مع تقدم التكنولوجيا ، سنشهد اعتمادًا متزايدًا عبر مختلف الصناعات. السؤال الآن هو ما مدى سرعة حدوث هذا التحول وما هي الصناعات التي ستتأثر أكثر من غيرها.

ماذا يعني الواقع الافتراضي للويب والحوسبة المتطورة

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

مثال على حوسبة B2C هو خدمة Stadia من Google ، والتي تقوم بتشغيل أحمال عمل ألعاب مكثفة لوحدة المعالجة المركزية / وحدة معالجة الرسومات على خوادم Google ، ثم ترسل اللعبة إلى جهاز مثل Netflix. يمكن لأي جهاز Netflix Chromebook غبي أن يلعب فجأة ألعابًا مثل كمبيوتر الألعاب المتطور. يؤدي هذا أيضًا إلى إنشاء خيارات معمارية جديدة لألعاب متعددة اللاعبين متجانسة ومتكاملة بإحكام.

مثال على حوسبة B2B هو GRID من Nvidia ، والذي يوفر محطات عمل افتراضية عن بعد تدعم Nvidia GPU لأجهزة Netflix الرخيصة.

سؤال: لماذا لا تنقل الحوسبة المتطورة من مركز البيانات إلى المتصفح؟

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

جلبت تقنيات مثل Electron و NW.js برمجة الويب إلى تطبيقات سطح المكتب. تعمل تقنيات المستعرضات الجديدة (مثل PWA) على إعادة نموذج توزيع تطبيقات الويب (SaaS حول التوزيع) إلى حوسبة سطح المكتب. تشمل الأمثلة مشاريع مثل SETI @ Home أو Folding @ Home (طي البروتين) أو مزارع تقديم متنوعة. بدلاً من الاضطرار إلى تنزيل برنامج التثبيت ، أصبح من الممكن الآن الانضمام إلى مزرعة الحوسبة بمجرد زيارة موقع الويب.

السؤال: هل WebVR "شيء حقيقي" أم أن محتوى الواقع الافتراضي سينتقل إلى "متاجر التطبيقات" والحدائق المسورة؟

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

المفسد: نعم ، WebVR شيء حقيقي. ونعم ، يمكن أن تستخدم حوسبة حافة المتصفح نفس واجهة برمجة التطبيقات للوصول إلى قوة الحوسبة التي تمكّن WebVR.

ممتعة جدا في الكتابة! لنقم ببناء دليل على المفهوم

لاختبار ذلك ، سنقوم بمحاكاة في الفيزياء الفلكية لمشكلة الجسم n.

يمكن للملاحين الفلكيين استخدام المعادلات لحساب قوى الجاذبية بين جسمين. ومع ذلك ، لا توجد معادلات للأنظمة التي تحتوي على ثلاثة أجسام أو أكثر ، وهو أمر غير مريح لكل نظام في الكون المعروف. علم!

في حين أن مشكلة الجسم n ليس لها حل تحليلي (معادلات) ، إلا أنها تحتوي على حل حسابي (خوارزميات) ، وهو O (n²). O (n²) هي إلى حد كبير أسوأ حالة ممكنة ، لكنها طريقة الحصول على ما نريد ، ونوعًا من سبب اختراع تدوين Big O في المقام الأول.

أداء O (n²)

الشكل 2: "لأعلى وإلى اليمين؟ حسنًا ، أنا لست مهندسًا ، لكن الأداء يبدو جيدًا بالنسبة لي! "

إذا كنت تتخلص من مهارات Big O الخاصة بك ، فتذكر أن تدوين Big O يقيس كيفية "مقياس" عمل الخوارزمية بناءً على حجم البيانات التي تعمل عليها.

مجموعتنا هي كل الأجسام في محاكاتنا. تعني إضافة جسم جديد إضافة حساب جاذبية جسمين جديد لكل جسم موجود في المجموعة.

في حين أن الحلقة الداخلية لدينا هي <n ، فهي ليست <= O (log n) ، لذا فإن الخوارزمية بأكملها هي O (n²). هذه هي فترات الراحة ، لا رصيد إضافي.

 for (let i: i32 = 0; i < numBodies; i++) { // n // Given body i: pair with every body[j] where j > i for (let j: i32 = i + 1; j < numBodies; j++) { // 1/2 n is > log n, so n. // Calculate the force the bodies apply to one another stuff = stuff } }

يضعنا حل n-body أيضًا في عالم الفيزياء / محركات الألعاب واستكشاف التقنية اللازمة لـ WebVR.

بالنسبة لنموذجنا الأولي ، بمجرد بناء المحاكاة ، سنقوم بعمل تصور ثنائي الأبعاد.

أخيرًا ، سنقوم باستبدال تصور Canvas لإصدار WebVR.

إذا كنت لا تتحلى بالصبر ، يمكنك القفز مباشرة إلى رمز المشروع.

عمال الويب ، WebAssembly ، AssemblyScript ، Canvas ، Rollup ، WebVR ، Aframe

استعد لتجربة مليئة بالإثارة ومليئة بالمرح من خلال مجموعة من التقنيات الجديدة التي وصلت بالفعل إلى متصفح الهاتف المحمول الحديث الخاص بك (آسف ، لست Safari):

  • سنستخدم Web Workers لنقل المحاكاة إلى مؤشر ترابط وحدة المعالجة المركزية الخاص بها - تحسين الأداء المتصور والفعلي.
  • سنستخدم WebAssembly لتشغيل خوارزمية O (n²) بأداء عالٍ (C / C ++ / Rust / AssemblyScript / إلخ) في هذا الخيط الجديد.
  • سنستخدم Canvas لتصور المحاكاة ثنائية الأبعاد.
  • سنستخدم Rollup و Gulp كبديل خفيف الوزن لـ Webpack.
  • أخيرًا ، سنستخدم WebVR و Aframe لإنشاء واقع افتراضي لهاتفك.

تصميم ظهر المنديل قبل الغوص في الكود

سنبدأ بإصدار Canvas لأنك ربما تقرأ هذا في العمل.

نسخة قماش

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

بعد ذلك ، سوف نتخيل هذا في المتصفح باستخدام Canvas ، وأخيراً تبديل تصور Canvas الخاص بنا إلى WebVR باستخدام Aframe.

حلقة تصميم ومحاكاة API

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

للتوجيه ، إليك نظرة عامة سريعة على الكود:

  1. index.html للمستعرض
  2. الذي يدير main.js باعتباره الكود أدناه. تتم معالجة عمليات import باستخدام Rollup ، وهو بديل لـ Webpack.
  3. مما يؤدي إلى إنشاء nBodySimulator () جديد
  4. التي لديها واجهة برمجة تطبيقات خارجية:
    1. sim.addVisualization ()
    2. sim.addBody ()
    3. sim.start ()
 // src/main.js import { nBodyVisPrettyPrint, nBodyVisCanvas } from "./nBodyVisualizer" import { Body, nBodySimulator } from "./nBodySimulator" window.onload = function() { // Create a Simulation const sim = new nBodySimulator() // Add some visualizers sim.addVisualization(new nBodyVisPrettyPrint(document.getElementById("visPrettyPrint"))) sim.addVisualization(new nBodyVisCanvas(document.getElementById("visCanvas"))) // This is a simulation, using opinionated G = 6.674e-11 // So boring values are allowed and create systems that collapse over billions of years. // For spinny, where distance=1, masses of 1e10 are fun. // Set Z coords to 1 for best visualization in overhead 2D Canvas. // lol, making up stable universes is hard // name color xyzm vz vy vz sim.addBody(new Body("star", "yellow", 0, 0, 0, 1e9)) sim.addBody(new Body("hot jupiter", "red", -1, -1, 0, 1e4, .24, -0.05, 0)) sim.addBody(new Body("cold jupiter", "purple", 4, 4, -.1, 1e4, -.07, 0.04, 0)) // A couple far-out asteroids to pin the canvas visualization in place. sim.addBody(new Body("asteroid", "black", -15, -15, 0, 0)) sim.addBody(new Body("asteroid", "black", 15, 15, 0, 0)) // Start simulation sim.start() // Add another sim.addBody(new Body("saturn", "blue", -8, -8, .1, 1e3, .07, -.035, 0)) // That is the extent of my effort to handcraft a stable solar system. // We can now play in that system by throwing debris around (inner plants). // Because that debris will have significantly smaller mass, it won't disturb our stable system (hopefully :-) // This requires we remove bodies that fly out of bounds past our 30x30 space created by the asteroids. // See sim.trimDebris(). It's a bit hacky, but my client (me) doesn't want to pay for it and wants the WebVR version. function rando(scale) { return (Math.random()-.5) * scale } document.getElementById("mayhem").addEventListener('click', () => { for (let x=0; x<10; x++) { sim.addBody(new Body("debris", "white", rando(10), rando(10), rando(10), 1, rando(.1), rando(.1), rando(.1))) } }) }

الكويكبات لهما كتلة صفرية لذا لا يتأثران بالجاذبية. لقد حافظوا على تصغير التصور ثنائي الأبعاد الخاص بنا إلى 30 × 30 على الأقل. آخر جزء من الكود هو زر "الفوضى" لإضافة 10 كواكب داخلية صغيرة للحصول على بعض المتعة المرحة!

التالي هو "حلقة المحاكاة" - كل 33 مللي ثانية ، قم بإعادة الحساب وإعادة الرسم. إذا كنت تستمتع ، فيمكننا تسميتها "حلقة اللعبة". أبسط شيء يمكن أن يعمل على تنفيذ الحلقة الخاصة بنا هو setTimeout() - وقد حقق ذلك هدفي. يمكن أن يكون البديل requestAnimationFrame ().

يبدأ sim.start() الإجراء عن طريق استدعاء sim.step() كل 33 مللي ثانية (حوالي 30 إطارًا في الثانية).

 // Methods from class nBodySimulator // The simulation loop start() { // This is the simulation loop. step() calls visualize() const step = this.step.bind(this) setInterval(step, this.simulationSpeed) } // A step in the simulation loop. async step() { // Skip calculation if worker not ready. Runs every 33ms (30fps), so expect skips. if (this.ready()) { await this.calculateForces() } else { console.log(`Skipping: ${this.workerReady}, ${this.workerCalculating}`) } // Remove any "debris" that has traveled out of bounds - this is for the button this.trimDebris() // Now Update forces. Reuse old forces if we skipped calculateForces() above this.applyForces() // Ta-dah! this.visualize() }

يا هلا! نحن ننتقل التصميم الماضي إلى التنفيذ. سنقوم بتنفيذ العمليات الحسابية الفيزيائية في WebAssembly وتشغيلها في مؤشر ترابط Web Worker منفصل.

يلف nBodySimulator تعقيد التنفيذ ويقسمه إلى عدة أجزاء:

  1. calculateForces() من الوعود بحساب القوى المطلوب تطبيقها.
    1. هذه في الغالب عمليات فاصلة عائمة ويتم إجراؤها في WebAssembly.
    2. هذه الحسابات هي O (n²) واختناق الأداء لدينا.
    3. نحن نستخدم Web Worker لإخراجها من السلسلة الرئيسية للحصول على أداء أفضل مدركًا وفعليًا.
  2. trimDebris() بإزالة أي حطام لم يعد مثيرًا للاهتمام (وسيؤدي إلى تصغير تصورنا). على)
  3. applyForces() تطبق القوى المحسوبة على الأجسام. على)
    1. نعيد استخدام القوى القديمة إذا تخطينا حساب القوى () لأن العامل كان مشغولاً بالفعل. يؤدي ذلك إلى تحسين الأداء الملحوظ (إزالة الاهتزازات) على حساب الدقة.
    2. يمكن أن يرسم مؤشر ترابط واجهة المستخدم الرئيسي القوى القديمة حتى لو استغرق الحساب وقتًا أطول من 33 مللي ثانية.
  4. visualize() يمرر مجموعة الأجسام إلى كل متخيل لرسمه. على)

وكل هذا يحدث في 33 مللي ثانية! هل يمكننا تحسين هذا التصميم؟ نعم. فضولي أو لديك اقتراح؟ تحقق من التعليقات أدناه. إذا كنت تبحث عن تصميم وتنفيذ حديث متقدم ، فراجع Matter.js مفتوح المصدر.

نهاية الانفجار!

لقد استمتعت كثيرًا بإنشاء هذا وأنا متحمس لمشاركته معك. اراك بعد القفزة!

  1. مقدمة - هذه الصفحة
  2. عمال الويب - الوصول إلى سلاسل رسائل متعددة
  3. WebAssembly - الحوسبة في المتصفح بدون جافا سكريبت
  4. Rollup and Gulp - بديل لـ WebPack
  5. Canvas - الرسم على Canvas API و "حلقة sim"
  6. WebVR - تبديل متخيل Canvas الخاص بنا لـ WebVR و Aframe

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

لم نكن أكثر قوة من أي وقت مضى لخلق تجارب بشرية. لم يكن هناك وقت أكثر إثارة لتكون مصممًا ومطورًا. انسَ صفحات الويب - سنبني عوالم.

تبدأ رحلتنا مع Web Worker المتواضع ، لذا ترقبوا الجزء التالي من سلسلة WebVR.