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

Paul Irish

لقد قرأت مؤخرًا أخبارًا على Webmonkey تشير إلى قبول W3C اقتراح 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. في شريط القوائم في المتصفّح، اختَر تطوير.