कस्टम फ़िल्टर या सीएसएस शेडर, आपको अपने DOM कॉन्टेंट के साथ WebGL के शेडर की सुविधा का इस्तेमाल करने की अनुमति देते हैं. फ़िलहाल, इस्तेमाल किए जा रहे शेडर, WebGL में इस्तेमाल किए जाने वाले शेडर जैसे ही हैं. इसलिए, आपको 3D की कुछ शब्दावली और ग्राफ़िक्स पाइपलाइन के बारे में थोड़ा जानना होगा.
मैंने हाल ही में LondonJS में दिए गए प्रज़ेंटेशन का रिकॉर्ड किया गया वर्शन शामिल किया है. इस वीडियो में, मैंने 3D टर्म के बारे में खास जानकारी दी है. आपको यह समझना होगा कि आपको अलग-अलग तरह के कौनसे वैरिएबल मिलेंगे और कस्टम फ़िल्टर का इस्तेमाल आज से कैसे शुरू किया जा सकता है. आपको स्लाइड भी लेनी चाहिए, ताकि आप खुद डेमो के साथ खेल सकें.
शेडर के बारे में जानकारी
मैंने पहले शेडर के बारे में जानकारी दी थी. इससे आपको यह जानकारी मिलेगी कि शेडर क्या हैं और WebGL के हिसाब से उनका इस्तेमाल कैसे किया जा सकता है. अगर आपने पहले कभी शेडर का इस्तेमाल नहीं किया है, तो आगे बढ़ने से पहले यह लेख ज़रूर पढ़ें. इसकी वजह यह है कि कस्टम फ़िल्टर के कई कॉन्सेप्ट और भाषा, मौजूदा WebGL शेडर की शब्दावली पर आधारित होती है.
आइए, कस्टम फ़िल्टर चालू करके आगे बढ़ते हैं!
कस्टम फ़िल्टर चालू करना
कस्टम फ़िल्टर, Chrome और Canary, दोनों में उपलब्ध हैं. साथ ही, ये Android के लिए Chrome में भी उपलब्ध हैं. इसके लिए, about:flags पर जाएं और "CSS शेडर" खोजें. इसके बाद, उन्हें चालू करें और ब्राउज़र को रीस्टार्ट करें. अब आपका काम पूरा हो गया!
सिंटैक्स
कस्टम फ़िल्टर, उन फ़िल्टर के सेट को बड़ा करते हैं जिन्हें आपने अपने डीओएम एलिमेंट पर पहले से ही लागू किया जा सकता है, जैसे कि blur या sepia. एरिक बिडलमैन ने इन लोगों के लिए एक शानदार प्लेग्राउंड टूल लिखा है. आपको इसे देखना चाहिए.
किसी DOM एलिमेंट पर कस्टम फ़िल्टर लागू करने के लिए, इस सिंटैक्स का इस्तेमाल करें:
.customShader {
-webkit-filter:
custom(
url(vertexshader.vert)
mix(url(fragment.frag) normal source-atop),
/* Row, columns - the vertices are made automatically */
4 5,
/* We set uniforms; we can't set attributes */
time 0)
}
इससे आपको पता चलेगा कि हम अपने वर्टिक्स और फ़्रैगमेंट शेडर का एलान करते हैं. साथ ही, उन पंक्तियों और कॉलम की संख्या भी बताते हैं जिनमें हमें अपने डीओएम एलिमेंट को बांटना है. इसके बाद, हम उन यूनिफ़ॉर्म का एलान करते हैं जिन्हें हमें पास करना है.
आखिर में, यह बताना ज़रूरी है कि हम फ़्रेगमेंट शेडर के आस-पास, ब्लेंड मोड (normal) और कंपोजिट मोड (source-atop) के साथ mix() फ़ंक्शन का इस्तेमाल करते हैं. आइए, फ़्रेगमेंट शेडर पर नज़र डालें और देखें कि हमें mix() फ़ंक्शन की ज़रूरत क्यों है.
पिक्सल पुश करना
अगर आपको WebGL के शेडर के बारे में पता है, तो आपको पता चलेगा कि कस्टम फ़िल्टर में चीज़ें थोड़ी अलग हैं. पहला, हम ऐसी टेक्स्चर नहीं बनाते जिनका इस्तेमाल हमारा फ़्रैगमेंट शेडर, पिक्सल भरने के लिए करता है. इसके बजाय, फ़िल्टर लागू किए गए डीओएम कॉन्टेंट को अपने-आप किसी टेक्सचर पर मैप कर दिया जाता है. इसका मतलब दो बातों से है:
- सुरक्षा से जुड़ी वजहों से, हम डीओएम के टेक्सचर के अलग-अलग पिक्सल कलर वैल्यू के बारे में क्वेरी नहीं कर सकते
- फ़िलहाल, हम पिक्सल का आखिरी रंग खुद से सेट नहीं करते. इसका मतलब है कि
gl_FragColorका इस्तेमाल नहीं किया जा सकता. इसके बजाय, यह माना जाता है कि आपको DOM कॉन्टेंट रेंडर करना है. इसके लिए, आपकोcss_ColorMatrixऔरcss_MixColorकी मदद से, इसके पिक्सल में बदलाव करना होगा.
इसका मतलब है कि फ़्रैगमेंट शेडर का हमारा 'नमस्ते दुनिया' इस तरह दिखता है:
void main() {
css_ColorMatrix = mat4(1.0, 0.0, 0.0, 0.0,
0.0, 1.0, 0.0, 0.0,
0.0, 0.0, 1.0, 0.0,
0.0, 0.0, 0.0, 1.0);
css_MixColor = vec4(0.0, 0.0, 0.0, 0.0);
// umm, where did gl_FragColor go?
}
DOM कॉन्टेंट के हर पिक्सल को css_ColorMatrix से गुणा किया जाता है. ऊपर दिए गए मामले में, आइडेंटिटी मैट्रिक्स के तौर पर, यह कुछ नहीं करता और RGBA की किसी भी वैल्यू में बदलाव नहीं करता. अगर हमें सिर्फ़ लाल वैल्यू रखनी हैं, तो हम css_ColorMatrix का इस्तेमाल इस तरह करेंगे:
// keep only red and alpha
css_ColorMatrix = mat4(1.0, 0.0, 0.0, 0.0,
0.0, 0.0, 0.0, 0.0,
0.0, 0.0, 0.0, 0.0,
0.0, 0.0, 0.0, 1.0);
उम्मीद है कि आपको यह दिख रहा होगा कि 4D (RGBA) पिक्सल वैल्यू को मैट्रिक से गुणा करने पर, आपको दूसरी तरफ़ से बदली गई पिक्सल वैल्यू मिलती है. इस मामले में, आपको ऐसी वैल्यू मिलती है जो हरे और नीले कॉम्पोनेंट को शून्य कर देती है.
css_MixColor का इस्तेमाल मुख्य रूप से बेस कलर के तौर पर किया जाता है. इसे अपने डीओएम कॉन्टेंट में शामिल किया जा सकता है. ब्लेंडिंग, ब्लेंड मोड की मदद से की जाती है. ये मोड, आर्ट पैकेज में मौजूद होते हैं. जैसे, ओवरले, स्क्रीन, कलर डॉज, हार्ड लाइट वगैरह.
इन दोनों वैरिएबल के पास, पिक्सल में बदलाव करने के कई तरीके हैं. ब्लेंड और कंपोजिट मोड के इंटरैक्ट करने के तरीके के बारे में बेहतर तरीके से जानने के लिए, फ़िल्टर इफ़ेक्ट की खास जानकारी देखें.
वर्टिक बनाना
WebGL में, हम अपने मेश के 3D पॉइंट बनाने की पूरी ज़िम्मेदारी लेते हैं. हालांकि, कस्टम फ़िल्टर में आपको सिर्फ़ अपनी पसंद की लाइनों और कॉलम की संख्या बतानी होती है. इसके बाद, ब्राउज़र आपके DOM कॉन्टेंट को अपने-आप कई त्रिभुजों में बांट देगा:
इसके बाद, उनमें से हर एक वर्टिक्स को बदलाव करने के लिए, हमारे वर्टिक्स शेडर में भेज दिया जाता है. इसका मतलब है कि हम उन्हें ज़रूरत के हिसाब से 3D स्पेस में घुमाना शुरू कर सकते हैं. कुछ ही समय में, आपको शानदार इफ़ेक्ट बनाने की सुविधा मिल जाएगी!
शेडर की मदद से ऐनिमेशन बनाना
शेडर में ऐनिमेशन जोड़ने से, उन्हें मज़ेदार और दिलचस्प बनाया जा सकता है. इसके लिए, आपको अपनी सीएसएस में ट्रांज़िशन (या ऐनिमेशन) का इस्तेमाल करके, एक जैसी वैल्यू अपडेट करनी होंगी:
.shader {
/* transition on the filter property */
-webkit-transition: -webkit-filter 2500ms ease-out;
-webkit-filter: custom(
url(vshader.vert)
mix(url(fshader.frag) normal source-atop),
1 1,
time 0);
}
.shader:hover {
-webkit-filter: custom(
url(vshader.vert)
mix(url(fshader.frag) normal source-atop),
1 1,
time 1);
}
इसलिए, ऊपर दिए गए कोड में ध्यान देने वाली बात यह है कि ट्रांज़िशन के दौरान, समय 0 से 1 हो जाएगा. शेडर में, हम यूनिफ़ॉर्म time का एलान कर सकते हैं और उसकी मौजूदा वैल्यू का इस्तेमाल कर सकते हैं:
uniform float time;
uniform mat4 u_projectionMatrix;
attribute vec4 a_position;
void main() {
// copy a_position to position - attributes are read only!
vec4 position = a_position;
// use our time uniform from the CSS declaration
position.x += time;
gl_Position = u_projectionMatrix * position;
}
खेलना शुरू करें!
कस्टम फ़िल्टर का इस्तेमाल करना बहुत मज़ेदार होता है. इनकी मदद से, शानदार इफ़ेक्ट बनाए जा सकते हैं. हालांकि, इनके बिना इफ़ेक्ट बनाना मुश्किल (और कुछ मामलों में असंभव) होता है. अभी यह सुविधा शुरुआती दौर में है और इसमें काफ़ी बदलाव हो रहे हैं. हालांकि, इन्हें जोड़ने से आपके प्रोजेक्ट में थोड़ी-बहुत शोबिज़ की झलक दिखेगी. इसलिए, इन्हें आज़माना क्यों न हो?