מה זה הדמיות אינטראקטיביות ולמה זה העתיד של אתרי האינטרנט?

מאמר מאת מור מזרחי מסטודיו פלא להדמיות אינטראקטיביות

מהו העולם האינטראקטיבי?

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

שלב אחד קדימה יש לנו הדמיות 360 עם מנועים חיצוניים.

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

טכנולוגיה של Web GL

אבל המנוע של sketchfab מוגבל לדברים האלה בלבד. אם רוצים לעשות משהו שונה, להוסיף פונקציונאליות להדמיה, אנחנו צריכים לשלב תכנות. אחת הדרכים לעשות זאת היא באמצעות טכנולוגיה של Web GL.
WebGL הוא ממשק  JavaScriptהמשמש ליצירה והצגה של גרפיקה דו-ממדית ותלת-ממדית אינטראקטיבית בתוך כל דפדפן אינטרנט ללא שימוש בתוספי פלאגין או מנוע חיצוני. יש לו ספריות שונות כמוthree.js, BabylonJS  ועוד.
בדומה ל-sketchfab.com גם פה אנחנו משתמשים באופן ישיר במודל תלת מימדי. רק שכאן המודל מאוחסן בתוך האתר ומאפשר לנו לעשות איתו כמעט כל מה שאנחנו רוצים.
ברגע שאנחנו משלבים ביחד את התלת מימד עם תכנות, נפתח לנו עולם שלם של אפשרויות!

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

מה היתרונות של שימוש בהדמיות אינטראקטיביות באתר?

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

להדמיות נוספות מבית היוצר של מור מזרחי כנסו לקישור https://www.studio-pele.co.il/