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

Paul Irish

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

Google Chrome के नए Canary वर्शन में, सीएसएस शेडर के लिए सहायता जोड़ी गई है. इसलिए, मैंने उनका इस्तेमाल करके देखना चाहा.

इस प्रयोग में, मैंने 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 Canary के सबसे नए वर्शन और WebKit के नाइटली वर्शन में उपलब्ध है. इस सुविधा का पूरा आनंद लेने के लिए, आपको कुछ बटन दबाने होंगे.

Chrome Canary में ऐसा करने का तरीका

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

WebKit के लिए, हर रात की प्रोसेस

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