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

פול אירלנד
Twitter דף הבית

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

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

בניסוי הזה השתמשתי בהצללה מותאמת אישית של קודקוד (spherify.vs) ובכלי הצללה למקטעי (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() מספקת פונקציונליות בסיסית למניפולציה של צבעים, כמו ערבוב וחיבור אלפא בתוכנת הצללה של קטעים.

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

תיהנו מההדגמה!

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

אם מופיעה למעלה מפה שטוחה של Google, ניתן להפעיל אותה לפי ההוראות הבאות

דפדפנים נתמכים: תוכנות הצללה של CSS

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

שלבים ב-Chrome Canary

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

צעדים ללילה ב-WebKit

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