גלובוס אינטראקטיבי עם שירותי הצללה של CSS ומפות Google

Paul Irish

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

בגרסה האחרונה של Canary ב-Google Chrome נוספה תמיכה ב-CSS shaders, ולכן החלטתי להתנסות בהם.

בניסוי הזה השתמשתי ב-vertex shader (spherify.vs) וב-fragment shader (spherify.fs) בהתאמה אישית כדי ליצור גלובוס עם מפות Google.

<iframe
  class="globe"
  src="https://maps.google.com/?ie=UTF8&amp;amp;ll=14.597042,-15.625&amp;amp;spn=158.47027,316.054688&amp;amp;t=h&amp;amp;z=2&amp;amp;output=embed"
  scrolling="no"></iframe>

.globe {
  width: 550px;
  height: 550px;
  border: 0;
  -webkit-filter: contrast(1.4) custom(url(shaders/spherify.vs) mix(url(shaders/spherify.fs) multiply source-atop),
    50 50 border-box,
    amount 1,
    sphereRadius 0.5,
    sphereAxis -0.41 1 0.19,
    sphereRotation 43.5,
    ambientLight 0.15,
    lightPosition 1 0.87 0.25,
    lightColor 1 1 1 1,
    transform perspective(500));
}

כאן אנחנו מחילים שדה צבעים של קודקוד (spherify.vs) שיפעל על רשת עם 50 שורות ו-50 עמודות (50 50 border-box). אפשר לקרוא את המקור של שדה הצבעים של קודקוד: spherify.vs. הוא נכתב ב-GLSL, אבל סביר להניח שתוכלו לעקוב אחריו.

הפונקציה mix() מספקת פונקציות בסיסיות לטיפול בצבעים, כמו שילוב (blending) ושיוך אלפא (alpha compositing) ב-fragment shader.

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

תהנו מהדגמה!

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

אם מופיעה רק מפה רגילה של מפות Google, אפשר להפעיל את התכונה לפי ההוראות שבהמשך.

תמיכה בדפדפנים: עיבוד גרפי של CSS

התכונה הזו היא החדשנית ביותר כרגע, ולכן היא זמינה רק ב-Google Chrome Canary וב-WebKit nightly העדכניים ביותר. כדי ליהנות מהחוויה המלאה, תצטרכו להזיז כמה לחצנים.

השלבים ב-Chrome Canary

  1. מקלידים about:flags בסרגל הניווט של הדפדפן.
  2. מחפשים את האפשרות 'הפעלת Shaders של CSS'. הפעלה
  3. מפעילים מחדש את הדפדפן.

שלבים ל-WebKit nightly

  1. מורידים ומתקינים את WebKit nightly ל-Mac OSX
  2. פותחים את חלונית ההעדפות של הדפדפן. עוברים לכרטיסייה Advanced ומסמנים את התיבה כדי להציג את התפריט Develop > Enable WebGL בסרגל התפריטים.
  3. בסרגל התפריטים של הדפדפן, בוחרים באפשרות פיתוח.