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

Joe Medley

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

ملاحظة: إذا كنت تريد تلقّي إشعارات بشأن تعديلات المواصفات عند طرحها في Chrome، يتم الاحتفاظ بدليل مستخدمي الويب الغامر في مستودع GitHub ويتم تعديله كلما تم طرح تغييرات على المواصفات في Chrome. ليتم إشعارك بهذه التعديلات، يمكنك مشاهدة المستودع الخاص بها على GitHub.

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

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

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

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

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

ملاحظة: لا تعمل بعض العروض التوضيحية الحالية التي تقدّمها مجموعة تطبيقات الويب التفاعلية، وتحديدًا تلك التي تستخدم النوافذ السحرية، مع تفعيل اختبار WebXR للاصطدام. يُرجى العذر في مخلّفات البناء.

• Chacmool
• الويب الغامر عيّنة
• Codelab

مجرد صفحات الويب

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

"ما هي إضافة Chrome التي يجب تثبيتها؟" "لا تتوفّر أي إضافة. إنه الويب فقط".

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

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

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

إذا كنت تريد معرفة المزيد عن الويب الغامر بشكل عام، ومعرفة تطوّره واتجاهاته، يمكنك الاطّلاع على هذا الفيديو.

ما الفائدة؟

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

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

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

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

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

عمليات بث الأشعة واختبارات الاصطدامات وشبكات الاستهداف

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

هذه فرصة جيدة لتجربة نموذج الرمز البرمجي الجديد في Chrome Canary. قبل تنفيذ أي إجراء، يُرجى التأكّد من تفعيل العلامات الصحيحة. الآن، حمِّل العيّنة وانقر على "بدء الواقع المعزّز".

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

العرض التوضيحي لاختبار اصطدامات الواقع المعزّز

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

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

الرمز البرمجي

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

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

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

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

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

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

تحريك شبكة الاستهداف

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

ابدأ بطلب معاودة الاتصال على 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-matrix ليس شرطًا. من المهم معرفة ما يتم حسابه باستخدامه وأنّه يستند إلى موضع الجهاز. استرداد موقع الجهاز من 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. يمكنك إجراء ذلك إذا كنت طموحًا جدًا. ومع ذلك، ننصحك باستخدام إطار عمل. تستخدِم نماذج الويب immersive واحدًا تم إنشاؤه للعروض التوضيحية فقط باسم Cottontail، وأصبح WebXR متوافقًا مع Three.js منذ أيار (مايو).

وضع كائن

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

الخاتمة

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

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