WebGL: האינטרנט בתלת מימד - ברשת - הארץ
ניצוצות ברשת

WebGL: האינטרנט בתלת מימד

עוד אחד מהחידושים שמביא בכנפיו HTML5: יכולות אנימציה בתלת ממד היישר מתוך הדפדפן. וכמובן שאין צורך בפלאש

שתפו כתבה במיילשליחת הכתבה באימייל
יונית רושו

עיצוב וטכנולוגיה משולבים יותר מתמיד. הטכנולוגיה הבאה: תלת מימד עם webGL

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

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

WebGL מאפשרת לצייר צורות בתלת מימד על ידי שימוש בפקודות בשפת javascript. שפת JavaScript היא אחת משפות צד הלקוח, מאחר והיא נרשמת בתוך מסמך html ומתבצעת על גבי מחשב הגולש. בעזרת הפניה לאלמנט הקנבס, שהוא כמו במה טכנולוגית לציורי גרפיקה בעמוד האינטרנט, ושימוש ב- API של WebGL בקוד ה- JavaScript, ניתן לגשת ישירות לרכיבי הגרפיקה בחומרה של המחשב ולהגיע לתוצאות גרפיות משוכללות, מקצועיות ומדהימות. מאחר וזהו סטנדרט אינטרנטי, אין צורך להתקין רכיבים כפלאש כדי לצפות בתוצר התלת מימדי.

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

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


המדוזה השוחה
מדוזה המצוירת בקוד javascript בתוך הקנבס, על ידי שימוש ב- webGL שוחה למעלה ולמטה, נפתחת ונסגרת, כשקרני השמש נראות מלטפות אותה מלמעלה:


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

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

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

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

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

לחצו לטורים קודמים בסדרה

יוצאים מהקופסה, נכנסים לעיגול

שחור בולט: אתרים מהצד האחר

טופס שעושה חשק? יש דבר כזה

7 הטרנדים שיעצבו את הרשת ב-2012

7 הטרנדים שכבשו את הרשת ב-2011

אמנות הגלילה: לצלול בסטייל לתוך הרשת

המלך מת, יחי המלך החדש

תגובות

הזינו שם שיוצג כמחבר התגובה
בשליחת תגובה זו הנני מצהיר שהינני מסכים/ה עם תנאי השימוש של אתר הארץ