Movi Kanti Revo - חלק 1 – בניית העולם בתלת-ממד

הלוגו של Movi Kanti Revo.

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: הבמה מצדדים
איור 1: הבמה מהצד.

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

הצבת הרקע ב-Stage

נתחיל בתמונת הרקע. מכיוון שהיא נמצאת הרחק ביותר ברקע, החלנו טרנספורמציה של -990px על ציר Z כדי לדחוף אותה לאחור בפרספקטיבה שלנו (ראו איור 2).

הבמה, עם רקע בלבד שממוקם ב--990px
איור 2: הבמה, עם רקע שממוקם רק ב-990px

כשהוא חוזר לאחור במרחב, לפי חוקי הפיזיקה הוא צריך להיות קטן יותר, ולכן צריך לשנות את הגודל שלו באמצעות המאפיין 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>; % }
}
איור 3: הבמה, עם הרקע במיקום ובגודל הרצוי.
איור 3: הבמה, שבה רק הרקע ממוקם ומשונה לפי קנה מידה.

הערפל, הדלתות והצוקים באותו אופן, כל אחד באמצעות החלת translate3d עם מיקום z וגורם קנה מידה מתאימים (ראו איור 4). שימו לב לאופן שבו הערפל נערם מאחורי הדלתות ומאחורי הצוקים.

איור 4: הבמה, עם ערפל, דלתות וצוק שמיקומם וגודלם מוגדרים
איור 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>; % }
}
איור 5: הבמה, עם כל האלמנטים במיקום ובגודל הרצוי.
איור 5: הבמה, עם כל האובייקטים במיקום ובגודל הרצוי.
>

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

מקורות מידע נוספים