تطوير تطبيقات الويب على Android XR

أجهزة XR المعنيّة

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

مزيد من المعلومات حول أنواع أجهزة XR →

مزيد من المعلومات حول أنواع أجهزة XR →

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

يتوافق Chrome مع أجهزة Android XR مع ميزات WebXR التالية:

• واجهة برمجة التطبيقات 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 for Android XR مع وحدة استشعار العمق في 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 API التي تتطلّب الحصول على إذن، يطلب Chrome من المستخدم منح الإذن للموقع الإلكتروني. تتطلّب جميع واجهات برمجة تطبيقات WebXR الحصول على إذن بتتبُّع الكاميرا وإنشاء خرائط ثلاثية الأبعاد. تتم أيضًا حماية بيانات الوجه والعينين واليدين التي يتم تتبُّعها من خلال الأذونات. في حال منح جميع الأذونات المطلوبة، سيؤدي استدعاء navigator.xr.requestSession('immersive-ar', options) إلى عرض جلسة WebXR صالحة.

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

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