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