सीएसएस शेडर और Google Maps के साथ इंटरैक्टिव ग्लोब

पॉल आयरिश
Twitter होम पेज

हाल ही में, मैंने Webmonkey पर समाचार पढ़ा कि Adobe के CSS Shaders के प्रस्ताव को W3C ने स्वीकार कर लिया है. इस प्रस्ताव में, सीएसएस के कुछ नए टूल की मदद से, वेब पर अच्छी क्वालिटी के सिनेमैटिक इफ़ेक्ट शामिल किए जाएंगे. अगर आपने अब तक यह वीडियो नहीं देखा है, तो इसे देखें.

Google Chrome के सबसे नए कैनरी ने सीएसएस शेडर में भी यह सुविधा जोड़ी है. इसलिए, मैंने इनके साथ प्रयोग करने का फ़ैसला किया.

इस प्रयोग में, मैंने Google Maps की मदद से एक ग्लोब बनाने के लिए, कस्टम वर्टेक्स शेडर (spherify.vs) और फ़्रैगमेंट शेडर (spherify.fs) का इस्तेमाल किया.

<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() फ़ंक्शन, फ़्रैगमेंट शेडर पर रंग में ब्लेंडिंग और ऐल्फ़ा कंपोज़िटिंग जैसी बुनियादी सुविधाएं देता है.

हम सीएसएस में शेयर की रेडियस, ऐक्सिस, और रोटेशन को बदल सकते हैं. इस उदाहरण में, हम sphereRadius: 0.5 की वैल्यू सेट करते हैं और यह मूल स्फ़ीयर का साइज़ देता है.

डेमो का आनंद लें!

इस इफ़ेक्ट का वीडियो नीचे दिया गया है. अगर आपने शेडर चालू किए हैं, तो नीचे दिए गए विकल्पों में से असल चीज़ के साथ खेला जा सकता है!

अगर आपको ऊपर सपाट Google Maps दिखता है, तो उसे चालू करने के लिए नीचे दिए गए निर्देशों का पालन करें

ब्राउज़र सहायता: सीएसएस शेडर

फ़िलहाल, यह नए Google Chrome कैनरी और WebKit के साथ हर रात उपलब्ध है. बेहतर अनुभव पाने के लिए, आपको कुछ नॉब चालू करने होंगे.

Chrome कैनरी के चरण

  1. ब्राउज़र के नेविगेशन बार में about:flags टाइप करें
  2. "सीएसएस शेडर चालू करें" खोजें. इसे चालू करें
  3. ब्राउज़र को फिर से लॉन्च करें

WebKit के रात में चलने वाले कदम

  1. Mac xlsx के लिए WebKit Nightly डाउनलोड और इंस्टॉल करें
  2. ब्राउज़र का प्राथमिकताएं पैनल खोलें. बेहतर टैब पर जाएं और मेन्यू बार में डेवलप करें > WebGL चालू करें मेन्यू पर सही का निशान लगाएं.
  3. ब्राउज़र के मेन्यू बार में डेवलप करें चुनें