با WebXR توسعه دهید

Chrome در Android XR از WebXR پشتیبانی می‌کند. WebXR یک استاندارد باز توسط W3C است که API های XR با کارایی بالا را به مرورگرهای پشتیبانی شده می آورد. اگر برای وب می‌سازید، می‌توانید سایت‌های موجود را با مدل‌های سه‌بعدی ارتقا دهید یا تجربه‌های همهجانبه جدیدی ایجاد کنید.

ویژگی‌های WebXR زیر توسط Chrome برای Android XR پشتیبانی می‌شوند:

برای مشاهده عملکرد WebXR، Chrome را در دستگاه Android XR یا شبیه‌ساز Android XR راه‌اندازی کنید و نمونه‌های رسمی WebXR را مرور کنید.

پیش نیاز: یک چارچوب WebXR را انتخاب کنید

قبل از شروع توسعه، مهم است که چارچوب WebXR مناسب را انتخاب کنید. این به طور قابل توجهی بهره وری شما را افزایش می دهد و کیفیت تجربیاتی را که ایجاد می کنید بهبود می بخشد.

  • برای کنترل کامل بر صحنه های سه بعدی و ایجاد تعاملات سفارشی یا پیچیده، سه.js و babylon.js را توصیه می کنیم.
  • برای نمونه سازی سریع یا استفاده از نحو HTML مانند برای تعریف صحنه های سه بعدی، A-Frame و Model-viewer را توصیه می کنیم.
  • همچنین می‌توانید چارچوب‌ها و کدهای نمونه بیشتری را مرور کنید.

اگر ترجیح می دهید از JavaScript و WebGL بومی استفاده کنید، برای ایجاد اولین آزمایش WebXR خود به WebXR در GitHub مراجعه کنید.

سازگار با 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 متناظر آن دو بار اجرا می شود.

تجسم عمق در زمان واقعی با استفاده از API سنجش عمق WebXR. قرمز نشان دهنده پیکسل های نزدیک تر است در حالی که آبی نشان دهنده پیکسل های دورتر است.

تعامل دستی را در WebXR اضافه کنید

افزودن تعامل دستی به برنامه WebXR، تعامل کاربر را با فعال کردن تجربیات بصری و همهجانبه‌تر افزایش می‌دهد.

ورودی دستی مکانیزم تعامل اولیه در Android XR است. Chrome for Android XR از Hand Input API به عنوان ورودی پیش‌فرض پشتیبانی می‌کند. این API به کاربران اجازه می دهد تا به طور طبیعی با اشیاء مجازی تعامل داشته باشند، با استفاده از حرکات و حرکات دست برای گرفتن، فشار دادن یا دستکاری عناصر موجود در صحنه.

دستگاه‌هایی مانند تلفن‌های همراه یا دستگاه‌های XR با محوریت کنترلر ممکن است هنوز از ورودی دستی پشتیبانی نکنند. ممکن است لازم باشد کد WebXR خود را برای پشتیبانی صحیح از ورودی دستی به روز کنید. جلسه VR Immersive with Hands نشان می دهد که چگونه ردیابی دست را در پروژه WebXR خود یکپارچه کنید.

انیمیشن زیر نمونه‌ای از ترکیب pinching با WebXR API را نشان می‌دهد تا کاربر را در حال پاک کردن سطح یک فضای مجازی برای نشان دادن یک پنجره عبور به دنیای واقعی نشان دهد.

نسخه ی نمایشی WebXR از استفاده از نیشگون گرفتن دست برای پاک کردن صفحه نمایش برای مشاهده واقعیت فیزیکی.

مجوزها در WebXR

وقتی از WebXR APIهایی استفاده می‌کنید که به مجوز نیاز دارند، Chrome از کاربر می‌خواهد مجوز را به سایت بدهد. همه APIهای WebXR به نقشه سه بعدی و مجوز ردیابی دوربین نیاز دارند. دسترسی به داده های صورت، چشم و دست ردیابی شده نیز توسط مجوزها محافظت می شود. اگر همه مجوزهای مورد نیاز اعطا شود، فراخوانی navigator.xr.requestSession('immersive-ar', options) یک جلسه WebXR معتبر برمی گرداند.

اولویت مجوزهای انتخاب شده توسط کاربر برای هر دامنه باقی می ماند. دسترسی به تجربه WebXR در یک دامنه دیگر باعث می‌شود Chrome دوباره مجوزها را درخواست کند. اگر تجربه WebXR به چندین مجوز نیاز دارد، Chrome هر مجوز را یکی یکی درخواست می‌کند.

مانند تمام مجوزها در وب، شما باید به درستی موقعیت هایی را که مجوز رد می شود، مدیریت کنید.