واقعیت افزوده برای وب

جو مدلی
Joe Medley
GitHub

در Chrome 67، WebXR Device API را برای واقعیت افزوده (AR) و واقعیت مجازی (VR) اعلام کردیم ، اگرچه فقط ویژگی‌های VR فعال بودند. VR یک تجربه است که صرفاً بر اساس آنچه در یک دستگاه محاسباتی وجود دارد است. از طرف دیگر AR به شما امکان می دهد اشیاء مجازی را در دنیای واقعی رندر کنید. برای اجازه دادن به قرار دادن و ردیابی آن اشیا، ما فقط WebXR Hit Test API را به Chrome Canary اضافه کردیم، روش جدیدی که به کدهای وب همهجانبه کمک می کند اشیاء را در دنیای واقعی قرار دهند.

کجا می توانم آن را بدست بیاورم؟

این API در نظر گرفته شده است تا در آینده نزدیک در قناری بماند. ما یک دوره آزمایش طولانی می خواهیم زیرا این یک پیشنهاد API بسیار جدید است و می خواهیم مطمئن شویم که هم قوی و هم برای توسعه دهندگان مناسب است.

به غیر از کروم قناری، به موارد زیر نیز نیاز دارید:

با استفاده از اینها، می‌توانید به دموها بروید یا کدهای ما را امتحان کنید.

این فقط وب است

در Google IO امسال، واقعیت افزوده را با ساخت اولیه کروم به نمایش گذاشتیم. من در طول این سه روز بارها و بارها به توسعه دهندگان و غیر توسعه دهندگان چیزی گفتم که ای کاش می دانستم آن را در مقاله غوطه ور وب خود قرار می دادم: "این فقط وب است."

"چه برنامه افزودنی کروم را باید نصب کنم؟" "هیچ افزونه ای وجود ندارد. فقط وب است."

"آیا به مرورگر خاصی نیاز دارم؟" "این فقط وب است."

"چه برنامه ای را باید نصب کنم؟" "هیچ برنامه خاصی وجود ندارد. فقط وب است."

این ممکن است برای شما واضح باشد زیرا در حال خواندن این مطلب در یک وب سایت اختصاص داده شده به وب هستید. اگر با این API جدید نمایش هایی می سازید، برای این سوال آماده شوید. شما آن را بسیار دریافت خواهید کرد.

اگر صحبت از IO شد، اگر می‌خواهید بیشتر درباره وب همه‌جانبه به طور کلی بشنوید، کجاست، کجا می‌رود ، این ویدیو را ببینید.

چه فایده ای دارد؟

واقعیت افزوده افزوده ارزشمندی برای بسیاری از صفحات وب موجود خواهد بود. به عنوان مثال، می‌تواند به افراد کمک کند تا در سایت‌های آموزشی یاد بگیرند و به خریداران بالقوه اجازه می‌دهد هنگام خرید، اشیاء موجود در خانه خود را تجسم کنند.

دموهای ما این را نشان می دهد. آنها به کاربران این امکان را می دهند که نمایشی در اندازه واقعی از یک شی را به گونه ای که در واقعیت است قرار دهند. پس از قرار گرفتن، تصویر روی سطح انتخاب شده باقی می‌ماند، به اندازه‌ای ظاهر می‌شود که اگر مورد واقعی روی آن سطح باشد، ظاهر می‌شود و به کاربر این امکان را می‌دهد که در اطراف آن و همچنین نزدیک‌تر یا دورتر از آن حرکت کند. این به بینندگان درک عمیق تری از شیء نسبت به تصویر دو بعدی می دهد.

اگر مطمئن نیستید که منظور من از همه اینها چیست، وقتی از دموها استفاده می کنید مشخص می شود. اگر دستگاهی ندارید که بتواند نسخه ی نمایشی را اجرا کند ، پیوند ویدیوی بالای این مقاله را بررسی کنید.

چیزی که نسخه ی نمایشی و ویدئو نشان نمی دهد این است که چگونه AR می تواند اندازه یک شی واقعی را منتقل کند. ویدیوی اینجا یک نسخه ی نمایشی آموزشی را نشان می دهد که ما به نام Chacmool ساخته ایم. یک مقاله همراه این نسخه ی نمایشی را به تفصیل شرح می دهد. نکته مهم برای این بحث این است که وقتی مجسمه Chacmool را در واقعیت افزوده قرار می دهید، اندازه آن را می بینید که گویی واقعاً در اتاق با شماست.

مثال Chacmool آموزشی است اما می تواند به همین راحتی تجاری باشد. یک سایت خرید مبلمان را تصور کنید که به شما امکان می دهد یک کاناپه در اتاق نشیمن خود قرار دهید. برنامه AR به شما می گوید که آیا کاناپه با فضای شما مطابقت دارد و چگونه در کنار مبلمان دیگر شما به نظر می رسد.

ری کست، تست ضربه و رتیکل

یکی از مشکلات کلیدی که باید هنگام اجرای واقعیت افزوده حل شود، نحوه قرار دادن اشیا در یک نمای دنیای واقعی است. روش انجام این کار را ریخته گری پرتو می گویند. ریخته گری پرتو به معنای محاسبه تقاطع بین پرتو اشاره گر و یک سطح در دنیای واقعی است. آن تقاطع ضربه نامیده می شود و تعیین اینکه آیا ضربه اتفاق افتاده است یک تست ضربه است.

این زمان خوبی برای آزمایش نمونه کد جدید در Chrome Canary است. قبل از انجام هر کاری، دوباره بررسی کنید که پرچم‌های صحیح را فعال کرده باشید . اکنون نمونه را بارگذاری کنید و روی "شروع AR" کلیک کنید.

به چند نکته توجه کنید اول، سرعت سنج که ممکن است از نمونه های غوطه ور دیگر تشخیص دهید، به جای 60، 30 فریم در ثانیه را نشان می دهد. این نرخی است که صفحه وب با آن تصاویر را از دوربین دریافت می کند.

AR با سرعت 30 فریم در ثانیه اجرا می شود

نسخه ی نمایشی AR Hit Test

نکته دیگری که باید به آن توجه کنید تصویر گل آفتابگردان است. در حین حرکت حرکت می کند و به سطوحی مانند کف و میز می چسبد. اگر روی صفحه ضربه بزنید، یک گل آفتابگردان روی یک سطح قرار می گیرد و یک گل آفتابگردان جدید با دستگاه شما حرکت می کند.

تصویری که با دستگاه شما حرکت می‌کند و سعی می‌کند روی سطوح قفل شود، رتیکل نامیده می‌شود. رتیکل یک تصویر موقت است که به قرار دادن یک شی در واقعیت افزوده کمک می کند. در این دمو، رتیکل کپی از تصویری است که قرار است قرار گیرد. اما نیازی نیست که باشد. به عنوان مثال، در نسخه ی نمایشی Chacmool، یک جعبه مستطیل شکل است که تقریباً به شکل پایه جسم قرار داده شده است.

پایین به کد

نسخه ی نمایشی Chacmool نشان می دهد که AR ممکن است در یک برنامه تولیدی به نظر برسد. خوشبختانه، نسخه ی نمایشی بسیار ساده تری در مخزن نمونه WebXR وجود دارد. کد نمونه من از نسخه آزمایشی AR Hit Test در آن مخزن می آید. FYI، من دوست دارم مثال های کد را ساده کنم تا به شما کمک کنم بفهمید چه اتفاقی در حال رخ دادن است.

اصول اولیه ورود به جلسه AR و اجرای یک حلقه رندر برای AR مانند واقعیت مجازی است. اگر آشنا نیستید می توانید مقاله قبلی من را بخوانید. برای دقیق تر، ورود و اجرای یک جلسه AR تقریباً شبیه ورود به یک جلسه پنجره جادویی VR است. مانند پنجره جادویی، نوع جلسه باید غوطه‌ور نباشد و چارچوب نوع مرجع باید 'eye-level' باشد.

API جدید

اکنون نحوه استفاده از API جدید را به شما نشان خواهم داد. به یاد بیاورید که در AR، شبکه سعی می کند قبل از قرار دادن یک آیتم، سطحی را پیدا کند. این کار با تست ضربه انجام می شود. برای انجام تست ضربه، XRSession.requestHitTest() را فراخوانی کنید. به نظر می رسد این است:

xrSession.requestHitTest(origin, direction, frameOfReference)
.then(xrHitResult => {
  //
});

سه آرگومان این روش یک پرتو پرتویی را نشان می دهد. پرتو پرتو با دو نقطه روی پرتو ( origin و direction ) و جایی که آن نقاط از ( frameOfReference ) محاسبه می‌شوند، تعریف می‌شود. مبدا و جهت هر دو بردار سه بعدی هستند. صرف نظر از اینکه چه مقداری را ارسال می کنید، آنها به طول 1 نرمال می شوند (تبدیل می شوند).

جابجایی شبکه

همانطور که دستگاه خود را جابجا می کنید، شبکیه باید با آن حرکت کند زیرا سعی می کند مکانی را پیدا کند که بتوان یک شی را در آن قرار داد. این بدان معناست که رتیکل باید در هر فریم دوباره ترسیم شود.

با درخواست requestAnimationFrame() شروع کنید. همانند VR، شما به یک جلسه و یک ژست نیاز دارید.

function onXRFrame(t, frame) {
  let xrSession = frame.session;
  // The frame of reference, which was set elsewhere, is 'eye-level'.
  // See onSessionStarted() ins the sample code for details.
  let xrPose = frame.getDevicePose(xrFrameOfRef);
  if (xrPose && xrPose.poseModelMatrix) {
    // Do the hit test and draw the reticle.
  }
}

هنگامی که جلسه و ژست را انجام دادید، مشخص کنید که پرتو در کجا ریخته می شود. کد نمونه از کتابخانه ریاضی gl-matrix استفاده می کند. اما gl-matrix یک الزام نیست. نکته مهم این است که بدانید با آن چه چیزی را محاسبه می کنید و اینکه بر اساس موقعیت دستگاه است. موقعیت دستگاه را از XRPose.poseModalMatrix بازیابی کنید. با در دست گرفتن پرتو، requestHitTest() را فراخوانی کنید.

function onXRFrame(t, frame) {
  let xrSession = frame.session;
  // The frame of reference, which was set elsewhere, is 'eye-level'.
  // See onSessionStarted() ins the sample code for details.
  let xrPose = frame.getDevicePose(xrFrameOfRef);
  if (xrPose && xrPose.poseModelMatrix) {
    // Calculate the origin and direction for the raycast.
    xrSession.requestHitTest(rayOrigin, rayDirection, xrFrameOfRef)
    .then((results) => {
      if (results.length) {
        // Draw for each view.
      }
    });
  }
  session.requestAnimationFrame(onXRFrame);
}

اگرچه در نمونه تست ضربه به آن واضح نیست، اما برای ترسیم صحنه باید نماها را حلقه بزنید . طراحی با استفاده از WebGL API انجام می شود. اگر واقعا جاه طلب هستید می توانید این کار را انجام دهید. با این حال، توصیه می کنیم از یک چارچوب استفاده کنید. نمونه‌های وب همه‌جانبه از نمونه‌ای استفاده می‌کنند که فقط برای نسخه‌های نمایشی به نام Cottontail ایجاد شده است و Three.js از ماه می از WebXR پشتیبانی می‌کند.

قرار دادن یک شی

هنگامی که کاربر روی صفحه ضربه می زند، یک شی در AR قرار می گیرد. برای آن شما از رویداد select استفاده می کنید. نکته مهم در این مرحله این است که بدانید آن را در کجا قرار دهید. از آنجایی که رتیکول متحرک منبع ثابتی از تست های ضربه را به شما می دهد، ساده ترین راه برای قرار دادن یک شی این است که آن را در محل شبکه در آخرین تست ضربه بکشید. اگر نیاز دارید، مثلاً دلیل موجهی برای نشان ندادن یک رتیکل دارید، می‌توانید requestHitTest() در رویداد select همانطور که در نمونه نشان داده شده است فراخوانی کنید.

نتیجه

بهترین راه برای دستیابی به این موضوع این است که از طریق کد نمونه گام بردارید یا نرم افزار Codelab را امتحان کنید. امیدوارم پیش زمینه کافی برای درک هر دوی آنها به شما داده باشم.

ما ساختن APIهای وب همهجانبه را به پایان نرسانده ایم. با پیشرفت، مقالات جدیدی را در اینجا منتشر خواهیم کرد.