التطوير باستخدام WebXR

يتوافق Chrome على نظام التشغيل Android XR مع WebXR. ‫WebXR هو معيار مفتوح وضعته W3C يقدّم واجهات برمجة تطبيقات XR عالية الأداء لالمتصفّحات المتوافقة. إذا كنت بصدد إنشاء محتوى للويب، يمكنك تحسين المواقع الإلكترونية الحالية باستخدام نماذج ثلاثية الأبعاد أو إنشاء تجارب غامرة جديدة.

تتوفّر ميزات WebXR التالية في Chrome لأجهزة Android التي تتضمّن تقنية الواقع المعزّز:

• Device API
• وحدة الواقع المعزّز
• وحدة لوحات التحكّم بالألعاب
• وحدة اختبار النقرات
• إدخال اليد
• الروابط
• الاستشعار بالاستناد إلى العمق
• تقدير الإضاءة

للاطّلاع على WebXR أثناء التشغيل، افتح Chrome على جهاز Android XR أو محاكي Android XR تصفَّح عيّنات WebXR الرسمية.

شرط أساسي: اختيار إطار عمل WebXR

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

• للتحكّم بشكل كامل في المشاهد الثلاثية الأبعاد وإنشاء تفاعلات مخصّصة أو معقّدة، ننصحك باستخدام three.js وbabylon.js.
• لإنشاء النماذج الأولية بسرعة أو استخدام بنية مشابهة لبنية HTML لتحديد المشاهد الثلاثية الأبعاد، ننصحك باستخدام A-Frame وmodel-viewer.
• يمكنك أيضًا مراجعة المزيد من الإطارات ونموذج الرموز البرمجية.

إذا كنت تفضّل استخدام JavaScript وWebGL الأصليَين، يمكنك الرجوع إلى WebXR على GitHub لإنشاء تجربتك الأولى مع WebXR.

إتاحة التطبيق على أجهزة Android XR

إذا كانت لديك تجارب WebXR حالية تعمل على أجهزة أخرى، قد تحتاج إلى تعديل الرمز البرمجي لتتوافق مع WebXR بشكلٍ سليم على Android XR. على سبيل المثال، يجب أن تتكيّف تجارب WebXR المركّزة على الأجهزة الجوّالة من شاشة واحدة إلى شاشةَين ستيريو في Android XR. قد تحتاج تجارب WebXR التي تستهدف الأجهزة الجوّالة أو الأجهزة المتوفّرة حاليًا إلى تعديل رمز الإدخال ليكون متوافقًا مع الأجهزة التي تعمل باللمس.

عند استخدام WebXR على Android XR، قد تحتاج إلى تعديل الرمز البرمجي للتعويض عن حقيقة توفُّر شاشتَين، إحداهما لكل عين.

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

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

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

على عكس ميزة "استشعار العمق" على الهواتف الجوّالة، توفّر ميزة "استشعار العمق" في Android XR ميزة الاستشعار المجسم، ما يتيح بث خريطتَي عمق في الوقت الفعلي للرؤية بكلتا العينَين. قد تحتاج إلى تعديل رمز WebXR لتتمكّن من عرض إطارات العمق الاستيريو بشكل صحيح.

يعرض المثال التالي معلومات العمق بشكل مجسم:

// Called every time a XRSession requests that a new frame be drawn.
function onXRFrame(t, frame) {
  const session = frame.session;
  session.requestAnimationFrame(onXRFrame);
  const baseLayer = session.renderState.baseLayer;
  const pose = frame.getViewerPose(xrRefSpace);

  if (pose) {
    gl.bindFramebuffer(gl.FRAMEBUFFER, session.renderState.baseLayer.framebuffer);

    // Clears the framebuffer.
    gl.clearColor(0, 0, 0, 0);
    gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

    // Note: Two views will be returned from pose.views.
    for (const view of pose.views) {
      const viewport = baseLayer.getViewport(view);
      gl.viewport(viewport.x, viewport.y, viewport.width, viewport.height);

      const depthData = frame.getDepthInformation(view);
      if (depthData) {
        renderDepthInformationGPU(depthData, view, viewport);
      }
    }
  } else {
    console.error('Pose unavailable in the current frame!');  }
}

نقاط رئيسية حول الرمز

• يجب عرض وضع صالح للوصول إلى بيانات العمق.
• تُعرِض pose.views عرضًا لكل عين ويتم تنفيذ حلقة for المقابلة لها مرّتين.

إضافة تفاعل اليد في WebXR

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

يُعدّ الإدخال اليدوي آلية التفاعل الأساسية في Android XR. يتوافق Chrome لأجهزة Android XR مع واجهة برمجة التطبيقات Hand Input API كطريقة إدخال تلقائية. تتيح واجهة برمجة التطبيقات هذه للمستخدمين التفاعل مع الأجسام الافتراضية بشكل طبيعي، باستخدام الإيماءات و حركات اليد لالتقاط العناصر في المشهد أو دفعها أو التلاعب بها.

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

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

الأذونات في WebXR

عند استخدام واجهات برمجة تطبيقات WebXR التي تتطلّب الحصول على إذن، يطلب Chrome من المستخدم منح الإذن للموقع الإلكتروني. تتطلّب جميع واجهات برمجة تطبيقات WebXR إذنَي الربط بخريطة ثلاثية الأبعاد وtracking camera (تتبُّع الكاميرا). إنّ أذونات الوصول إلى بيانات الوجه والعين واليد التي يتم تتبُّعها محمية أيضًا. في حال منح جميع الأذونات المطلوبة، يؤدي استدعاء navigator.xr.requestSession('immersive-ar', options) إلى عرض جلسة WebXR صالحة.

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

كما هو الحال مع جميع الأذونات على الويب، يجب التعامل بشكل صحيح مع الحالات التي يتم فيها رفض الإذن.