AR, VR ומודל לתלת-ממד ב-HTML

תחוב איפשהו ב הערות גרסה של Safari Technology Preview 161 היא שורה תמימה לכאורה לגבי תמיכה ברכיב ותכונה HTML חדשים:

תמיכה נוספת עבור <model src> וכבוד <source type> תכונות ([מוגן בדוא"ל])

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

• הממ, נראה כמו איזה ניסוי קנייני.
• וואו, דבר חדש באמת!

האמת היא שזה בערך שלושתם.

זה מושג מתפתח

כמו ב, הדבר הראשון שנשמע קצת רשמי שמצאתי בו <model> לא היה במפרט W3C אלא ב המאגר של WebKit למסבירים. כל מה שכתוב ב-README הוא פתק ענק מ-2021 ש-"The <model> האלמנט עבר ל-Immersive Web CG." עמדתי לקפוץ אבל העין שלי צדה את זה HistoryAndEvolution.md קובץ שיש לו סקירה יפה של ההקשר המוקדם על <model> מוּשָׂג:

אל האני <model> אלמנט נולד מתוך רצון לעשות את הצעד הבא ולשפר את חווית האינטגרציה של Safari עם iOS AR מבט מהיר תכונה.

הייתי צריך להסתכל על דף הפתיחה של אפל עבור AR Quick Look. אתה מכיר את התכונה החדשה שיש לחנויות מסוימות שבהן אתה יכול להעביר עיבוד תלת מימדי של מוצר בבית שלך באמצעות מצלמת הטלפון שלך? זה מסוג הדברים שאנחנו מדברים עליהם, ו אפל מקשרת מקרה בוחן נחמד ממוזיאון המטרופוליטן לאמנות.

כפי שאני מבין את זה מההקשר המצומצם הזה:

• זרוק א <model> רכיב במסמך.
• הוסף קובץ מקור חיצוני, למשל <model src="assets/example.usdz">.

ההצעה המקורית היא מקבוצת ועדת האינטרנט המטמעת

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

HTML מאפשר הצגת סוגי מדיה רבים באמצעות אלמנטים כגון <img>, <picture>, או <video>, אך הוא אינו מספק דרך הצהרתית להצגת תוכן תלת-ממדי ישירות. הטמעת תוכן תלת-ממדי בתוך דף מסורבלת יחסית ומסתמכת על סקריפט של <canvas> אֵלֵמֶנט. אנו מאמינים שהגיע הזמן להעמיד מודלים תלת-ממדיים על בסיס שווה לסוגי מדיה אחרים, שכבר נתמכים.

[...]

ה- HTML <model> אלמנט מטרתו לאפשר לאתר להטמיע מודלים תלת מימדיים אינטראקטיביים בצורה נוחה כמו כל מדיה ויזואלית אחרת. מודלים צפויים להיווצר על ידי כלי כתיבה תלת מימדיים או ליצור באופן דינמי, אך שימשו כמשאב עצמאי על ידי השרת.

הדוגמה הבסיסית משלבת את זה יחד. זה באמת מרגיש כמו ה <video> or <picture> אלמנטים:

<model style="width: 400px; height: 300px"> <source src="assets/example.usdz" type="model/vnd.usdz+zip"> <source src="assets/example.glb" type="model/gltf-binary">
</model>

.usdz? .glb? לא מסוג הקבצים שחוצים בדרך כלל את השולחן שלי. אני מניח שאצטרך לרענן את אלה ואת כל סוגי הקבצים האחרים <model> עשוי לתמוך. שוב, כל זה הוא רק ההצעה המקורית.

טיוטת ההצעה עדיין לא נמחקה לגמרי

אבל זה כן לספק מתאר יפה לאן דברים יכולים ללכת:

• הוספת דגם למסמך
• הפעלת אינטראקטיביות
• תמיכה במספר פורמטים
• מתן תוכן חלופי
• הופך אותו לנגיש

יש הרבה מה להבין. רוב מה שיש הם נושאים מתועדים שצריך לטפל בהם. עם זאת, זה שופך יותר אור <model> כמו תכונות מוצעות שגורמות לו להרגיש אחיד יותר כמו <video> כמו autoplay, controls, loop, muted, poster, וכו '

זה חוזר עוד יותר אחורה

האזכור המוקדם ביותר של דוגמנות תלת מימד שמצאתי היה הפוסט של קית' קלארק משנת 2018 שבו הוא יוצר אב טיפוס של אלמנט מותאם אישית שנקרא <x-model>. הוא מתאר את זה כ"מציין מיקום המספק גישה ל-DOM ול-CSSOM" שבו הטעינה והעיבוד מתבצעים ב three.js.

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

אולי זה רק ניסוי?

כלומר, מפרט הטיוטה לא הושלם. נראה שאפל מוכנה לשחק בכדור הודות להכרזה של Safari TP 161. זה הגיוני לגמרי בהתחשב כמה שורית אפל ב-AR כשלם. (אפל משקפייםמישהו?)

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

כל אלה הם רק ההערות שלי מהניסיון לגרש הכל. חייב להיות בו הרבה יותר ניואנסים מהמעט שאני יודע עליו עד כה. אני בטוח שמישהו חכם יותר יכול לקשור קשת מסודרת יותר <model> בהערות. 😉

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

• הפצת תוכן ויחסי ציבור מופעל על ידי SEO. קבל הגברה היום.
• Platoblockchain. Web3 Metaverse Intelligence. ידע מוגבר. גישה כאן.
• מקור: https://css-tricks.com/ar-vr-and-a-model-for-3d-in-html/