الواقع المعزّز على الويب

جو ميدلي
جو ميدلي

في الإصدار Chrome 67، أعلنّا عن إطلاق WebXR Device API لكل من الواقع المعزّز (AR) والواقع الافتراضي (VR)، على الرغم من تفعيل ميزات الواقع الافتراضي فقط. الواقع الافتراضي هو تجربة تعتمد تمامًا على ما يوجد في جهاز الحوسبة. من ناحية أخرى، يتيح لك الواقع المعزّز عرض الكائنات الافتراضية في العالم الحقيقي. للسماح بتحديد موضع تلك العناصر وتتبعها، أضفنا للتو واجهة WebXR Hit Test API إلى Chrome Canary، وهي طريقة جديدة تساعد في وضع الرموز البرمجية الشاملة على الويب في وضع العناصر في العالم الحقيقي.

أين يمكنني الحصول عليه؟

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

بالإضافة إلى Chrome Canary، ستحتاج أيضًا إلى:

  • هاتف ذكي متوافق يعمل بنظام التشغيل Android O أو إصدار أحدث.
  • لتثبيت ARCore.
  • علامتان من علامتا Chrome (chrome://flags): واجهة برمجة التطبيقات WebXRDevice API (#webxr) وWebXR Hit Test (#webxr-hit-test)

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

إنّه الإنترنت فقط

في Google IO هذا العام، عرضنا الواقع المعزّز من خلال إصدار مبكر من Chrome. قلتُ كثيرًا للمطورين وغير المطورين على حد سواء خلال تلك الأيام الثلاثة، أتمنى لو كنت قد عرفت أن أطرحها في مقالتي الشاملة على الويب: "إنّه محتوى الويب فقط".

"ما هي إضافة Chrome التي أحتاج إلى تثبيتها؟" "ليس هناك أي تمديد. لا يقتصر الأمر على الويب".

"هل أحتاج إلى متصفح خاص؟" "إنّه الويب فقط".

"ما هو التطبيق الذي أحتاج إلى تثبيته؟" "لا يوجد تطبيق خاص. إنه الويب فقط."

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

بالحديث عن IO، إذا أردت معرفة المزيد عن الويب المجسَّم بشكل عام، أينما وُجِد، اطّلع على هذا الفيديو.

ما الفائدة من ذلك؟

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

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

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

الشيء الوحيد الذي لا يعرضه العرض التوضيحي والفيديو هو كيف يمكن للواقع المعزز أن ينقل حجم كائن حقيقي. يعرض الفيديو هنا عرضًا توضيحيًا تعليميًا أنشأناه باسم Chacmool. تصف المقالة المصاحبة هذا العرض التوضيحي بالتفصيل. الشيء المهم في هذه المناقشة هو أنه عند وضع تمثال "شاكمول" في الواقع المعزّز، سترى حجمه كما لو كان في الغرفة معك.

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

طاقم راية واختبارات قصيرة وشبكات

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

حان الوقت لتجربة نموذج الرمز الجديد في Chrome Canary. قبل اتخاذ أي إجراء، تحقّق جيدًا من تفعيل العلامات الصحيحة. الآن قم بتحميل النموذج وانقر فوق "Start AR" (بدء الواقع المعزّز).

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

يعمل الواقع المعزّز بسرعة 30 لقطة في الثانية

العرض التوضيحي لاختبار نتائج الواقع المعزّز

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

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

وصولاً إلى الرمز

يعرض عرض Chacmool التجريبي الشكل الذي قد يبدو عليه الواقع المعزّز في تطبيق إنتاج. لحسن الحظ، هناك عرض توضيحي أبسط في مستودع نماذج WebXR. يأتي نموذج الرمز الخاص بي من العرض التوضيحي AR Hit Test في ذلك المستودع. لمعلوماتك، أود تبسيط أمثلة التعليمات البرمجية لمساعدتك على فهم ما يجري.

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

واجهة برمجة التطبيقات الجديدة

سأوضح لك الآن كيفية استخدام واجهة برمجة التطبيقات الجديدة. تذكر أنه في الواقع المعزَّز، تحاول الشبكة العثور على سطح قبل وضع عنصر ما. يتم ذلك من خلال اختبار النتائج. لإجراء اختبار ناجح، اتصل بالرقم XRSession.requestHitTest(). تبدو كالتالي:

xrSession.requestHitTest(origin, direction, frameOfReference)
.then(xrHitResult => {
  //
});

وتمثل الوسيطات الثلاثة لهذه الطريقة صبغة شعاع. وتُحدَّد صبغة الشعاع بنقطتين على الأشعة (origin وdirection) ويتم حساب هذه النقاط من (frameOfReference). المصدر والاتجاه عبارة عن متجهَين ثلاثي الأبعاد. وبصرف النظر عن القيمة التي ترسلها، سيتم تسويتها (تحويلها) إلى طول 1.

تحريك الشبكة

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

ابدأ بمعاودة الاتصال بـ "requestAnimationFrame()". كما هو الحال مع الواقع الافتراضي، تحتاج إلى جلسة ووضعية.

function onXRFrame(t, frame) {
  let xrSession = frame.session;
  // The frame of reference, which was set elsewhere, is 'eye-level'.
  // See onSessionStarted() ins the sample code for details.
  let xrPose = frame.getDevicePose(xrFrameOfRef);
  if (xrPose && xrPose.poseModelMatrix) {
    // Do the hit test and draw the reticle.
  }
}

بعد إجراء الجلسة والوضعية، حدِّد مكان إرسال الأشعة. يستخدم نموذج الرمز البرمجي مكتبة الرياضيات gl-matrix. لكن مصفوفة gl ليست شرطًا. المهم هو معرفة ما الذي تقوم بحسابه وأنه يعتمد على موضع الجهاز. استرجع موضع الجهاز من XRPose.poseModalMatrix. اتصل بـ "requestHitTest()" أثناء حمل الشعاع بين يدك.

function onXRFrame(t, frame) {
  let xrSession = frame.session;
  // The frame of reference, which was set elsewhere, is 'eye-level'.
  // See onSessionStarted() ins the sample code for details.
  let xrPose = frame.getDevicePose(xrFrameOfRef);
  if (xrPose && xrPose.poseModelMatrix) {
    // Calculate the origin and direction for the raycast.
    xrSession.requestHitTest(rayOrigin, rayDirection, xrFrameOfRef)
    .then((results) => {
      if (results.length) {
        // Draw for each view.
      }
    });
  }
  session.requestAnimationFrame(onXRFrame);
}

على الرغم من أنّ عيّنة الاختبار الناجحة لن تكون واضحة جدًا، إلا أنّك لا تزال بحاجة إلى التنقل بين المشاهدات لرسم المشهد. يتم الرسم باستخدام واجهات برمجة تطبيقات WebGL. يمكنك القيام بذلك إذا كنت طموحًا حقًا. بالرغم من ذلك، ننصحك باستخدام إطار عمل. وتستخدم نماذج الويب ذات التجربة الغامرة نموذج تم إنشاؤه فقط للإصدارات التجريبية التي يُطلق عليها اسم Cottontail، واعتمدت نماذج Three.js على WebXR منذ أيار (مايو).

وضع كائن

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

الخلاصة

وأفضل طريقة للتعامل مع هذا الأمر هي مراجعة نموذج الرمز أو تجربة الدرس التطبيقي حول الترميز. آمل أن أكون قد أعطيتك خلفية كافية لفهم الاثنين معًا.

لم ننتهي من إنشاء واجهات برمجة تطبيقات شاملة للويب، وليس من خلال مسافة طويلة. وسننشر مقالات جديدة هنا كلما حققنا تقدمًا.