חדש: 1.1

מודלים תלת-ממדיים לדף האינטרנט שלכם, ממש כמו כתיבת קוד HTML.

Joe Medley

Rob Kochman

מודלים תלת-ממדיים רלוונטיים יותר מתמיד. הקמעונאים מביאים את הקניות בחנות הפיזית של הלקוחות בתים. במוזיאונים יוצרים מודלים בתלת-ממד של החפצים שלהם זמינים לכולם באינטרנט. לצערי, קשה להוסיף תלת ממד לאתר באופן שמספק חוויית משתמש מעולה, ידע על טכנולוגיות תלת-ממד או שימוש באירוח תוכן בתלת-ממד באתר של צד שלישי . רכיב האינטרנט <model-viewer>, הושק מוקדם 2019. השאיפה היא להפוך את השימוש במודלים תלת-ממדיים באינטרנט לקל יותר כמה שורות של HTML. מאז, הצוות פועל כדי לטפל משוב ובקשות מהקהילה. התוצאה של העבודה הזו הייתה גרסה 1.0 של <model-viewer> שהושקה מוקדם יותר השנה. אנחנו מכריזים עכשיו ההשקה של <model-viewer> 1.1. אפשר לקרוא את הגרסה הערות ב-GitHub.

מה חדש מאז השנה שעברה?

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

מציאות רבודה

ממש טוב לראות מודל תלת-ממדי על בד ציור ריק, אבל גם אם אתם יכולים להציג אותו טוב עוד יותר. ל-Chrome בתלת-ממד וב-AR בתוך הדפדפן ב-Android יש תמיכה בפיצ'רים מתקדמים Reality באמצעות WebXR .

כשהוא יהיה מוכן אפשר יהיה להשתמש בו על ידי הוספת המאפיין ar תג <model-viewer>. מאפיינים אחרים מאפשרים להתאים אישית את WebXR AR של חוויית המשתמש, כפי שמוצג בדוגמה של WebXR בפלטפורמת modelviewer.dev. דוגמת הקוד למטה תוכלו לראות איך זה עשוי להיראות.

<model-viewer src="Chair.glb"
  ar ar-scale="auto"
  camera-controls
  alt="A 3D model of an office chair.">
</model-viewer>

הוא נראה בערך כמו הסרטון המוטמע שמוצג מתחת לכותרת הזו.

אמצעי בקרה למצלמה

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

הערות

אפשר גם להוסיף הערות למודלים באמצעות HTML ו-CSS. לעיתים קרובות היכולת הזו משמש ל"קובץ מצורף" תוויות לחלקים של המודל, באופן שזז עם המודל כמו שעברו מניפולציה. אפשר להתאים אישית את ההערות, כולל המראה שלהם והמידה שבה הם מוסתרים את המודל. ההערות פועלות גם ב-AR.

<style>
  button{
    display: block;
    width: 6px;
    height: 6px;
    border-radius: 3px;
    border: 3px solid blue;
    background-color: blue;
    box-sizing: border-box;
  }

  #annotation{
    background-color: #dddddd;
    position: absolute;
    transform: translate(10px, 10px);
    border-radius: 10px;
    padding: 10px;
  }
</style>
<model-viewer src="https://modelviewer.dev/assets/ShopifyModels/ToyTrain.glb" alt="A 3D model of a Toy Train" camera-controls>
  <button slot="hotspot-hand" data-position="-0.023 0.0594 0.0714" data-normal="-0.3792 0.0004 0.9253">
    <div id="annotation">Whistle</div>
  </button>
</model-viewer>

לעיון במסמכי התיעוד בנושא ההערות למידע נוסף.

עריכה

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

שיפורי עיבוד וביצועים

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

<model-viewer camera-controls
              skybox-image="spruit_sunrise_1k_HDR.hdr"
              alt="A 3D model of a well-worn  helmet"
              src="DamagedHelmet.glb"></model-viewer>

יציבות

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

מה השלב הבא?

גרסה 1.0 של <model-viewer> כוללת את היכולות המבוקשות ביותר, אבל עדיין לא מוכן. יתווספו עוד תכונות, כמו גם שיפורים ב- ביצועים, יציבות, תיעוד וכלים. אם יש לכם הצעות, לדווח על בעיה ב-GitHub. וגם, PR תמיד יתקבלו בברכה. אפשר לשמור על קשר על ידי מעקב אחר <model-viewer> ב- ב-Twitter ולקרוא את הצ'אט של הקהילה על Spectrum.