
Movi.Kanti.Revo הוא ניסוי חושי חדש ב-Chrome שנוצר על ידי Cirque du Soleil ופותח על ידי Subatomic Systems, שמביא את הפלא של Cirque du Soleil לאינטרנט באמצעות טכנולוגיות אינטרנט מודרניות.
בניית העולם התלת-ממדי
הניסוי נוצר באמצעות 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); % }
}
הצגה חזותית של השלב
במסגרת הבמה, יש שבעה רכיבים בסצנה האחרונה. מקדימה לאחור, הם כוללים את רקע השמיים, שכבת ערפל, הדלתות, המים, ההשתקפויות, שכבת ערפל נוספת ולבסוף הצוקים שבחזית.
כל פריט ממוקם ב-stage באמצעות מאפיין CSS מסוג transform: translate3d(x, y, z)
שמציין את המיקום שלו במרחב תלת-ממדי. השתמשנו בערך z באופן דומה לשימוש ב-z-index
, אבל באמצעות המאפיין translate3d
אפשר גם לציין יחידה עם הערך.

באיור 1 מוצגת התרחיש בזום החוצה ובסיבוב של כמעט 90 מעלות, כדי שתוכלו לראות איך כל אחד מהאלמנטים השונים של התפאורה ממוקם על הבמה. בחלק האחורי (הכי רחוק שמאלה) אפשר לראות את הרקע, הערפל, הדלתות, המים ולבסוף הצוקים.
הצבת הרקע ב-Stage
נתחיל בתמונת הרקע. מכיוון שהיא נמצאת הרחק ביותר ברקע, החלנו טרנספורמציה של -990px על ציר 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
כדי למקם את המים בתוכנית, אנחנו מחילים גם סיבוב של 60 מעלות (rotateX(60deg)
) בציר x (אופקי) כדי שהמים ייראו שטוחים ועם מרקם.
תזוזה דומה נוספה לשתקוף הדלת ולערפל המשני כדי שהם יופיעו במישור הנכון (ראו איור 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>; % }
}

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