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

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

أضاف أحدث إصدار من Google Chrome Canary ميزة استخدام تأثيرات 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 Nightly. للاستفادة من التجربة الكاملة، عليك ضبط بعض الإعدادات.

خطوات Chrome Canary

  1. اكتب about:flags في شريط التنقّل في المتصفّح.
  2. ابحث عن "تفعيل تأثيرات CSS". تفعيلها
  3. إعادة تشغيل المتصفّح

خطوات الإصدار الليلي من WebKit

  1. تنزيل WebKit nightly وتثبيته على نظام التشغيل Mac OSX
  2. افتح لوحة الإعدادات المفضّلة للمتصفّح. انتقِل إلى علامة التبويب الإعدادات المتقدّمة وضَع علامة في المربّع بجانب تطوير > تفعيل WebGL لعرض القائمة في شريط القوائم.
  3. في شريط قوائم المتصفّح، اختَر تطوير.