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

Joe Medley

في الإصدار 67 من Chrome، أعلنّا عن WebXR Device API لكل من الواقع المعزّز (AR) والواقع الافتراضي (VR)، مع أنّ ميزات الواقع الافتراضي فقط كانت مفعّلة. الواقع الافتراضي هو تجربة تعتمد بالكامل على المحتوى المتوفّر على جهاز الكمبيوتر. من ناحية أخرى، يتيح لك الواقع المعزّز عرض عناصر افتراضية في العالم الحقيقي. للسماح بوضع هذه الأجسام وتتبُّعها، أضفنا 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() في الحدث المحدّد كما هو موضّح في العيّنة.

الخاتمة

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

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