كرة أرضية تفاعلية باستخدام أدوات تظليل CSS و"خرائط Google"

قرأتُ مؤخرًا أخبارًا على Webmonkey موافقة على عرض ملفات CSS Shaders من Adobe، لأنّه سيوفّر تأثيرات سينمائية عالية الجودة على الويب من خلال بعض أدوات CSS الجديدة. شاهد الفيديو إذا لم يسبق لك مشاهدته.

أضاف أحدث إصدار من إصدار 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. في شريط القوائم في المتصفح، اختَر تطوير.