הוספת מודלים תלת-ממדיים לאינטרנט באמצעות התג <model-viewer>

כיום, אנשים רבים נושאים בכיס מכשירים עם יכולות של מציאות רבודה (AR) ומציאות מדומה (VR). אנחנו משתפים אחד עם השני יותר ויותר תוכן תלת-ממדי במכשירים האלה. בשיעור ה-Lab הזה, תלמדו איך להשתמש ברכיב אינטרנט שנקרא <model-viewer> כדי להוסיף תוכן תלת-ממדי לאתר או ל-Progressive Web App‏ (PWA) בקלות כמו שמוסיפים תמונה באמצעות HTML.

מה תפַתחו

אתר שמכיל מודל תלת-ממדי אינטראקטיבי עם אפשרות להצגת הולוגרמות ב-AR

מה תלמדו

  • איך מטמיעים את רכיב האינטרנט <model-viewer> באתר
  • איך משתמשים ב-<model-viewer> כדי להציג מודל תלת-ממדי בפריסת אינטרנט רגילה
  • איך מתאימים אישית את <model-viewer> כדי להפוך את המצגת למעניינת יותר

מה תצטרכו

  • דפדפן אינטרנט. אנחנו ממליצים על Chrome, אבל כל דפדפן מתקדם (Firefox, ‏ Safari, ‏ Edge) יתאים.
  • ‫Node.js וכלי לעריכת טקסט, או גישה ל-Glitch.
  • ידע בסיסי ב-HTML, ב-CSS, ב-JavaScript ובכלי הפיתוח ל-Chrome.

ה-Codelab הזה מתמקד ב-<model-viewer> ובמודלים תלת-ממדיים. מושגים ובלוקים של קוד שלא רלוונטיים מוצגים בקצרה, ואתם יכולים פשוט להעתיק ולהדביק אותם.

אפשרות 1 – Glitch

אתם יכולים להשתמש בכלי אונליין לעריכת קוד כמו Glitch כדי לארח את הפרויקט ולראות את השינויים.

כדי להתחיל להשתמש ב-Glitch, לוחצים על הכפתור הבא:

פתיחת סביבת Glitch שנטענה מראש

מכאן ואילך, תוכלו להשתמש בעורך הקוד ב-Glitch כדי לשנות את הקבצים, וכשתהיו מוכנים, תוכלו להתחיל להציג את האפליקציה באמצעות הלחצן Show Live (הצגה פעילה). נסו עכשיו, ואתם אמורים לראות את הדף הבא:

אפשרות 2 – שרת מקומי

שרת מקומי יאפשר לכם להשתמש בעורך הקוד המועדף עליכם.

התקנת השרת

אנחנו צריכים דרך להציג דפי אינטרנט מקומיים. דרך פשוטה היא באמצעות Node.js ו-serve, שרת פשוט של תוכן סטטי.

הוראות להתקנה במערכת ההפעלה מופיעות באתר של Node.js. אחרי שמתקינים את Node.js, מריצים את הפקודה הבאה כדי להתקין את serve:

npm install -g serve

הורדת הקוד

אפשר להוריד תבנית התחלתית, יחד עם כל הנכסים לדוגמה. לוחצים על הקישור הבא ומחלצים את התוכן לספרייה שרוצים שהפרויקט יהיה בה:

הורדת קוד המקור

אפשר גם להשתמש ב-git כדי לשכפל את המאגר:

git clone https://github.com/googlecodelabs/model-viewer-codelab.git

הפעלת השרת

מתוך ספריית התבניות שחולצה למעלה (או מתוך הספרייה המשוכפלת, אם השתמשתם ב-git), צריך להריץ את הפקודה serve כדי להפעיל שרת אינטרנט:

נכנסים לכתובת הזו (בצילום המסך שלמעלה, זו הכתובת http://localhost:5000, אבל היא עשויה להיות שונה במחשב שלכם) כדי לראות נקודת התחלה פשוטה מאוד:

נתחיל בלערוך את קובץ index.html, דרך עורך האינטרנט של Glitch או דרך עורך הקוד המועדף עליכם – אם אתם משתמשים בשרת המקומי.

הוספת הספרייה <model-viewer>

כדי להשתמש ב-<model-viewer>, צריך לכלול קבוצה של קובצי JavaScript.

בקטע הבא מוסיפים את הספרייה <model-viewer> לדף. מדביקים את הקוד הבא בסוף של <body>.

<!-- 💁 Include both scripts below to support all browsers! -->

<!-- Loads <model-viewer> for modern browsers: -->
<script type="module"
    src="https://unpkg.com/@google/model-viewer/dist/model-viewer.js">
</script>

<!-- Loads <model-viewer> for old browsers like IE11: -->
<script nomodule
    src="https://unpkg.com/@google/model-viewer/dist/model-viewer-legacy.js">
</script>

הוספנו רק ספריות, בלי לשנות את התוכן – אם תרעננו את הדף, תראו את אותו תוכן. אם פותחים את המסוף של כלי הפיתוח, יכול להיות שיוצגו אזהרות לגבי ממשקי API חסרים של WebXR, אבל זה צפוי עד שה-API הזה יושק באופן מלא.

שיפור התאימות

הספרייה <model-viewer> מגיעה מראש עם תמיכה בהרבה דפדפנים מודרניים. עם זאת, אם רוצים להגדיל את מספר הדפדפנים שהדף יכול לתמוך בהם, אפשר לכלול פוליפילים נוספים.

בהמשך מופיעה קבוצת ההמלצות המלאה שלנו. הן יעזרו לכם לספק חוויה נהדרת בכל הדפדפנים המודרניים. ניתן למצוא מידע נוסף במאמר בנושא polyfilsl של <model-viewer>.

הדביקו את הקוד הבא ב-<head>.

<!-- The following libraries and polyfills are recommended to maximize browser support -->
<!-- NOTE: you must adjust the paths as appropriate for your project -->
    
<!-- 🚨 REQUIRED: Web Components polyfill to support Edge and Firefox < 63 -->
<script src="https://unpkg.com/@webcomponents/webcomponentsjs@2.1.3/webcomponents-loader.js"></script>

<!-- 💁 OPTIONAL: Intersection Observer polyfill for better performance in Safari and IE11 -->
<script src="https://unpkg.com/intersection-observer@0.5.1/intersection-observer.js"></script>

<!-- 💁 OPTIONAL: Resize Observer polyfill improves resize behavior in non-Chrome browsers -->
<script src="https://unpkg.com/resize-observer-polyfill@1.5.1/dist/ResizeObserver.js"></script>

<!-- 💁 OPTIONAL: Fullscreen polyfill is required for experimental AR features in Canary -->
<!--<script src="https://unpkg.com/fullscreen-polyfill@1.0.2/dist/fullscreen.polyfill.js"></script>-->

<!-- 💁 OPTIONAL: Include prismatic.js for Magic Leap support -->
<!--<script src="https://unpkg.com/@magicleap/prismatic@0.18.2/prismatic.min.js"></script>-->

הוספת <model-viewer>

עכשיו נוסיף את התג <model-viewer> לדף כדי שנוכל לראות תלת-ממד. מחליפים את רכיב <p> הקיים בקוד הבא:

<model-viewer src="third_party/Astronaut/Astronaut.glb"
              alt="A 3D model of an astronaut">
</model-viewer>

יש רק שני מאפיינים שצריך לציין כאן:

  • במאפיין src מציינים מאיפה לטעון את המודל התלת-ממדי. בדוגמה הזו השתמשנו במודל Astronaut של Poly, שזמין ברישיון CC-BY.
  • המאפיין alt מכיל תיאור טקסט חלופי של המודל לצורכי נגישות.

אפשר לראות ששני המאפיינים האלה דומים מאוד למאפיינים של התג img.

אחרי שתטענו מחדש, יראו את האסטרונאוט:

יפה מאוד. יש לכם מודל תלת-ממדי באינטרנט.


בשלבים הבאים נתנסה באינטראקטיביות ובתנועה נוספות, נשנה את המראה של הרכיב וננסה להשתמש במציאות רבודה.

בואו נוסיף קצת אינטראקטיביות למודל. כברירת מחדל, המודל יסתובב כדי לתת למשתמשים רמז לכך שהמודל אינטראקטיבי (וגם כדי להציג אותו לראווה), ואז נפעיל את האפשרות להשתמש בפקדים, כדי שהמשתמשים יוכלו להזיז את המודל בעצמם באמצעות העכבר או באמצעות מגע.

כדי לעשות זאת, פשוט מוסיפים את המאפיינים auto-rotate ו-camera-controls לרכיב <model-viewer>. 

<model-viewer src="third_party/Astronaut/Astronaut.glb"
              auto-rotate camera-controls
              alt="A 3D model of an astronaut">
</model-viewer>

כשתרעננו את הדף, האסטרונאוט יסתובב לאט. אם תנסו לגרור את המודל (בכך שתלחצו על העכבר ותזיזו אותו, או במכשיר עם מסך מגע, תגררו את האצבע), המודל יסתובב.

השילוב של התכונות האלה נותן למשתמשים רמז שמדובר ביותר מתמונה סטטית, ויוצר תחושה של אינטראקטיביות שגורמת להם להרגיש מעורבים (וגם מאפשרת להם לראות את החלק האחורי של המודל).

עכשיו כשכבר יש לנו תנועה, נשנה את המראה כדי שהמודל יהיה מושך במיוחד.

עדכון המודל

חלק מהשינויים האלה (במיוחד שינויים בתאורה) ייראו הכי טוב עם מודלים מסוימים. קודם כול, נעדכן את המאפיין src כך שיצביע על מודל חדש: third_party/DamagedHelmet/DamagedHelmet.gltf (שפורסם ברישיון Creative Commons Attribution-NonCommercial ב-Sketchfab). המקור של הרכיב כולו צריך להיראות עכשיו כך:

<model-viewer src="third_party/DamagedHelmet/DamagedHelmet.gltf"
              auto-rotate camera-controls
              alt="A 3D model of a damaged sci-fi helmet">
</model-viewer>

המודל הזה יציג לראווה חלק מהשינויים שאנחנו עומדים לבצע.

שינוי צבע הרקע

קודם כל, נשנה את צבע הרקע כדי שהמודל יבלוט על רקע הדף. הוסיפו את המאפיין הבא לתג <model-viewer>:

background-color="#70BCD1"

הגדרת מפת הסביבה

מפות סביבה משמשות כדי לספק סצנת מסגרת שמשתקפת מהמודל וכדי לציין את תצורת התאורה. תאורת ברירת המחדל היא מצוינת (ותואמת לתאורה של Scene Viewer של ARCore), אבל לפעמים יכול להיות שיש לכם סביבה מותאמת אישית או שאתם צריכים תאורה ספציפית לתוצאות שאתם מנסים להשיג. נציין את מאפיין תמונת הסביבה (studio_small_07_1k.hdr הוא מ-hdrihaven.com).

environment-image="third_party/hdrihaven/studio_small_07_1k.hdr"

הוספת צל

אם האובייקט מטיל צל, זה מוסיף עומק לסצנה. אם מוסיפים המאפיין הבא לרכיב <model-viewer>, יוטל צל:

shadow-intensity="1"

שינוי עוצמת התאורה

המודל קצת חשוך, כדאי להגביר קצת את התאורה כדי שנוכל לראות יותר פרטים. אפשר לשנות בנפרד את תאורת הבמה שמוגדרת כברירת מחדל ואת התאורה ממפת הסביבה שהוספנו. מוסיפים את הפריט הבא:

stage-light-intensity="3" environment-intensity="2"

כל אחד מהשינויים האלה היה קטן יחסית, אבל עכשיו המודל נראה הרבה יותר טוב.

בשלב הבא נבחן כמה מצבי תצוגה חלופיים.

יותר ויותר מכשירים כוללים מציאות רבודה (AR). קשה להפעיל חלק מהמצבים האלה או שנדרש קוד מיוחד, אבל רכיב ה-<model-viewer> יכול לטפל בכל המורכבות הזו בשבילכם.

‫Scene Viewer של ARCore

במכשירים נתמכים, רכיב ה-<model-viewer> יכול להפעיל את Scene Viewer של ARCore. מוסיפים את המאפיין ar לרכיב <model-viewer>. כן, זה כל מה שצריך לעשות.

<model-viewer src="third_party/DamagedHelmet/DamagedHelmet.gltf"
              ar
              auto-rotate camera-controls
              background-color="#70BCD1"
              shadow-intensity="1"
              alt="A 3D model of a damaged sci-fi helmet">
</model-viewer>

אם תצפו בזה במכשיר נתמך עם ARCore עדכני, תראו סמל נוסף (כמו בתמונה שלמטה). לחצו על הסמל, והמודל שלכם ייפתח ב-Scene Explorer.

מכשירים אחרים – iOS Quick Look‏, Magic Leap‏, WebXR

במכשירים רבים אחרים צריך לעשות קצת יותר עבודה.

ב-iOS, המאפיין ios-src מאפשר לציין גרסת USDZ נוספת של המודל התלת-ממדי (שנדרשת ב-iOS). כשמספקים את המאפיין הזה, הסמל הרגיל של AR Quick Look יופיע על גבי המודל במכשירי iOS נתמכים. מידע נוסף על USDZ מופיע במאמרי העזרה למפתחים של Apple.

במכשירי Magic Leap, המאפיין magic-leap מפעיל את התמיכה ב-AR. שימו לב שצריך לכלול גם את ספריית prismatic.js (היא כלולה, אבל זה מסומן כהערה, ב-polyfills האופציונליים), והמודל התלת-ממדי צריך להיות קובץ ‎ .glb (ולא ‎.gltf).

<script src="https://unpkg.com/@magicleap/prismatic@0.18.2/prismatic.min.js"></script>

אפשר לשלוט בזווית ובמיקום הראשוניים של המצלמה. האפשרות הזו מאפשרת לנו להציג למשתמשים תצוגת ברירת מחדל טובה יותר של הקסדה. הוסיפו את קטע הקוד הבא לתג <model-viewer>:

camera-orbit="-20deg 75deg 2m"

כמובן שאפשר להשתמש במודלים האלה עם התוכן האחר שלכם, כולל בדפים רספונסיביים. יצירת דף אינטרנט רספונסיבי לא נדונה במסגרת ה-codelab הזה, אבל אפשר לעיין במאמר על עקרונות הבסיס של עיצוב אתר רספונסיבי כדי לקבל מידע נוסף.

הוספנו במאגר שלנו דף לדוגמה. מומלץ לצפות בסרטון responsive.html במסך רחב (למשל, במחשב):

אותו דף, באזור תצוגה צר (למשל במכשיר נייד):

הטמעתם תוכן תלת-ממדי באתר, כל הכבוד.

מה השלב הבא?

יש עוד הרבה אפשרויות הגדרה. מידע נוסף ניתן למצוא במסמכי העזרה באינטרנט או בקוד.

אחרי שמזהים את המודלים, כדאי לחשוב על השלבים הבאים:

  • חלק מהמודלים יכולים להיות גדולים מאוד. במקרים כאלה, ב-<model-viewer> יש כמה שיטות שעדיין מאפשרות לספק חוויה מצוינת. מידע נוסף ניתן למצוא בדף העזרה בנושא טעינה מדורגת.
  • מודלים מונפשים יכולים להיות ממש כיפיים. מידע נוסף על הפעלה (ועל מעבר בין) אנימציות שמוגדרות במודלים מופיע בדף אנימציות.
  • וזה עדיין האינטרנט – אפשר להטמיע מודלים בדפי האינטרנט כדי להעשיר את התוכן.

תהליך הפיתוח שלנו פתוח ב-GitHub. חשוב לנו לשמוע מה דעתך.