Movi.Kanti.Revo הוא ניסוי חדש ב-Chrome מבחינה חושית שיצרנו סירק דו סוליי ופיתח על ידי Subatomic Systems, שמביא את הפלא של סירק דו סוליי לאינטרנט באמצעות טכנולוגיות אינטרנט מודרניות.
בונים עולם תלת-ממדי
הניסוי נוצר באמצעות HTML5 בלבד, והסביבה מבוססת כולה עם תגי עיצוב ו-CSS. בדומה לחלקים מוגדרים על הבמה, div, img, video קטנים ואלמנטים אחרים ממוקמים במרחב תלת-ממדי באמצעות CSS. באמצעות ה-API החדש של getUserMedia, אפשר לקיים אינטראקציה עם הניסוי בדרך חדשה לגמרי, במקום להשתמש במקלדת או בעכבר, ספרייה לזיהוי פנים של JavaScript עוקבת אחרי הראש ומזיזה את הסביבה יחד איתכם.
כל השלבים של האינטרנט
כדי ליצור את הניסוי הזה, כדאי לדמיין את הדפדפן כבמה, ואת הרכיבים כמו <div>, תמונות, סרטונים ואלמנטים אחרים, כפריטים מוגדרים שממוקמים במרחב התלת-ממדי באמצעות CSS. כל רכיב או קבוצה ממוקמים על במה על ידי החלת טרנספורמציה תלת-ממדית. אם אתם לא מכירים את הטרנספורמציה translate3d, תצטרכו להזין 3 פרמטרים: X, Y ו-Z. X מזיז את הרכיב לאורך קו אופקי, Y מזיז את הרכיב מעלה ומטה, ו-Z מזיז את הרכיב קרוב או רחוק יותר. לדוגמה, החלה של transform: translate3d(100px, -200px, 300px) תזיז את הרכיב 100 פיקסלים ימינה, 200 פיקסלים למטה ו-300 פיקסלים יותר קרוב לתצוגה.
בניית האודיטוריום
בואו נראה את התרחיש האחרון ונראה איך הוא מורכב. כל הסצנות מחולקות לשלושה קונטיינרים ראשיים: הקונטיינר העולמי, הקונטיינר של פרספקטיבה והבמה. הקונטיינר העולמי מגדיר ביעילות את מצלמת הצופים, ומשתמש במאפיין ה-CSS perspective כדי לציין לדפדפן מאיפה הצופה יצפה ברכיב. #perspective-container משמש לשינוי נקודת המבט שלנו על ידי החלת שינויי תלת-ממד. לבסוף, השלב מכיל את החלקים בפועל
שיהיו גלויים על המסך.
<div id="world-container">
<div id="perspective-container">
<div id="stage">
</div>
</div>
</div>
#world-container {
perspective: 700px;
overflow: hidden;
}
#perspective-container {
{ % mixin transform-style: preserve-3d; % }
{ % mixin transform-origin: center center; % }
{ % mixin perspective-origin: center center; % }
{ % mixin transform: translate3d(0, 0, 0) rotateX(0deg) rotateY(0deg) rotateZ(0deg); % }
}
הדמיית הבמה
בסצנה הסופית יש שבעה רכיבים בסצנה הסופית. הם כוללים את הרקע של השמיים, שכבת הערפל, את הדלתות, את המים, השתקפויות, שכבת ערפל נוספת ולבסוף את הצוקים שבחזית.
כל פריט מוצב על במה באמצעות מאפיין CSS transform: translate3d(x, y, z) שמציין את המיקום שלו במרחב התלת-ממדי. השתמשנו בערך z באופן דומה לשימוש ב-z-index, אבל עם המאפיין translate3d אנחנו יכולים לספק גם יחידה עם הערך.
באיור 1 מוצגת התצוגה של הסצנה, מקטינה ומסובבת כמעט ב-90 מעלות, כך שאפשר לראות באופן חזותי את האופן שבו כל קבוצה מוצבת בתוך השלב. בחלק האחורי (הכי רחוק משמאל) אפשר לראות את הרקע, את הערפל, את הדלתות, את המים ולבסוף את הצוקים.
התקנת הרקע על במה
נתחיל עם תמונת הרקע. מכיוון שזהו האזור האחורי ביותר, ביצענו טרנספורמציה של -990 פיקסלים על ציר ה-Z כדי לדחוף אותה בחזרה לנקודת המבט שלנו (ראו איור 2).
כדי שהוא יחזור לחלל, לפיזיקה נדרש שהוא יקטן, לכן צריך לשנות את הגודל שלו באמצעות מאפיין scale(3.3) כדי להתאים אותו לאזור התצוגה. כמו כן, צריך ליישר את הקצה העליון עם החלק העליון של אזור התצוגה עם translate3d על ציר ה-Y (ראו איור 3).
.background {
width: 1280px;
height: 800px;
top: 0px;
background-image: url(stars.png);
{ % mixin transform: translate3d(0, 786px, <b>-990px</b>) <b>scale(3.3)</b>; % }
}
הערפל, הדלתות והצוקים באותו אופן, באמצעות החלת translate3d עם מיקום z מתאים וגורם לקביעת קנה מידה מתאים (ראו איור 4). שימו לב איך הערפל מערוב מאחורי הדלתות, ומאחורי הצוקים.
הוספת הים
כדי ליצור סביבה מציאותית ככל האפשר, ידענו שאנחנו לא יכולים פשוט להניח את המים על מישור אנכי, לרוב הדבר לא קיים בעולם האמיתי. בנוסף לשימוש בשיטה translate3d כדי למקם את המים על הבמה, אנחנו מבצעים גם סיבוב של ציר ה-X (אופקי) ב-60 מעלות (rotateX(60deg)) כדי שייראה שטוח עם מרקם.
סיבוב דומה נוסף להשתקפות בדלת ולערפל המשני כדי שהיא תופיע במישור הנכון (איור 5).
.sea {
bottom: 120px;
background-image: url(sea2.png);
width: 1280px;
height: 283px;
{ % mixin transform: translate3d(-100px, 225px, -30px) scale(2.3) <b>rotateX(60deg)</b>; % }
}
כל סצנה נבנתה באופן דומה, האלמנטים הוצגו במרחב התלת-ממדי של במה, ובוצעה טרנספורמציה מתאימה בכל אחת מהן.