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

أجهزة XR المشمولة

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

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

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

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

في ما يلي ميزات WebXR التي يتيحها Chrome لنظام Android XR:

• ‫Device API
• ‫AR Module
• ‫Gamepads Module
• ‫Hit Test Module
• ‫Hand Input
• الروابط
• ‫Depth Sensing
• ‫Light Estimation

للاطّلاع على WebXR أثناء العمل، شغِّل Chrome على جهاز Android XR أو الـ Android XR Emulator وتصفَّح نماذج 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 XR مع وحدة Depth Sensing Module في 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 كطريقة إدخال تلقائية. تتيح واجهة برمجة التطبيقات هذه للمستخدمين التفاعل مع الكائنات الافتراضية بشكل طبيعي، باستخدام الإيماءات وحركات اليد للإمساك بالعناصر أو دفعها أو معالجتها في المشهد.

قد لا تتيح الأجهزة، مثل الهواتف الجوّالة أو أجهزة XR التي تركّز على وحدات التحكّم، إدخال اليد بعد. قد تحتاج إلى تعديل رمز WebXR ليتوافق بشكل صحيح مع إدخال اليد. يوضّح المثال Immersive VR Session with Hands كيفية دمج تتبُّع اليد في مشروع WebXR.

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

الأذونات في WebXR

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

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

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