सीएसएस में कस्टम फ़िल्टर

कस्टम सीएसएस फिल्टर ( सी ustom सी आरोही एस tyle एस ऊँची एड़ी के जूते आई के साथ शुरू)

प्रविष्टि

कस्टम सीएसएस फिल्टर (इसके बाद CCSSF) (जिसे पहले CSS shaders के नाम से जाना जाता था) एक नया ब्राउज़र फीचर है जो HTML डॉक्यूमेंट के तत्वों पर हाथ से बनाए गए विजुअल इफेक्ट्स को लागू करता है।
कस्टम फ़िल्टर फ़िल्टर प्रभाव 1.0 विनिर्देशन का हिस्सा हैं। वे इस विनिर्देश के दूसरे भाग को पूरक करते हैं, जो पहले से ही ब्राउज़रों में निर्मित कुछ सामान्य सीएसएस फिल्टर (धब्बा, सीपिया, कंट्रास्ट, ग्रेस्केल) को परिभाषित करता है।

इनलाइन सीएसएस फिल्टर

अंतर्निहित सीएसएस फिल्टर छवि संपादकों में फिल्टर के समान कार्यक्षमता प्रदान करते हैं - आपके पास पूर्वनिर्धारित, सर्वव्यापी प्रभाव का एक सेट है जिसमें आप केवल मापदंडों को नियंत्रित कर सकते हैं।
उदाहरण के लिए, इस छवि को ग्रेस्केल में बदल दिया गया था और फिर धुंधला लागू किया गया था:



(आप चित्रों पर क्लिक कर सकते हैं और अपने आप को देख सकते हैं, अंतर्निहित सीएसएस फिल्टर क्रोम के एक स्थिर संस्करण में काम करना चाहिए)

कस्टम सीएसएस फ़िल्टर

दूसरी ओर, कस्टम फ़िल्टर आपको पूरी तरह से नए प्रकार के प्रभाव बनाने की अनुमति देते हैं, जिसमें आप न केवल प्रभाव के मापदंडों को नियंत्रित कर सकते हैं, बल्कि शेड्स का उपयोग करके लागू प्रभाव का सार भी निर्धारित कर सकते हैं।
उदाहरण के लिए, दस्तावेज़ में अंतर्निहित यह नक्शा एक वास्तविक बनावट वाले क्षेत्र में बदल गया था:




(आप तस्वीरों पर क्लिक कर सकते हैं और अपने आप को देख सकते हैं, अधिक जानकारी के लिए, सीएसएस फिल्टर कैसे बना सकते हैं देखें)

निर्मित फिल्टर में कस्टम लोगों के लिए दुर्गम कार्यक्षमता तक पहुंच है। वे अधिक से अधिक प्राप्त कर सकते हैं मूल रूप से ब्राउज़रों के रचनाकारों द्वारा कल्पना की गई थी।
सबसे अधिक ध्यान देने योग्य बिल्ट-इन फ़िल्टर पिक्सल को निर्दिष्ट DOM सामग्री से पढ़ सकते हैं, जिसका अर्थ है कि वे कर सकते हैं, उदाहरण के लिए, धुंधला ( कस्टम फ़िल्टर अनुभाग की सीमा में देखें)।

शेड क्या हैं?

कस्टम फ़िल्टर प्रभाव छोटे कार्यक्रमों द्वारा निर्धारित होते हैं जिन्हें शेड्स कहा जाता है।
शेड 3 डी आकार और ग्राफिक तत्वों की उपस्थिति निर्धारित करते हैं (शेड पॉलीगोनल ग्रिड के साथ काम करते हैं)।
शेडर्स सीधे वीडियो कार्ड के हार्डवेयर पर काम करते हैं। वे समानांतर में डेटा की एक बड़ी मात्रा को संसाधित कर सकते हैं, जिसका अर्थ है कि वे बहुत तेज़ हो सकते हैं, लेकिन अक्सर सीपीयू पर चलने वाले कार्यक्रमों के विशिष्ट चक्र की तुलना में अतिरेक होता है।
CCSSFs GLSL का उपयोग शेडर्स लिखने के लिए एक भाषा के रूप में करते हैं।
यदि आप ग्राफ़िक्स शेड्स से परिचित हैं जो shader भाषाओं ( OpenGL , OpenGL ES , WebGL , DirectX ) का उपयोग करते हैं, तो सब कुछ समान है - कस्टम CSS फ़िल्टर में उपयोग किए जाने वाले शेड उसी तरह से काम करते हैं।

शेडर प्रकार

CCSSF में उपयोग किए जाने वाले शेड दो प्रकार के होते हैं: वर्टेक्स शेड्स (वर्टेक्स शेडर) और टुकड़ा शेड्स (फ्रैगमेंट शेडर) (इन्हें पिक्सेल शेड्स भी कहा जाता है)।
वर्टेक्स शेड्स कहते हैं कि क्या स्थित है। वे आपको 3 डी अंतरिक्ष में ग्रिड के कोने को स्थानांतरित करने, वस्तुओं को विकृत करने और पुनर्व्यवस्थित करने की अनुमति देते हैं।
टुकड़े टुकड़े कहते हैं कि वस्तुओं की सतह कैसे दिखती है। वे आपको वस्तुओं पर आकर्षित करने या मौजूदा पिक्सेल से संबंधित वस्तुओं की उपस्थिति को बदलने की अनुमति देते हैं।
सामान्य तौर पर, वैध GPU प्रोग्राम बनाने में सक्षम होने के लिए, आपको दोनों शेड की आवश्यकता होती है। हालांकि, कस्टम सीएसएस फिल्टर के लिए, इनमें से केवल एक प्रकार की आवश्यकता होती है, और लापता ब्राउज़र के लिए यह डिफ़ॉल्ट पास-थ्रू शेडर का उपयोग करता है।

कस्टम CSS फ़िल्टर कैसे काम करते हैं?

आधुनिक ब्राउज़र स्वयं अब ग्राफिक त्वरण का उपयोग करते हैं।
HTML पृष्ठ ब्राउज़रों द्वारा DOM तत्वों के अनुरूप बनावट वाले आयतों के संग्रह के रूप में प्रस्तुत किए जाते हैं।
कस्टम सीएसएस फिल्टर के साथ, आप ब्राउज़र पर चिपके रहते हैं सूचना प्रवाह प्रदान करते हैं, स्क्रीन पर आरेखित होने से पहले इन आयतों के आकार और स्वरूप को बदलने का अवसर प्राप्त करते हैं।
यह सीएसएस 3 डी कैसे काम करता है इसके समान है, केवल निर्दिष्ट कार्यक्षमता के साथ मापदंडों के साथ खेलने में सक्षम होने के बजाय, आप डोम सामग्री को संसाधित करने के लिए अपना कोड चला सकते हैं।

सामग्री ग्रिड

CCSSF के साथ प्रत्येक DOM तत्व उपयोगकर्ता द्वारा परिभाषित मोज़ेक के साथ एक त्रिकोणीय ग्रिड में बदल जाएगा:
<img sr = " cs317217.userapi.com/v317217705/37a5/ghtCCVl9SeM.jpg " alt = "image" />
डिफ़ॉल्ट रूप से, ग्रिड में केवल दो त्रिकोण होते हैं (आयत बनाने के लिए न्यूनतम आवश्यक)।
इस ग्रिड को DOM एलिमेंट (जो आमतौर पर स्क्रीन पर तैयार होता है) के कंटेंट के लिए एक टेक्सचर मिलेगा, और फिर उस पर आपके कस्टम शेड्स लागू होंगे।

ग्रिड कनेक्टिविटी

त्रिकोण का एक जाल दो तरह से बनाया जा सकता है (सीएसएस से नियंत्रित):

1. संलग्न त्रिकोण
2. अलग किए गए त्रिकोण

संलग्न त्रिभुजों के साथ एक ग्रिड एक सम्मिलित वस्तु है, जहां पड़ोसी त्रिभुजों में सामान्य कोने होते हैं। यदि आप एक शीर्ष को स्थानांतरित करते हैं, तो इसके साथ जुड़े सभी त्रिकोण विकृति (कपड़े की एक शीट की तरह)। यह विकल्प डिफ़ॉल्ट रूप से उपयोग किया जाता है।
अलग-अलग त्रिकोणों के साथ एक जाल को कई अलग-अलग त्रिकोणों से इकट्ठा किया जाता है। प्रत्येक शीर्ष केवल एक त्रिभुज का है। आप ग्रिड को अलग-अलग घटकों में विभाजित कर सकते हैं। एक जाल में छेद हो सकते हैं, या यहां तक ​​कि पूरी तरह से एक वर्टीकल शेडर में दोबारा तैयार किया जा सकता है।
ग्रिड मोज़ेक और कनेक्टिविटी सभी सीएसएस बदलावों में समान रहना चाहिए।

छायादार इनपुट

वर्टेक्स और टुकड़े टुकड़े तीन प्रकार के मापदंडों को स्वीकार कर सकते हैं:

1. प्रपत्र (वर्दी)
2. विशेषताएं (विशेषताएँ)
3. अंतर (भिन्नता)

आकार ग्रिड के सभी कोने और पिक्सेल के लिए एक एकल मान वाले पैरामीटर हैं (उदाहरण के लिए, किसी ऑब्जेक्ट का रंग)।
विशेषताएँ कोने के अलग-अलग पैरामीटर हैं, प्रत्येक विशेषता के लिए प्रत्येक जाल वर्टेक्स को अपना मान प्राप्त होता है (उदाहरण के लिए, शीर्ष स्थिति)।
अंतर वे पैरामीटर होते हैं जो लंबवत से टुकड़ों तक होते हैं। उन्हें त्रिकोण के प्रत्येक शीर्ष के लिए संकेत दिया गया है और त्रिकोण के अंदर बिंदुओं के लिए उनके मान GPU (उदाहरण के लिए, प्रकाश व्यवस्था) को प्रक्षेपित करते हैं।

फ़िल्टर प्रभाव विनिर्देश एक अलग प्रकार के इनपुट की अनुमति देता है: बनावट । हालांकि, वे अभी तक लागू नहीं किए गए हैं (और उनका उपयोग करने का प्रयास चुपचाप shaders को तोड़ देगा)।
ब्राउजर कुछ डिफ़ॉल्ट अंतर्निहित पैरामीटर प्रदान करता है और सभी तत्वों के लिए शुरू होता है जिसमें कस्टम सीएसएस फ़िल्टर लागू होते हैं।

attribute vec4 a_position; attribute vec2 a_texCoord; attribute vec2 a_meshCoord; attribute vec3 a_triangleCoord; 

अंतर्निहित विशेषताएँ आपको ग्रिड में अलग-अलग कोने और त्रिकोणों की पहचान करने और खोजने की अनुमति देती हैं।

 uniform mat4 u_projectionMatrix; uniform vec2 u_textureSize; uniform vec4 u_meshBox; uniform vec2 u_tileSize; uniform vec2 u_meshSize; 

एंबेडेड फॉर्म पूरे ग्रिड के लिए DOM तत्व डेटा के बारे में सामान्य जानकारी प्रदान करते हैं।

 varying vec2 v_texCoord; 

अंतर्निहित भिन्नता बनावट निर्देशांक प्रदान करती है यदि प्रभाव डिफ़ॉल्ट शेड का उपयोग करता है।
इन मापदंडों की सटीक परिभाषा फ़िल्टर प्रभाव विशेषज्ञता ( गुण , आकार , अंतर ) में पाई जा सकती है।

सावधानी : फिलहाल, इस विशेषज्ञता से सभी अंतर्निहित पैरामीटर लागू नहीं किए गए हैं।

उदाहरण के लिए, u_textureSize और u_meshSize फ़ॉर्म गायब हैं । आप व्यक्तिगत रूप से सीएसएस में उन्हें परिभाषित करके इस समस्या को हल कर सकते हैं।
इसके अलावा, v_texCoord अंतर अभी तक काम नहीं करता है, इसलिए आपको बनावट के निर्देशांक को a_texCoord विशेषता से vertex shader में स्थानांतरित करने के लिए अपना अंतर बनाने की आवश्यकता होगी।
आप WebKit "मास्टर" समस्या के इस संस्करण में कस्टम CSS फ़िल्टर लागू करने की प्रगति का पालन कर सकते हैं।
अंतर्निहित मापदंडों के अलावा, आप सीएसएस शैलियों के माध्यम से प्रभाव के लिए अपने रूपों का भी वर्णन कर सकते हैं ।

 .shaded { -webkit-filter: custom(url(distort.vs) mix(url(tint.fs) normal source-atop), distortAmount 0.5, lightVector 1.0 1.0 0.0); } 

 //  (  ) ... uniform float distortAmount; uniform vec3 lightVector; ... 

यह सब आपको बाहर से प्रभावों को नियंत्रित करने की अनुमति देता है। विशेष रूप से, सीएसएस में वर्णित रूपों के लिए मूल्यों को सीएसएस संक्रमण का उपयोग करते समय इंटरपोल किया जाएगा।
सावधानी : रूपों और अंतरों के लिए उपलब्ध स्लॉट्स की संख्या सीमित है और विशिष्ट जीपीयू पर निर्भर करती है (यह विशेषताओं पर लागू होता है, लेकिन वे सीएसएस फिल्टर के लिए काम नहीं करेंगे)।

यहां आप देख सकते हैं कि WebGL के लिए आपके सिस्टम पर कितने shader पैरामीटर उपलब्ध हैं (इंगित किए गए नंबर CCSSF के लिए समान होने चाहिए; कुछ स्लॉट बिल्ट-इन पैरामीटर को असाइन किए गए हैं)।

मेरी वेबसाइट पर कस्टम सीएसएस फिल्टर का उपयोग कैसे करें?

CCSSF को स्टाइल के माध्यम से अन्य सीएसएस शैलियों की तरह ही लागू किया जाता है । यह इस तरह दिखता है:

 <style> .shader { -webkit-filter: custom(url(shaders/crumple.vs) mix(url(shaders/crumple.fs) normal source-atop), 50 50, amount 0, strength 0.2, lightIntensity 1.05); } </style> 

या इसलिए यदि आप केवल टुकड़ा shader का उपयोग करें:

 <style> .shader { -webkit-filter: custom(none mix(url(shaders/tint.fs) normal source-atop), amount 0); } </style> 

इसी तरह, टुकड़ा shader के बजाय कोई भी उपयोग करना विफल हो जाएगा (अभी के लिए)। इस स्थिति में, समाधान एक खाली टुकड़ा shader स्थानापन्न है।
आप ब्राउज़र को GLSL शेड्स के स्रोतों का लिंक देते हैं और CSS शैलियों के माध्यम से उनके मापदंडों को निर्दिष्ट करते हैं। ब्राउज़र बायनेरी में शेड्स को संकलित करने और उन्हें HTML सामग्री पर लागू करने का ध्यान रखेगा।

जब आपके पास पहले से ही शेड हैं, तो उन्हें HTML पर लागू करना आसान है - आप बस उनके साथ नियमित सीएसएस शैलियों के साथ काम करते हैं।

 <div class="shader"> 

आप कस्टम सीएसएस फिल्टर के साथ सीएसएस बदलाव का उपयोग कर सकते हैं, उदाहरण के लिए, जब आप किसी पृष्ठ तत्व पर होवर करते हैं तो प्रभाव को गतिशील रूप से बदल सकते हैं।

 -webkit-transition: -webkit-filter ease-in-out 1s; 

CCSSF मानकों को इनलाइन सीएसएस गुणों के समान प्रक्षेपित किया जाएगा।

कैसे काम करें CCSSF?

सावधानी : यह तकनीक बहुत नई है और इसे मोटे तौर पर लागू किया जा सकता है। विवरण बदल सकते हैं, कुछ सुविधाएँ काम नहीं कर सकती हैं, और कार्यान्वयन में बग हो सकते हैं।

यह पोस्ट सितंबर 2012 की स्थिति को दर्शाता है। यदि तब से कुछ वर्णित के रूप में काम नहीं करता है, तो सटीक सिंटैक्स और व्यवहार के बारे में पता होना Google के लिए उपयोगी होगा।
वर्तमान में, कस्टम सीएसएस फिल्टर क्रोम कैनरी के वर्तमान निर्माण में काम करते हैं (रिकॉर्ड बनाने के समय सटीक संस्करण 24.0.1278.0 है)।
यहाँ क्रोम कैनरी डाउनलोड करें:

tools.google.com/dlpage/chromesxs

CCSSF को विंडोज और OSX पर काम करना चाहिए (मैं विंडोज 7 का उपयोग करता हूं)।

यहां तक ​​कि अगर आपका ओएस और ब्राउज़र उनका समर्थन करता है, तो सब कुछ एक पुराने या कमजोर GPU या अनुपयुक्त ड्राइवरों में चल सकता है (सिस्टम की आवश्यकताएं यहां संकेतित लोगों के बराबर हैं - WebGL संगतता जांच )
कस्टम सीएसएस फिल्टर डिफ़ॉल्ट रूप से सक्षम नहीं हैं, इसलिए क्रोम को इस कुंजी के साथ कंसोल से चलाया जाना चाहिए:

 chrome --enable-css-shaders 

विंडोज पर क्रोम में शामिल सीएसएस शेड्स को प्राप्त करने का एक आसान तरीका क्रोम कैनरी का शॉर्टकट बनाना और लक्ष्य क्षेत्र में --enable-css-shaders पैरामीटर को जोड़ना है।
एक विकल्प उपरोक्त कमांड के साथ एक बैच फ़ाइल बनाना है।

क्रोम कैनरी के नए संस्करणों में, इंटरफ़ेस में एक विशेष ध्वज है, विशेष टैब में "झंडे" ("सीएसएस दाएं किनारों को सक्षम करें" के लिए खोजें):

 chrome://flags/ 

कैसे सुनिश्चित करें कि CCSSF काम करते हैं?

इस उदाहरण को देखें।

यदि आप गोलाकार ग्रह देखते हैं, तो बधाई, वे काम करते हैं;)।



यदि आप केवल आयताकार चित्र देखते हैं, तो कुछ गलत हो गया है?


कृपया ध्यान दें कि कुछ उदाहरण इंटरनेट पर बेतरतीब ढंग से पाए गए थे और समय के साथ टूट सकते हैं। उदाहरण के लिए, मई 2012 से शुरुआती क्रोमियम कस्टम बिल्ड में काम करने वाले प्रभाव नवीनतम क्रोम कैनरी में काम नहीं करते हैं।
सावधानी : किसी कारण से कार्यान्वयन अब स्थिर नहीं है। ऐसा हो सकता है कि एक बिंदु पर CCSSF काम करते हैं, और दूसरे पर वे पहले ही टूट जाते हैं, यहां तक ​​कि एक पृष्ठ पर एक ही पृष्ठ पर पुनः लोड या चक्रीय संक्रमण के दौरान भी।

ऐसे मामलों में:

1. पुनः लोड करें पृष्ठ
2. टैब बंद करें और पृष्ठ को एक नए टैब में खोलें
3. ब्राउज़र को पुनरारंभ करें

एक टैब में टूटने वाले शेड्स अन्य सभी टैब में शेडर्स को मार सकते हैं (और पेज लोड होने पर भी शेड्स टूटे रहेंगे)।

पहले पृष्ठ लोड के दौरान, शेड आंशिक रूप से प्रदान किए गए DOM तत्वों पर भी काम कर सकते हैं। इस स्थिति में, टैब बंद करें और पृष्ठ को फिर से खोलें, पुनः लोड करने से मदद नहीं मिलेगी।

कस्टम फ़िल्टर सीमाएँ

सामग्री पहुंच

CCSSF में उपयोग किए जाने वाले शेड्स DOM सामग्री के बनावट पिक्सेल को नहीं पढ़ सकते हैं, और वे स्क्रीन पर सीधे पिक्सेल नहीं खींच सकते हैं ।
ये प्रतिबंध समय के हमलों की प्रतिक्रिया के रूप में प्रकट हुए , जब साइट में निर्मित एक दुष्ट तृतीय पक्ष shader का उपयोग साइट की सामग्री (पिक्सेल रंग स्रोत के आधार पर, एक अलग shader कोड का उपयोग किया गया था) को पढ़ने के लिए किया जा सकता है।
एक ही तरीका है जो आप DOM तत्व के पिक्सेल के साथ इंटरैक्ट कर सकते हैं, जो कि निम्न खंडों में निर्मित ऑप्शन में css_ColorMatrix , css_MixColor के उपयोग से मूल रंगों से अपने परिकलित रंगों पर स्विच करना है।


कैविएट : युक्ति कहती है कि आप ठोस रंग मान बनाने के लिए gl_FragColor का उपयोग कर सकते हैं।
अभी तक यह काम नहीं कर रहा है।
WebGL इस समस्या को एक अन्य तरीके से हल करता है, केवल "स्वच्छ" सामग्री तक पहुंच प्रदान करता है (उसी सर्वर पर बनाया गया या सीधे 3-पक्ष सर्वर के लिए क्रॉस-डोमेन एक्सेस द्वारा अनुमति दी गई है)।

Shader दृष्टिकोण का नकारात्मक पक्ष यह है कि यह कई दिलचस्प प्रकार के अनुप्रयोगों के साथ संगत नहीं है, और सकारात्मक पक्ष यह है कि CSS shaders किसी भी सामग्री पर लागू किया जा सकता है।

ग्रिड आकार

एक और सीमा, कम से कम मौजूदा कार्यान्वयन में, मोज़ेक ग्रिड के लिए त्रिकोण की एक निश्चित संख्या है।
आपके पास 20,000 से अधिक त्रिभुजों का ग्रिड नहीं हो सकता है। इसलिए, 16- बिट संख्याओं के साथ अनुक्रमित त्रिकोणों का उपयोग करके रेंडर करने की सिफारिश की जाती है, कोने की संख्या को 65.536 तक सीमित कर दिया जाता है।

अपने खुद के सीएसएस प्रभाव कैसे बनाएं?

आप सभी की जरूरत है एक ब्राउज़र और एक पाठ संपादक है। CCSSF में उपयोग किए जाने वाले शेड सादे पाठ फ़ाइलें हैं।

वर्कफ़्लो HTML + सीएसएस के लिए समान है: परिवर्तन करें, ब्राउज़र में पृष्ठ को ताज़ा करें और देखें कि यह निकला या नहीं।
Adobe से एक टूल है, जिसे CSS FilterLab कहा जाता है, यह प्रभाव मापदंडों को संपादित करना आसान बनाता है।

सावधानी : एक shader को बाइनरी में संकलित करना एक अपेक्षाकृत धीमा ऑपरेशन है। यदि आपके पास कई शेड हैं, तो वे पृष्ठ लोडिंग को धीमा कर सकते हैं।

Chrome में WebGL के लिए, पहले से उपयोग की गई shader binaries की कैशिंग लागू की गई थी, यह मदद कर सकता है।

कस्टम सीएसएस फिल्टर में उपयोग किए जाने वाले शेड किस तरह दिखते हैं?

इस तरह दिखता है एक साधारण शीर्ष

 precision mediump float; attribute vec4 a_position; uniform mat4 u_projectionMatrix; void main() { gl_Position = u_projectionMatrix * a_position; } 

एक साधारण टुकड़ा shader इस तरह दिखता है:

 precision mediump float; void main() { float r = 1.0; float g = 1.0; float b = 1.0; float a = 1.0; css_ColorMatrix = mat4( r, 0.0, 0.0, 0.0, 0.0, g, 0.0, 0.0, 0.0, 0.0, b, 0.0, 0.0, 0.0, 0.0, a ); } 

सटीक प्रविष्टि का डेस्कटॉप OpenGL पर कोई प्रभाव नहीं है , लेकिन OpenGL ES का उपयोग करते हुए मोबाइल उपकरणों पर काम करता है। हालांकि, उन्हें वर्तमान कार्यान्वयन के लिए काम करने के लिए निर्दिष्ट किया जाना चाहिए।
निम्नानुसार HTML सामग्री पर शेड्स लागू होते हैं:

 <style> .shader { -webkit-filter: custom(url(simple.vs) mix(url(simple.fs) normal source-atop), 1 1) } </style> <body> <div class="shader"> Hello world! </div> <body> 

यह एक न्यूनतम सीएसएस शैली है, जिसमें दो सरल त्रिभुजों के साथ एक साधारण मोज़ेक ग्रिड में लगाया गया टुकड़ा और वर्टेक्स दोनों का उपयोग किया जाता है (1 कॉलम x 1 पंक्ति)।

कस्टम प्रभाव कैसे बनाएं?

अब देखते हैं कि गोलाकार प्रभाव का थोड़ा सरलीकृत संस्करण कैसे बनाया जाए, यहां इस्तेमाल होने वाले समान।
हम डोम सामग्री (पहली तस्वीर) के साथ एक चिकनी बनावट के साथ शुरू करेंगे। हम इसे एक गोले में लपेटना चाहते हैं और छाया लागू करते हैं, जैसे कि यह एक 3 डी वस्तु है जिसे प्रत्यक्ष प्रकाश (दूसरी तस्वीर) द्वारा प्रकाशित किया गया है।



एक कार्यशील उदाहरण यहां देखें।

मेष विकृति

सभी जाली विकृतियाँ शीर्ष शीर्ष में होती हैं।
सबसे पहले, हमें एक आयताकार विमान को एक गोले के आकार में लपेटने का एक तरीका खोजने की आवश्यकता है, और फिर बाद में एक छाया लागू करें।
हम एक साधारण आयताकार ग्रिड से शुरू करेंगे जो समान रूप से वितरित वर्टेक्स पदों के साथ 2 डी अंतरिक्ष में पड़ा है। हमें 3D क्षेत्र में इन 2D स्थितियों की कुछ मैपिंग लेने की आवश्यकता है।
हम ब्राउज़र द्वारा प्रदान की गई अंतर्निहित a_position विशेषता के माध्यम से मूल विमान के कोने के निर्देशांक प्राप्त कर सकते हैं। हमें इसका उपयोग करने से पहले एक चर घोषित करना होगा:

 attribute vec4 a_position; 

हम इस विशेषता को एक स्थानीय चर में याद रखेंगे, जिसे हम बाद में संशोधित करेंगे (क्योंकि विशेषताएँ केवल-पढ़ने के लिए हैं):

 vec4 position = a_position; 

कंप्यूटर ग्राफिक्स में एक सामान्य ऑपरेशन एक href = " en.wikipedia.org/wiki/UV_mapping "> यूवी मैपिंग के साथ टेक्सचर कर रहा है, जब एक आयताकार चित्र 2 डी बनावट निर्देशांक का उपयोग करके ग्रिड के चारों ओर लपेटा जाता है। यह वैसा ही लगता है जैसा हमें चाहिए।

ब्राउज़र द्वारा प्रदान की गई अंतर्निहित ग्रिड विशेषताओं में से एक दो-घटक वेक्टर a_texCoord है, जो शीर्ष के बनावट निर्देशांक के साथ है।

 attribute vec2 a_texCoord; 

बनावट के निर्देशांक को यू और वी कहा जाता है, वे चित्र की लंबाई और ऊंचाई के साथ ग्रिड के प्रत्येक अक्ष और मानचित्र शीर्ष के लिए 0 ... 1 की सीमा में हैं।

हमारे यू और वी निर्देशांक के अनुरूप X, Y, Z निर्देशांक प्राप्त करने के लिए, हम एक गोलाकार समन्वय प्रणाली (इसे ध्रुवीय भी कहा जाता है) और एक आयताकार समन्वय प्रणाली के बीच परिवर्तन का उपयोग करेंगे:

 x = r * sin( θ ) * cos( φ ) y = r * sin( θ ) * sin( φ ) z = r * cos( θ ) 

गोलाकार निर्देशांक प्रणाली निम्नलिखित निर्देशांक का उपयोग करती है:

• त्रिज्या आर
• आंचल (झुकाव) θ (अंतराल [0 ... l])
• अज़ीमुथ (अज़ीमुथ) im (अवधि [0 ... 2)])

उपयोगकर्ता को सीएसएस फॉर्म के माध्यम से त्रिज्या को परिभाषित करने दें:

 uniform float sphereRadius; 

और हम यू और वी का निर्देशांक करेंगे अजीमुथ और आंचल के लिए:

 vec3 computeSpherePosition( vec2 uv, float r ) { vec3 p; float fi = uv.x * PI * 2.0; float th = uv.y * PI; px = r * sin( th ) * cos( fi ); py = r * sin( th ) * sin( fi ); pz = r * cos( th ); } 

 vec3 sphere = computeSpherePosition( a_texCoord, sphereRadius ); 

अब हम मूल फ्लैट स्थिति और नई गोलाकार स्थिति के बीच आगे बढ़ सकते हैं, जिसे हमने GLSL में अंतर्निहित फ़ंक्शन (दो मानों के बीच रैखिक प्रक्षेप) का उपयोग करके गणना की है।

 uniform float amount; 

हम संक्रमण को नियंत्रित करने के लिए उपयोगकर्ता द्वारा प्रदान किए गए फ़ॉर्म मापदंडों का उपयोग करेंगे (CSS से प्रपत्र पैरामीटर को सीएसएस संक्रमण का उपयोग करके ब्राउज़र द्वारा प्रक्षेपित किया जा सकता है)।

 position.xyz = mix( position.xyz, sphere, amount ); 

अंत में, हम ग्रिड के वर्टिकल को बिल्ट-इन GLSL वेरिएबल में लिख सकते हैं जो कि ब्राउजर द्वारा प्रदान किए गए मैट्रिक्स फॉर्म gl_Position के अनुसार हमारी गणना की गई स्थिति को बदल देता है:

 gl_Position = u_projectionMatrix * position; 

सतह छायांकन

मतगणना छायांकन शीर्ष और टुकड़े टुकड़े के संयोजन से किया जाता है।

शेडर: वर्टेक्स शेडर्स

वर्टेक्स शेडर में, हम प्रत्येक वर्टेक्स के लिए प्रकाश व्यवस्था की गणना करेंगे और इसे टुकड़े टुकड़े करने वाले के अंतर के रूप में पास करेंगे, जहां हम इसका उपयोग डोम बनावट के रंग को बदलने के लिए करेंगे।

छायांकन के लिए, हम एक साधारण लैम्बर्टियन स्कैटरिंग मॉडल का उपयोग करेंगे।
परावर्तन प्रकाश को सामान्य सतह वेक्टर और सामान्यीकृत प्रकाश दिशा वेक्टर का एक अदिश उत्पाद माना जाता है।
हमें प्रत्येक शीर्ष के लिए प्रकाश की स्थिति और सामान्य सतह की आवश्यकता होती है ।
हम उपयोगकर्ता को सीएसएस के माध्यम से प्रेषित तीन-घटक लाइटपॉइंट वेक्टर फॉर्म के रूप में प्रकाश स्रोत की स्थिति को परिभाषित करने की अनुमति देंगे:

 uniform vec3 lightPosition; 

हम GLSL में निर्मित सामान्यीकृत फ़ंक्शन का उपयोग करके सामान्यीकरण करेंगे:

 vec3 lightPositionNormalized = normalize( lightPosition ); 

अगला, हमें एक सपाट और गोलाकार सतह के लिए सामान्य की गणना करने की आवश्यकता है।
सतह को सामान्य तौर पर सीपीयू की तरफ माना जाता है, क्योंकि आपको कनेक्टेड ग्रिड के साथ काम करने की आवश्यकता होती है और एक ही समय में त्रिकोण के सभी कोने तक पहुंच होती है (शेडर एक समय में केवल एक शीर्ष को देखता है)।
हालांकि, यहां हम सरल ज्यामितीय आकृतियों के साथ काम कर रहे हैं, इसलिए हम मानदंडों की विश्लेषणात्मक रूप से गणना कर सकते हैं।
विमान के सामान्य के लिए, हम थोड़े धोखेबाज़ हैं: विमान के सही सामान्य को मॉनिटर से सीधा, XY विमान के लिए निर्देशित किया जाना चाहिए।
लेकिन ऐसा सामान्य हमें एक अपरिवर्तित DOM तत्व देगा, जिसे कुछ स्थानों पर छायांकित किया जाएगा, और यह बाकी पेज तत्वों की पृष्ठभूमि के खिलाफ अप्राकृतिक होगा जिनके पास सुपरइम्पोज़्ड शेड्स नहीं हैं।
इसलिए, हम सतह के लिए एक सामान्य रूप में प्रकाश स्रोत के लिए निर्देशित वेक्टर का उपयोग करते हैं।

 vec3 planeNormal = lightPositionNormalized; 

इससे अविकसित तत्व को हमेशा पूरी तरह से जलाया जा सकेगा।

गोले के सामान्य के लिए, हम एक सरल विश्लेषणात्मक सूत्र का उपयोग करेंगे। एक सतह पर एक गोले का सामान्य क्षेत्र की सतह से इसकी सतह पर सामान्यीकृत वैक्टर है:

 vec3 sphereNormal = normalize( position.xyz ); 

हमारे संक्रमण की स्थिति के लिए पर्याप्त सामान्य होने के लिए, हम बस सामान्य से सामान्य क्षेत्र में जाते हैं और इस संक्रमण वेक्टर को सामान्य करते हैं:

 vec3 normal = normalize( mix( planeNormal, sphereNormal, amount ) ); 

अंत में, हम GLSL में निर्मित डॉट फंक्शन का उपयोग करके लैम्बर्ट फार्मूले के अनुसार कवरेज की गणना कर सकते हैं और अधिकतम सूत्र के साथ नकारात्मक मानों को ठीक कर सकते हैं:

 float light = max( dot( normal, lightPositionNormalized ), 0.0 ); 

वेक्टर शेडर की अंतिम क्रिया से, हम अंतर के माध्यम से प्रकाश की तीव्रता को टुकड़ा करने वाले को स्थानांतरित करेंगे:

 varying float v_light; 

 v_light = light; 

शेडर: फ्रैगमेंट शैडर

टुकड़ा shader बहुत आसान हो जाएगा, सब कुछ भारी शीर्ष shader में महारत हासिल थी।
अंतर से हल्की तीव्रता लें:

 varying float v_light; 

और हम इसका उपयोग रंग गुणांक को संशोधित करने के लिए करते हैं (हम पारदर्शिता नहीं बदलेंगे):

 float r, g, b; r = g = b = v_light; 

और css_ColorMatrix संक्रमण मैट्रिक्स पाने के लिए उनका उपयोग करें:

 css_ColorMatrix = mat4( r, 0.0, 0.0, 0.0, 0.0, g, 0.0, 0.0, 0.0, 0.0, b, 0.0, 0.0, 0.0, 0.0, 1.0 ); 

हमारे मामले में, हमें इसके बराबर एक रंग मिलता है:

 gl_FragColor = vec4( r, g, b, 1.0 ) * sourceColor; 

अंतिम शिखर shader

डाउनलोड

अंतिम टुकड़ा shader

डाउनलोड

सीएसएस शैली

डाउनलोड

कस्टम प्रभाव के कुछ और उदाहरण

• जलाने वाला
• भंग करना
• क्रूड शेडर
• डॉट्स shader
• फ्लिप shader (संस्करण 1)
• फ्लिप shader (संस्करण 2)
• स्फियर शेडर (ग्रह)
• स्फियर शेडर (नक्शा)

डिबगिंग शेड्स

CCSSF में उपयोग किए जाने वाले शेड्स को डीबग करना एक कठिन व्यवसाय है। कम से कम अभी क्रोम कंसोल में कोई त्रुटि लॉग नहीं है (वेबजीएल के विपरीत, जहां आप shader संकलन के परिणाम प्राप्त कर सकते हैं और संभवतः एक त्रुटि या टाइपो पाते हैं)।

मैक पर, आप कंसोल विंडो में प्रदर्शित त्रुटि आउटपुट प्राप्त कर सकते हैं जिसमें से आपने क्रोम लॉन्च किया था, लेकिन विंडोज पर यह कंसोल को नहीं लिखा गया है।

हाल ही में दोस्तों @aerotwist और @brendankenny द्वारा बनाए गए Sublime पाठ संपादक के लिए GL shader सत्यापन प्लगइन का उपयोग करना संभव समाधान है।

Shader प्रोफाइलिंग

दुर्भाग्य से, जैसे WebGL में, GPU पर क्या होता है, यह देखने का कोई तरीका नहीं है: S साइड।
फिर भी, कुछ ऐसे ट्रिक्स हैं, जिनका उपयोग करके आप शेडर्स के काम के बारे में कुछ आंतरिक जानकारी प्राप्त कर सकते हैं।
उदाहरण के लिए, यदि आप यह पता लगाना चाहते हैं कि क्या आपके प्रभाव की क्रिया खंडित छायादार से बंधी है, तो DOM तत्व का आकार बदलने का प्रयास करें यह देखने के लिए कि क्या यह छोटे तत्वों पर बेहतर काम करता है।
फुल-स्क्रीन तत्वों पर लागू होने वाले प्रभावों से बचने की कोशिश करें। यह अनुत्पादक होगा और पृष्ठ बनाते समय एक अड़चन हो सकती है।
यदि आप यह देखना चाहते हैं कि क्या आपके प्रभाव का असर वर्टेक्स शेड्स से जुड़ा हुआ है, तो इसे एक अलग मोज़ेक के साथ ग्रिड पर आज़माएं।

याद रखें कि यदि आप एक ही पृष्ठ पर बड़े मोज़ाइक वाले कई तत्वों पर प्रभाव लागू करते हैं, तो आप बहुत जल्दी त्रिकोण के कुल काउंटर को बढ़ा सकते हैं।

उपयोगी लिंक

• फ़िल्टर प्रभाव विनिर्देश
• GLSL विनिर्देश
• समग्र और सम्मिश्रण विनिर्देश
• सीएसएस संक्रमण विनिर्देश
• CSS विनिर्देशन को बदल देती है
• छाता WebKit मुद्दा ट्रैकिंग सीएसएस कार्यान्वयन कार्यान्वयन प्रगति
• एडोब कस्टम सीएसएस फ़िल्टर प्रभाव उदाहरण
• प्रस्तुत है CSS shaders: वेब के लिए सिनेमाई प्रभाव
• WebGL त्वरित संदर्भ कार्ड (उपयोगी GLSL संदर्भ शामिल है)
• जीएलएसएल सैंडबॉक्स
• CSS Shaders वेबलॉग के साथ कार्यान्वित किया गया

सामग्री

• मल्लाह 1 द्वारा ज्यूपिटर क्लोज-अप
• बृहस्पति की बनावट
• Google मैप्स से पृथ्वी
• फ़िल्टर प्रभाव कल्पना से आरेख