במסגרת ההכנות ל-Google I/O, רצינו להדגיש את האפשרויות המדהימות של מציאות רבודה (AR) באינטרנט. Chacmol היא הדגמה של חוויית השימוש באינטרנט שפיתחנו כדי להראות כמה קל להשתמש ב-AR באינטרנט כדי לעזור למשתמשים להתנסות בחוויות AR. האינטרנט הופך את ה-AR לנוח ונגיש מכל מקום.
הפעלנו את ההדגמה הזו ב-Chrome Canary במכשירי Android שתואמים ל-ARCore עם Android O ואילך. צריך גם להתקין את ARCore.
העבודה הזו מסתמכת על הצעת WebXR חדשה (WebXR Hit Test API), ולכן היא נמצאת בדגל ומטרתה להישאר ב-Canary בזמן שאנחנו בודקים ומשפרים את הצעת ה-API החדשה יחד עם חברים אחרים בקבוצת Immersive Web Community Group. למעשה, כדי לגשת להדגמה, צריך להפעיל שני דגלים ב-chrome://flags:
#webxr וב-#webxr-hit-test. אחרי ששני ההגדרות האלה יופעלו ותפעילו מחדש את Canary, תוכלו לבדוק את ההדגמה של Chacmool.
חוויית ה-AR של Chat מתמקדת בחינוך המשתמשים בטבע הסוחף והאינטראקטיבי של AR כדי לעזור למשתמשים ללמוד על פסלי צ'אקמול העתיקים. המשתמשים יכולים להציב פסל בגודל טבעי במציאות שלהם ולנוע כדי לראות את הפסל מזוויות שונות וממרחקים שונים. האופי העשיר של ה-AR מאפשר למשתמשים לחקור, לגלות ולשחק בתוכן בצורה חופשית, בדיוק כמו בעולם האמיתי. כשמציגים אובייקט ב-AR, בניגוד לצפייה במסך דו-ממדי שטוח, אנחנו יכולים לקבל הבנה עמוקה של מה שאנחנו מסתכלים עליו, כי אנחנו יכולים לראות אותו מזוויות שונות וממרחקים רבים באמצעות מודל אינטראקציה אינטואיטיבי מאוד: הליכה מסביב לאובייקט והתקרבות או התרחקות פיזית. בנוסף, בחוויה הזו יש הערות ישירות על הפסל. כך המשתמשים יכולים לקשר ישירות בין מה שמתואר בטקסט לבין המיקום של המאפיינים האלה בפסל.
תהליך הפיתוח של ההדגמה הזו נמשך כחודש, תוך שימוש בחלק מהרכיבים מההדגמה הראשונה של צוות WebXR ב-AR, שנקראת WebAR-Article. המידע על הפסל מגיע מדף Google Arts & Culture שלו, והמודל התלת-ממדי סופק על ידי השותף של Google Arts & Culture, CyArk. כדי שהמודל התלת-ממדי יהיה מוכן לאינטרנט, השתמשנו בשילוב של Meshlab ו-Mesh Mixer כדי לתקן את המודל ולבטל את הרשת שלו כדי להקטין את גודל הקובץ. לאחר מכן השתמשנו ב-Draco, ספרייה לדחיסה ולביטול דחיסה של רשתות גיאומטריות בתלת-ממד וענני נקודות כדי להקטין את גודל הקובץ של המודל מ-44.3 מגה-בייט ל-225 ק"מ בלבד. לבסוף, משתמשים בעובד אינטרנט כדי לטעון את המודל ב-thread ברקע, כך שהדף נשאר אינטראקטיבי בזמן שהמודל נטען ומפוצל – פעולה שבדרך כלל גורמת לבעיות בממשק (jank) ומונעת את גלילת הדף.
חשוב לנו לציין שמאחר שפיתחנו במחשב שולחני ופרסנו אותו בטלפון, הכלים של Chrome לניפוי באגים מרחוק שעזרו לנו לבדוק את החוויה יגרמו למחזור אחזור מהיר ונהדר בין שינויי קוד, ויש כלים מדהימים למפתחים ב-Chrome לניפוי באגים ולבדיקת ביצועים.
שיטות מומלצות לחוויות AR/VR
רוב הנחיות העיצוב וההנדסה לעיצוב חוויות AR מותאמות רלוונטיות ליצירת חוויות AR מבוססות-אינטרנט. למידע נוסף על שיטות מומלצות כלליות, ניתן לקרוא את ההנחיות לעיצוב AR שפרסמנו לאחרונה.
במיוחד, כשמעצבים חוויות AR מבוססות-אינטרנט, רצוי להשתמש במסך מלא (כלומר, לעבור למסך מלא בדומה לאופן שבו נגני וידאו עוברים למסך מלא בנייד) בעת שימוש ב-AR. כך המשתמשים לא יכולים לגלול בתצוגה או להסיח את דעתם של אלמנטים אחרים בדף האינטרנט. המעבר ל-AR צריך להיות חלק וברור, כך שתצוגת המצלמה לפני הכניסה ל-AR (למשל, ציור של רשת). מה שחשוב לציין לגבי AR מבוסס-אינטרנט הוא שבניגוד למודעות מותאמות, למפתחים אין גישה לפריים של המצלמה, להערכת התאורה, לעוגנים או למישורים (עדיין), ולכן חשוב שהמעצבים והמפתחים יזכרו את המגבלות האלה כשהם מתכננים חוויית AR מבוססת-אינטרנט.
נוסף על כך, בגלל מגוון המכשירים שבהם משתמשים לחוויית השימוש באינטרנט, חשוב לבצע אופטימיזציה של הביצועים כדי ליצור את חוויית המשתמש הטובה ביותר. לכן: מספר הפוליגונים צריך להיות נמוך, נסו להתרחק עם כמה שפחות תאורה, לחשב מראש את הצלליות אם אפשר ולצמצם את מספר הקריאות לציור. כשמציגים טקסט ב-AR, צריך להשתמש בשיטות מודרניות (כלומר, מבוססות על שדה מרחק חתום) כדי לעבד טקסט כדי לוודא שהטקסט ברור וקריא מכל המרחקים והזוויות. כשאתם מציבים הערות, חשוב להתייחס למבט של המשתמש כקלט נוסף ולהציג הערות רק כשהן רלוונטיות (כלומר, הערות המבוססות על קרבה שמופיעות כשהמשתמש מתמקד באזור עניין מסוים).
לבסוף, מכיוון שהתוכן הזה מבוסס על אינטרנט, חשוב ליישם גם שיטות מומלצות כלליות לעיצוב עבור האינטרנט. ודאו שהאתר מספק חוויה טובה במכשירים שונים (מחשבים, טאבלטים, מכשירים ניידים, אוזניות וכו') – תמיכה בשיפור הדרגתי פירושה גם עיצוב למכשירים שלא תומכים ב-AR (כלומר, להציג צופה במודלים תלת-ממדיים במכשירים שהם לא AR).
אם אתם רוצים לפתח חוויות AR מבוססות-אינטרנט משלכם, יש לנו פוסט נלווה שבו מוסבר איך להתחיל בעצמכם לפתח AR באינטרנט. (תוכלו גם לבדוק את המקור של ההדגמה של Chat). WebXR Device API נמצא כרגע בפיתוח ונשמח לקבל משוב כדי שנוכל לוודא שהוא מאפשר את כל סוגי האפליקציות והתרחישים לדוגמה, לכן אתם מוזמנים לעבור ל-GitHub ולהצטרף לשיחה.