هنگام آماده شدن برای Google I/O، می‌خواستیم امکانات هیجان‌انگیز واقعیت افزوده (AR) در وب را برجسته کنیم. Chacmool یک نسخه نمایشی تجربه وب آموزشی است که ما ساخته ایم تا نشان دهیم AR مبتنی بر وب چگونه می تواند به کاربران در تعامل با تجربیات AR کمک کند. وب AR را در همه جا راحت و قابل دسترس می کند.
ما اکنون این نسخه نمایشی را در Chrome Canary در دستگاه‌های Android سازگار با ARCore با Android O یا جدیدتر فعال کرده‌ایم. همچنین باید ARCore را نصب کنید . این کار متکی به یک پیشنهاد WebXR جدید ( API WebXR Hit Test ) است، بنابراین تحت یک پرچم قرار دارد و در نظر گرفته شده است که در Canary باقی بماند، زیرا ما پیشنهاد API جدید را با سایر اعضای گروه جامعه Web Immersive آزمایش و اصلاح می کنیم. در واقع، برای دسترسی به نسخه نمایشی، باید دو پرچم را در chrome://flags: #webxr و #webxr-hit-test . هنگامی که این هر دو را فعال کردید و Canary را مجدداً راه اندازی کردید، می توانید نسخه آزمایشی Chacmool را بررسی کنید.
تجربه Chacmool AR حول آموزش متمرکز است و از ماهیت همهجانبه و تعاملی AR استفاده می کند تا به کاربران کمک کند تا درباره مجسمه های باستانی Chacmool بیاموزند. کاربران می توانند یک مجسمه در اندازه واقعی خود را در واقعیت خود قرار دهند و برای دیدن مجسمه از زوایای مختلف و فواصل مختلف حرکت کنند. ماهیت همه جانبه AR به کاربران اجازه می دهد تا آزادانه محتوا را کشف، کشف و بازی کنند، درست مانند آنچه در دنیای واقعی می توانند. هنگام مشاهده یک شی در واقعیت افزوده، بر خلاف دیدن آن در یک صفحه دو بعدی مسطح، می‌توانیم درک عمیقی از آنچه به آن نگاه می‌کنیم به دست آوریم زیرا می‌توانیم آن را از زوایای مختلف و فواصل مختلف با استفاده از یک مدل تعامل بسیار بصری ببینیم: راه رفتن در اطراف جسم، و از نظر فیزیکی نزدیک یا دورتر شدن. همچنین در این تجربه حاشیه‌نویسی مستقیماً روی مجسمه قرار داده شده است. این به کاربران امکان می دهد مستقیماً آنچه را که در متن توضیح داده شده است و مکان هایی که آن ویژگی ها روی مجسمه قرار دارند، به هم متصل کنند.
این نسخه آزمایشی در طول حدود یک ماه ساخته شد و از برخی از اجزای اولین نسخه آزمایشی AR مبتنی بر وب تیم WebXR، WebAR-Article استفاده کرد. اطلاعات مربوط به این مجسمه از صفحه هنر و فرهنگ گوگل آن گرفته شده است و مدل سه بعدی توسط شریک Google Arts & Culture، CyArk ارائه شده است. برای آماده سازی مدل سه بعدی برای وب، از ترکیب مشلب و میکسر مش برای تعمیر مدل و از بین بردن مش آن برای کاهش حجم فایل استفاده شد. سپس دراکو ، کتابخانه‌ای برای فشرده‌سازی و فشرده‌سازی مش‌های هندسی سه بعدی و ابرهای نقطه‌ای برای کاهش حجم فایل مدل از 44.3 مگابایت به تنها 225 کیلوبایت استفاده شد. در نهایت، یک وب‌کار برای بارگذاری مدل بر روی یک رشته پس‌زمینه استفاده می‌شود، بنابراین صفحه تعاملی باقی می‌ماند در حالی که مدل بارگیری و فشرده‌سازی می‌شود، عملیاتی که معمولاً باعث jank می‌شود و از پیمایش صفحه جلوگیری می‌کند.
ما نمی توانیم به اندازه کافی تاکید کنیم که از آنجایی که در حال توسعه روی دسکتاپ و استقرار روی تلفن بودیم، استفاده از ابزارهای اشکال زدایی از راه دور کروم برای کمک به بررسی تجربه، یک چرخه تکرار سریع بین تغییرات کد ایجاد می کند، و ابزارهای توسعه دهنده شگفت انگیزی در کروم برای اشکال زدایی وجود دارد. و بررسی عملکرد
بهترین شیوه ها برای تجربیات AR/VR
بیشتر دستورالعمل‌های طراحی و مهندسی برای طراحی تجربیات AR بومی برای ایجاد تجربیات AR مبتنی بر وب اعمال می‌شود. اگر می‌خواهید درباره بهترین شیوه‌های عمومی بیشتر بدانید، دستورالعمل‌های طراحی AR را که اخیراً منتشر کردیم، بررسی کنید.
به‌ویژه، هنگام طراحی تجربه‌های واقعیت افزوده مبتنی بر وب، بهتر است هنگام استفاده از واقعیت افزوده، از کل صفحه استفاده کنید (یعنی به حالت تمام‌صفحه مانند نحوه پخش تمام‌صفحه پخش‌کننده‌های ویدیو در تلفن همراه) استفاده کنید. این کار باعث می‌شود کاربران نتوانند نما را پیمایش کنند یا حواسشان به عناصر دیگر صفحه وب منحرف شود. انتقال به واقعیت افزوده باید صاف و بدون درز باشد و نمای دوربین را قبل از ورود به سیستم واقعیت افزوده نشان دهد (مثلاً ترسیم یک شبکه). آنچه در مورد AR مبتنی بر وب مهم است این است که برخلاف بومی، توسعه دهندگان به قاب دوربین، تخمین نور، لنگرها یا هواپیماها (هنوز) دسترسی ندارند، بنابراین مهم است که طراحان و توسعه دهندگان این محدودیت ها را هنگام طراحی در نظر داشته باشند. یک تجربه AR مبتنی بر وب
علاوه بر این، به دلیل تنوع دستگاه‌هایی که برای تجربه‌های وب استفاده می‌شوند، مهم است که عملکرد برای ایجاد بهترین تجربه کاربری بهینه شود. بنابراین: تعداد پلی را کم نگه دارید، سعی کنید با کمترین نور ممکن دور شوید، در صورت امکان سایه ها را از قبل محاسبه کنید و تماس های قرعه کشی را به حداقل برسانید. هنگام نمایش متن در واقعیت افزوده، از تکنیک‌های مدرن (به عنوان مثال بر اساس فیلد فاصله امضا شده) رندر متن استفاده کنید تا مطمئن شوید متن از همه فواصل و زوایا واضح و قابل خواندن است. هنگام قرار دادن حاشیه نویسی، نگاه کاربر را به عنوان ورودی دیگر در نظر بگیرید و تنها زمانی که حاشیه نویسی مرتبط هستند (یعنی حاشیه نویسی های مبتنی بر مجاورت که زمانی که کاربر روی یک منطقه مورد علاقه تمرکز می کند نشان داده می شود) را نشان دهید.
در نهایت، از آنجایی که این محتوا مبتنی بر وب است، مهم است که بهترین شیوه‌های طراحی کلی برای وب را نیز اعمال کنید. مطمئن شوید که سایت تجربه خوبی را در همه دستگاه‌ها (رومیزی، تبلت، موبایل، هدست، و غیره) ارائه می‌کند - پشتیبانی از بهبود پیشرونده به معنای طراحی برای دستگاه‌های غیرقابل دسترس (یعنی نمایشگر مدل سه بعدی در دستگاه‌های غیر AR) نیز می‌باشد.
اگر شما علاقه مند به توسعه تجربیات AR مبتنی بر وب خود هستید، ما در اینجا یک پست همراه داریم که جزئیات بیشتری در مورد نحوه شروع ساخت AR در وب به شما ارائه می دهد. (شما همچنین می توانید منبع نسخه ی نمایشی Chacmool را بررسی کنید.) WebXR Device API به طور فعال در حال توسعه است و ما دوست داریم بازخورد دریافت کنید تا بتوانیم مطمئن شویم که همه انواع برنامه ها و موارد استفاده را فعال می کند، بنابراین لطفاً به GitHub بروید و به آن بپیوندید. گفتگو !