کروم در اندروید XR از WebXR پشتیبانی میکند. WebXR یک استاندارد باز توسط W3C است که APIهای XR با عملکرد بالا را برای مرورگرهای پشتیبانیشده به ارمغان میآورد. اگر در حال ساخت وبسایت برای وب هستید، میتوانید سایتهای موجود را با مدلهای سهبعدی بهبود بخشید یا تجربیات فراگیر جدیدی بسازید.
ویژگیهای WebXR زیر توسط کروم برای اندروید XR پشتیبانی میشوند:
- رابط برنامهنویسی دستگاه
- ماژول واقعیت افزوده
- ماژول دستههای بازی
- ماژول تست ضربه
- ورودی دستی
- لنگرها
- سنجش عمق
- تخمین نور
برای مشاهدهی WebXR در عمل، کروم را روی یک دستگاه اندروید XR یا شبیهساز اندروید XR اجرا کنید و نمونههای رسمی WebXR را مرور کنید.
پیشنیاز: انتخاب یک چارچوب WebXR
قبل از شروع توسعه، انتخاب چارچوب WebXR مناسب بسیار مهم است. این امر به طور قابل توجهی بهرهوری شما را افزایش داده و کیفیت تجربیاتی را که ایجاد میکنید، بهبود میبخشد.
- برای کنترل کامل بر صحنههای سهبعدی و ایجاد تعاملات سفارشی یا پیچیده، three.js و babylon.js را توصیه میکنیم.
- برای نمونهسازی سریع یا استفاده از سینتکس شبیه HTML برای تعریف صحنههای سهبعدی، A-Frame و model-viewer را توصیه میکنیم.
- همچنین میتوانید چارچوبها و نمونه کدهای بیشتری را بررسی کنید.
اگر ترجیح میدهید از جاوا اسکریپت و WebGL بومی استفاده کنید، برای ایجاد اولین آزمایش WebXR خود به WebXR در GitHub مراجعه کنید.
سازگاری با اندروید XR
اگر از قبل تجربههای WebXR را روی دستگاههای دیگر اجرا میکنید، ممکن است لازم باشد کد خود را بهروزرسانی کنید تا به درستی از WebXR در اندروید XR پشتیبانی کند. به عنوان مثال، تجربههای WebXR که روی دستگاههای تلفن همراه متمرکز هستند، باید از یک صفحه نمایش به دو صفحه نمایش استریو در اندروید XR سازگار شوند. تجربههای WebXR که دستگاههای تلفن همراه یا هدستهای موجود را هدف قرار میدهند، ممکن است نیاز داشته باشند کد ورودی را طوری تطبیق دهند که به صورت دستی اجرا شود.
هنگام کار با WebXR در اندروید XR، ممکن است لازم باشد کد خود را بهروزرسانی کنید تا این واقعیت را که دو صفحه نمایش وجود دارد - یکی برای هر چشم - جبران کنید.
درباره تضمین حس عمق در WebXR
وقتی کاربر یک شیء مجازی را در فضای فیزیکی خود قرار میدهد، مقیاس آن باید دقیق باشد تا طوری به نظر برسد که انگار واقعاً به آنجا تعلق دارد. به عنوان مثال، در یک برنامه خرید مبلمان، کاربران باید اعتماد کنند که یک صندلی راحتی مجازی کاملاً در اتاق نشیمن آنها جا میشود.
کروم برای اندروید XR از ماژول سنجش عمق در WebXR پشتیبانی میکند که توانایی دستگاه را در درک ابعاد و خطوط محیط واقعی افزایش میدهد. این اطلاعات عمق به شما امکان میدهد تعاملات همهجانبهتر و واقعگرایانهتری ایجاد کنید و به کاربران در تصمیمگیری آگاهانه کمک کنید.
برخلاف حسگر عمق در تلفنهای همراه، حسگر عمق در اندروید 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 شما، با فراهم کردن تجربیات شهودیتر و فراگیرتر، تعامل کاربر را افزایش میدهد.
ورودی دست، مکانیزم اصلی تعامل در اندروید XR است. کروم برای اندروید XR از رابط برنامهنویسی کاربردی (API) ورودی دست به عنوان ورودی پیشفرض پشتیبانی میکند. این API به کاربران اجازه میدهد تا به طور طبیعی با اشیاء مجازی تعامل داشته باشند و از حرکات و اشارات دست برای گرفتن، هل دادن یا دستکاری عناصر در صحنه استفاده کنند.
دستگاههایی مانند تلفنهای همراه یا دستگاههای XR با محوریت کنترلر ممکن است هنوز از ورودی دست پشتیبانی نکنند. ممکن است لازم باشد کد WebXR خود را بهروزرسانی کنید تا به درستی از ورودی دست پشتیبانی کند. جلسه واقعیت مجازی فراگیر با دستها نحوه ادغام ردیابی دست را در پروژه WebXR شما نشان میدهد.
انیمیشن زیر نمونهای از ترکیب پینچینگ با WebXR API را نشان میدهد که در آن کاربر سطح یک فضای مجازی را "پاک" میکند تا یک پنجرهی عبور به دنیای واقعی نمایان شود.
نسخه آزمایشی WebXR از استفاده از نیشگون گرفتن دست برای پاک کردن صفحه نمایش و دیدن واقعیت فیزیکی.
مجوزها در WebXR
وقتی از APIهای WebXR که نیاز به مجوز دارند استفاده میکنید، کروم از کاربر میخواهد که به سایت اجازه دسترسی بدهد. همه APIهای WebXR به مجوز نقشهبرداری سهبعدی و ردیابی دوربین نیاز دارند. دادههای ردیابیشده چهره، چشم و دست دسترسی نیز توسط مجوزها محافظت میشوند. اگر همه مجوزهای مورد نیاز اعطا شده باشند، فراخوانی navigator.xr.requestSession('immersive-ar', options) یک جلسه معتبر WebXR را برمیگرداند.
تنظیمات دسترسی انتخاب شده توسط کاربر برای هر دامنه ادامه مییابد. دسترسی به یک تجربه WebXR در یک دامنه متفاوت باعث میشود کروم دوباره درخواست مجوز کند. اگر تجربه WebXR به چندین مجوز نیاز داشته باشد، کروم هر مجوز را یکی یکی درخواست میکند.
همانند تمام مجوزهای موجود در وب، شما باید به درستی موقعیتهایی را که مجوز رد میشود، مدیریت کنید.