लेआउट के लिए Shader प्रोग्रामिंग का परिचय

WebGL लगभग लंबे समय से है, कई लेख shaders के बारे में लिखे गए हैं, पाठों की एक श्रृंखला है। लेकिन अधिकांश भाग के लिए, वे लेआउट डिजाइनर के लिए बहुत जटिल हैं। यह कहना और भी बेहतर है कि वे बड़ी मात्रा में जानकारी को कवर करते हैं, जो गेम इंजन डेवलपर को लेआउट डिजाइनर की बजाय चाहिए। वे तुरंत एक जटिल दृश्य, एक कैमरा, लाइट बनाने के साथ शुरू करते हैं ... एक नियमित साइट पर, तस्वीरों के साथ एक जोड़ी प्रभाव बनाने के लिए, यह सब ज्ञान बेमानी है। नतीजतन, लोग बहुत जटिल वास्तु संरचनाएं बनाते हैं और सार कार्यों में बहुत सरल के लिए लंबे, लंबे शेड्स लिखते हैं।

इस सब ने उन शेड्स के साथ काम करने के उन पहलुओं के लिए एक परिचय दिया जो साइट पर चित्रों के साथ विभिन्न 2d प्रभाव बनाने के लिए लेआउट डिजाइनर के लिए उपयोगी होने की सबसे अधिक संभावना है। बेशक, इस तथ्य के लिए समायोजित किया गया है कि वे स्वयं अपेक्षाकृत कम ही इंटरफ़ेस डिज़ाइन में उपयोग किए जाते हैं। हम तीसरे पक्ष के पुस्तकालयों के बिना शुद्ध जेएस में एक प्रारंभिक टेम्पलेट बनाएंगे और पिक्सेल बदलाव के आधार पर कुछ लोकप्रिय प्रभाव बनाने के विचारों पर विचार करेंगे, जो कि एसवीजी पर करना मुश्किल है, लेकिन साथ ही साथ वे आसानी से shaders का उपयोग करके कार्यान्वित किए जाते हैं।

यह माना जाता है कि पाठक पहले से ही canvas से परिचित है, यह बताता है कि वेबजीएल क्या है, और गणित का न्यूनतम ज्ञान है। कुछ बिंदुओं को सरल रूप से वर्णित किया जाएगा, अकादमिक रूप से नहीं, ताकि उनके साथ काम करने के लिए प्रौद्योगिकियों की व्यावहारिक समझ प्रदान की जा सके, न कि उनके आंतरिक रसोई या सीखने के लिए पूर्ण सिद्धांत। इसके लिए स्मार्ट किताबें हैं।

यह तुरंत ध्यान दिया जाना चाहिए कि कोडपैन के लेख में एकीकृत संपादकों में जो कुछ भी किया गया है उसके प्रदर्शन को प्रभावित करने की क्षमता है। तो एक टिप्पणी लिखने से पहले कि आपकी मैकबुक पर कुछ धीमा हो रहा है, सुनिश्चित करें कि समस्या उनसे नहीं आती है।

मुख्य विचार

एक shader क्या है?

एक टुकड़ा shader क्या है? यह अनिवार्य रूप से एक छोटा कार्यक्रम है। यह anvas पर प्रत्येक पिक्सेल के लिए निष्पादित किया जाता है। यदि हमारे पास आकार 1000x500px canvas एक canvas , तो यह प्रोग्राम 500,000 बार निष्पादित करेगा, जो हर बार इसके इनपुट मापदंडों के रूप में प्राप्त होता है, पिक्सेल के निर्देशांक जिसके लिए यह वर्तमान में चल रहा है। यह सब समानांतर धागे की एक किस्म में GPU पर होता है। केंद्रीय प्रोसेसर पर, ऐसी गणना में अधिक समय लगेगा।

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

हमारे कार्य के संदर्भ में, निम्नलिखित निम्नलिखित हैं:

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

यह एक बहुत ही सरल वर्णन है, लेकिन यह स्पष्ट होना चाहिए कि कौन क्या करता है।

वाक्यविन्यास के बारे में थोड़ा

शेड्स GLSL - OpenGL Shading Language में लिखे गए हैं। यह भाषा C के समान है। यहाँ संपूर्ण सिंटासिस और मानक विधियों का वर्णन करने का कोई मतलब नहीं है, लेकिन आप हमेशा धोखा पत्र का उपयोग कर सकते हैं:

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

जीएलएसएल में मुख्य प्रकार के चर बल्कि अप्रमाणित हैं - void , bool , int , float ... यदि आपने किसी सी-लाइक भाषा के साथ काम किया है, तो आप उन्हें पहले ही देख चुके हैं। अन्य प्रकार हैं, विशेष रूप से विभिन्न आयामों के वैक्टर में - vec2 , vec3 , vec4 । हम उन्हें लगातार निर्देशांक और रंगों के लिए उपयोग करेंगे। हम जो चर बना सकते हैं, वे तीन महत्वपूर्ण संशोधनों के हैं:

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

छाया में सभी चरों में u / a / v को उपसर्ग करना उपयोगी होता है, जिससे यह समझना आसान हो जाता है कि डेटा क्या आया।

मेरा मानना ​​है कि यह सब व्यावहारिक रूप से देखने के लिए एक व्यावहारिक उदाहरण के लिए आगे बढ़ना है और तुरंत अपनी स्मृति को लोड नहीं करना है।

पाक कला शुरू टेम्पलेट

जेएस के साथ शुरू करते हैं। जैसा कि आमतौर पर canvas साथ काम करते समय होता है, हमें इसकी आवश्यकता होती है और संदर्भ। नमूना कोड लोड नहीं करने के लिए, हम वैश्विक चर बनाएंगे:

 const CANVAS = document.getElementById(IDs.canvas); const GL = canvas.getContext('webgl'); 

ब्राउज़र विंडो को आकार देते समय canvas के आकार और उसके पुनर्गणना से जुड़े क्षण को छोड़ दें। यह कोड उदाहरणों में शामिल है और आमतौर पर बाकी लेआउट पर निर्भर करता है। यह उस पर ध्यान केंद्रित करने के लिए कोई मतलब नहीं है। वेबलॉग के साथ क्रियाओं पर चलते हैं।

 function createProgram() { const shaders = getShaders(); PROGRAM = GL.createProgram(); GL.attachShader(PROGRAM, shaders.vertex); GL.attachShader(PROGRAM, shaders.fragment); GL.linkProgram(PROGRAM); GL.useProgram(PROGRAM); } 

पहले, हम शेड्स संकलित करते हैं (यह थोड़ा कम होगा), एक प्रोग्राम बनाएं, हमारे दोनों शेड्स को इसमें जोड़ें और एक लिंक बनाएं। इस बिंदु पर, शेड्स की संगतता की जाँच की जाती है। अलग-अलग वैरिएबल के बारे में याद रखें जो वर्टेक्स से फ्रेगमेंट में पारित होते हैं? - विशेष रूप से, उनके सेट यहां चेक किए जाते हैं ताकि बाद में इस प्रक्रिया में यह पता न चले कि कुछ प्रेषित या प्रसारित नहीं हुआ है, लेकिन बिल्कुल नहीं। बेशक, यह चेक तार्किक त्रुटियों को प्रकट नहीं करेगा, मुझे लगता है कि यह समझ में आता है।

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

 const vertexPositionAttribute = GL.getAttribLocation(PROGRAM, 'a_position'); 

अगला, हम इंगित करते हैं कि निर्देशांक के साथ एक सरणी इस चर के माध्यम से पारित हो जाएगी (छाया में ही, हम पहले से ही इसे वेक्टर के रूप में देखेंगे)। वेबजीएल स्वतंत्र रूप से यह पता लगाएगा कि हमारे आकृतियों में किन बिंदुओं का समन्वय किस शैडर कॉल को पास करना चाहिए। हम केवल वेक्टर सरणी के लिए पैरामीटर सेट करते हैं जो प्रेषित होंगे: आयाम - 2 (हम निर्देशांक (x,y) ) संचारित करेंगे, इसमें संख्याएँ शामिल हैं और यह सामान्यीकृत नहीं है। अंतिम पैरामीटर हमारे लिए दिलचस्प नहीं हैं, हम डिफ़ॉल्ट रूप से शून्य छोड़ देते हैं।

 GL.enableVertexAttribArray(vertexPositionAttribute); GL.vertexAttribPointer(vertexPositionAttribute, 2, GL.FLOAT, false, 0, 0); 

अब हमारे विमान के कोने के निर्देशांक के साथ बफर बनाएं, जिस पर फिर फोटो प्रदर्शित किया जाएगा। "2d" निर्देशांक स्पष्ट हैं, लेकिन हमारे कार्यों के लिए यह सबसे महत्वपूर्ण बात है।

 function createPlane() { GL.bindBuffer(GL.ARRAY_BUFFER, GL.createBuffer()); GL.bufferData( GL.ARRAY_BUFFER, new Float32Array([ -1, -1, -1, 1, 1, -1, 1, 1 ]), GL.STATIC_DRAW ); } 

यह वर्ग हमारे सभी उदाहरणों के लिए पर्याप्त होगा। STATIC_DRAW मतलब है कि बफर एक बार लोड हो गया है और फिर पुन: उपयोग किया जाएगा। हम फिर से कुछ अपलोड नहीं करेंगे।

स्वयं शेड्स पर जाने से पहले, आइए देखें उनके संकलन:

 function getShaders() { return { vertex: compileShader( GL.VERTEX_SHADER, document.getElementById(IDs.shaders.vertex).textContent ), fragment: compileShader( GL.FRAGMENT_SHADER, document.getElementById(IDs.shaders.fragment).textContent ) }; } function compileShader(type, source) { const shader = GL.createShader(type); GL.shaderSource(shader, source); GL.compileShader(shader); return shader; } 

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

यदि संकलन के दौरान कोई त्रुटि होती है, तो स्क्रिप्ट कंसोल में कुछ चेतावनियों को दिखाते हुए चलती रहेगी जो बहुत अधिक अर्थ नहीं रखती है। संकलन के बाद लॉग को देखना उपयोगी है, ताकि आपके दिमाग को वहाँ संकलित न किया जा सके।

 console.log(GL.getShaderInfoLog(shader)); 

वेबलॉग शेड्स का संकलन करते समय और प्रोग्राम बनाते समय समस्याओं को ट्रैक करने के लिए कई अलग-अलग विकल्प प्रदान करता है, लेकिन व्यवहार में यह पता चलता है कि वास्तविक समय में हम वैसे भी कुछ भी ठीक नहीं कर सकते हैं। तो अक्सर हम विचार "गिर गया - फिर गिर गया" द्वारा निर्देशित किया जाएगा और हम अतिरिक्त चेक का एक गुच्छा के साथ कोड लोड नहीं होगा।

चलिए हम खुद शादियों की ओर बढ़ते हैं

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

अधिक या कम सार्थक चर नामों के साथ shader कोड लिखने का प्रयास करें। नेटवर्क पर आपको ऐसे उदाहरण मिलेंगे जहाँ निरंतर पाठ की 200 लाइनों के लिए जोरदार गणित के साथ कार्य एक-अक्षर चर से इकट्ठा किए जाएंगे, लेकिन सिर्फ इसलिए कि किसी को इसका मतलब यह नहीं है कि यह दोहराने के लायक है। इस तरह का दृष्टिकोण "जीएल के साथ काम करने की विशिष्टता" नहीं है, यह पिछली शताब्दी के लोगों द्वारा लिखे गए कोड के स्रोत कोड का एक सामान्य प्रतिलिपि-पेस्ट है जो उनके युवाओं में चर नामों की लंबाई पर प्रतिबंध था।

सबसे पहले, शीर्ष shader। निर्देशांक (x,y) साथ एक 2d वेक्टर को a_position विशेषता चर में स्थानांतरित किया जाएगा, जैसा कि हमने कहा। शेडर को चार वैल्यू (x,y,z,w) वेक्टर वापस करना चाहिए। यह अंतरिक्ष में कुछ भी स्थानांतरित नहीं करेगा, इसलिए z अक्ष पर, हम बस सब कुछ शून्य कर देते हैं और w के मान को मानक इकाई पर सेट करते हैं। यदि आप सोच रहे हैं कि तीन निर्देशांक के बजाय चार क्यों हैं, तो आप "वर्दी निर्देशांक" के लिए नेटवर्क खोज का उपयोग कर सकते हैं।

 <script id='vertex-shader' type='x-shader/x-vertex'> precision mediump float; attribute vec2 a_position; void main() { gl_Position = vec4(position, 0, 1); } </script> 

कार्य का परिणाम एक विशेष चर gl_Position में दर्ज किया गया है। शब्द के पूर्ण अर्थ में शेड्स का return नहीं है, वे अपने काम के सभी परिणामों को इन उद्देश्यों के लिए विशेष रूप से आरक्षित चर में लिखते हैं।

फ्लोट डेटा प्रकार के लिए सटीक कार्य नोट करें। मोबाइल उपकरणों पर कुछ समस्याओं से बचने के लिए, सटीकता हाईप से भी बदतर होनी चाहिए और दोनों शेड्स में समान होनी चाहिए। इसे यहां एक उदाहरण के रूप में दिखाया गया है, लेकिन इस तरह की सुंदरता को पूरी तरह से बंद करने के लिए फोन पर अच्छा अभ्यास है।

टुकड़ा shader हमेशा के साथ शुरू करने के लिए एक ही रंग वापस आ जाएगी। हमारा वर्ग पूरे canvas पर कब्जा कर लेगा, इसलिए वास्तव में यहां हम प्रत्येक पिक्सेल के लिए रंग निर्धारित करते हैं:

 <script id='fragment-shader' type='x-shader/x-fragment'> precision mediump float; #define GOLD vec4(1.0, 0.86, 0.6, 1.0) void main() { gl_FragColor = GOLD; } </script> 

आप रंग का वर्णन करने वाली संख्याओं पर ध्यान दे सकते हैं। यह सभी आरजीबीए टाइपसेटर्स से परिचित है, केवल सामान्यीकृत है। मान 0 से 255 तक पूर्णांक नहीं हैं, लेकिन 0 से 1 तक आंशिक हैं। आदेश समान है।

वास्तविक परियोजनाओं में सभी जादू स्थिरांक के लिए प्रीप्रोसेसर का उपयोग करना न भूलें - यह प्रदर्शन को प्रभावित किए बिना कोड को अधिक समझने योग्य बनाता है (प्रतिस्थापन, सी की तरह, संकलन के दौरान होता है)।

यह प्रीप्रोसेसर के बारे में एक और बात ध्यान देने योग्य है:

विभिन्न पाठों में निरंतर जांच #ifdef GL_ES का उपयोग व्यावहारिक अर्थ से रहित है। आज हमारे ब्राउज़र में, कोई अन्य GL विकल्प मौजूद नहीं है।

लेकिन यह पहले से ही परिणाम को देखने का समय है:

सुनहरा वर्ग इंगित करता है कि शेड उम्मीद के मुताबिक काम कर रहे हैं। तस्वीरों के साथ काम करने के लिए आगे बढ़ने से थोड़ा पहले उनके साथ खेलना समझ में आता है।

धीरे-धीरे और बदलने वाले वैक्टर

आमतौर पर, वेबगेल ट्यूटोरियल ग्रेडिएंट ड्राइंग द्वारा शुरू करते हैं। यह थोड़ा व्यावहारिक अर्थ देता है, लेकिन कुछ बिंदुओं पर ध्यान देना उपयोगी होगा।

 void main() { gl_FragColor = vec4(gl_FragCoord.zxy / 500.0, 1.0); } 

इस उदाहरण में, हम वर्तमान पिक्सेल के निर्देशांक का उपयोग रंग के रूप में करते हैं। आप अक्सर इसे नेट पर उदाहरणों में देखेंगे। दोनों वैक्टर हैं। तो कोई भी एक ढेर में सब कुछ मिश्रण करने के लिए परेशान नहीं करता है। टाइपस्क्रिप्ट इंजीलवादियों के यहाँ हमला होना चाहिए। एक महत्वपूर्ण बिंदु यह है कि हम वेक्टर से निर्देशांक का केवल हिस्सा कैसे प्राप्त करते हैं। गुण .y , .y , .z , .xy , .zy , .xyz , .zyx , .xyzw , आदि। विभिन्न अनुक्रमों में आप एक वेक्टर के तत्वों को दूसरे वेक्टर के रूप में एक निश्चित क्रम में बाहर निकालने की अनुमति देते हैं। बहुत आसानी से लागू किया गया। इसके अलावा, उच्च आयाम के एक वेक्टर को गायब मानों को जोड़कर कम आयाम के वेक्टर से बनाया जा सकता है, जैसा कि हमने किया था।

हमेशा संख्याओं के भिन्नात्मक भाग को स्पष्ट रूप से बताएं। यहां कोई स्वचालित रूपांतरण int -> फ्लोट नहीं है।

वर्दी और समय बीतने के साथ

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

 GL.getUniformLocation(PROGRAM, 'u_time') 

फिर हम उन्हें प्रत्येक फ्रेम से पहले मान सेट कर सकते हैं। जैसे कि वैक्टर के साथ, यहाँ कई समान विधियाँ हैं, जो शब्द के साथ शुरू uniform , तब वेरिएबल का आयाम (संख्याओं के लिए 1, 2, 3 या 4 वैक्टर के लिए) और टाइप (f - फ्लोट, i - int, v - वेक्टर) होता है। ।

 function draw(timeStamp) { GL.uniform1f(GL.getUniformLocation(PROGRAM, 'u_time'), timeStamp / 1000.0); GL.drawArrays(GL.TRIANGLE_STRIP, 0, 4); window.requestAnimationFrame(draw); } 

वास्तव में, हमें इंटरफेस में हमेशा 60fps की आवश्यकता नहीं होती है। यह अनुरोध करने के लिए एक मंदी जोड़ने के लिए काफी संभव हैअनिमेशनफ्रेम और redrawing फ्रेम की आवृत्ति को कम करने के लिए।

उदाहरण के लिए, हम भरण रंग को बदल देंगे। acos , सभी बुनियादी गणितीय कार्य उपलब्ध हैं - sin , cos , tan , asin , acos , acos , pow , exp , log , acos , acos और अन्य। हम उनमें से दो का उपयोग करेंगे।

 uniform float u_time; void main() { gl_FragColor = vec4( abs(sin(u_time)), abs(sin(u_time * 3.0)), abs(sin(u_time * 5.0)), 1.0); } 

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

लेकिन पर्याप्त सार उदाहरण, चलो चित्रों का उपयोग करने के लिए आगे बढ़ते हैं।

एक बनावट में एक चित्र लोड हो रहा है

चित्र का उपयोग करने के लिए, हमें एक बनावट बनाने की आवश्यकता है, जो तब हमारे विमान पर प्रदान की जाएगी। आरंभ करने के लिए, छवि को स्वयं लोड करें:

 function createTexture() { const image = new Image(); image.crossOrigin = 'anonymous'; image.onload = () => { // .... }; image.src = 'example.jpg'; } 

इसके लोड होने के बाद, एक बनावट बनाएं और इंगित करें कि यह नंबर 0 पर जाएगा। वेबजीएल में, एक ही समय में कई बनावट हो सकते हैं और हमें स्पष्ट रूप से संकेत देना चाहिए कि बाद के आदेश किससे संबंधित होंगे। हमारे उदाहरणों में, केवल एक बनावट होगी, लेकिन हम अभी भी स्पष्ट रूप से इंगित करते हैं कि यह शून्य होगा।

 const texture = GL.createTexture(); GL.activeTexture(GL.TEXTURE0); GL.bindTexture(GL.TEXTURE_2D, texture); 

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

 GL.pixelStorei(GL.UNPACK_FLIP_Y_WEBGL, true); GL.texImage2D(GL.TEXTURE_2D, 0, GL.RGB, GL.RGB, GL.UNSIGNED_BYTE, image); 

सिद्धांत रूप में, बनावट चौकोर होना चाहिए। अधिक सटीक रूप से, उनके पास दो की शक्ति के बराबर आकार भी होना चाहिए - 32px, 64px, 128px, आदि। लेकिन हम सभी समझते हैं कि कोई भी फ़ोटो संसाधित नहीं करेगा और वे हर बार अलग-अलग अनुपात में होंगे। यदि canvas आकार में पूरी तरह से फिट बैठता है तो भी यह त्रुटियां पैदा करेगा। इसलिए, हम छवि के चरम पिक्सेल के साथ पूरे स्थान को विमान के किनारों पर भरते हैं। यह मानक अभ्यास है, हालांकि यह थोड़ा बैसाखी लगता है।

 GL.texParameteri(GL.TEXTURE_2D, GL.TEXTURE_WRAP_S, GL.CLAMP_TO_EDGE); GL.texParameteri(GL.TEXTURE_2D, GL.TEXTURE_WRAP_T, GL.CLAMP_TO_EDGE); GL.texParameteri(GL.TEXTURE_2D, GL.TEXTURE_MIN_FILTER, GL.LINEAR); 

यह बनावट को रंगों में स्थानांतरित करने के लिए बनी हुई है। यह डेटा सभी के लिए सामान्य है, इसलिए हम uniform संशोधक का उपयोग करते हैं।

 GL.uniform1i(GL.getUniformLocation(PROGRAM, 'u_texture'), 0); 

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

 GL.uniform1f(GL.getUniformLocation(PROGRAM, 'u_canvas_size'), Math.max(CANVAS.height, CANVAS.width)); 

और निर्देशांक को इसमें विभाजित करें:

 uniform sampler2D u_texture; uniform float u_canvas_size; void main() { gl_FragColor = texture2D(u_texture, gl_FragCoord.xy / u_canvas_size); } 

इस बिंदु पर, आप चाय को रोक सकते हैं और पी सकते हैं। हमने पूरी तैयारी की है और विभिन्न प्रभाव पैदा करने की दिशा में आगे बढ़ रहे हैं।

प्रभाव

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

कम कोड का मतलब है कम समस्याएं। और इसे पढ़ना आसान है। हमेशा अनावश्यक कार्यों के लिए नेटवर्क पर पाए जाने वाले शेड्स की जांच करें। ऐसा होता है कि आप आधा कोड निकाल सकते हैं और कुछ भी नहीं बदलेगा।

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

 gl_FragColor = texture2D(u_texture, gl_FragCoord.xy / u_canvas_size + sin(u_time + gl_FragCoord.y)); 

परिणाम अजीब है। जाहिर है, सब कुछ बहुत अधिक आयाम के साथ चलता है। सब कुछ कुछ संख्या से विभाजित करें:

 gl_FragColor = texture2D(u_texture, gl_FragCoord.xy / u_canvas_size + sin(u_time + gl_FragCoord.y) / 250.0); 

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

 gl_FragColor = texture2D(u_texture, gl_FragCoord.xy / u_canvas_size + sin(u_time + gl_FragCoord.y / 30.0) / 250.0); 

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

कुटिल दर्पण, साइकिल और प्रयोग

सोच अच्छी है। हां, कुछ समस्याओं को हल करने के लिए तैयार एल्गोरिदम हैं जिन्हें हम बस ले सकते हैं और उपयोग कर सकते हैं। , .

, " ", . क्या करें?

, , ? . , rand() - . , , , , . . . , . . . -, . . , , , . , "":

 float rand(vec2 seed) { return fract(sin(dot(seed, vec2(12.9898,78.233))) * 43758.5453123); } 

, , , NVIDIA ATI . , .

, , :

 gl_FragColor = texture2D(u_texture, gl_FragCoord.xy / u_canvas_size + rand(gl_FragCoord.xy) / 100.0); 

:

 gl_FragColor = texture2D(u_texture, gl_FragCoord.xy / u_canvas_size + rand(gl_FragCoord.xy + vec2(sin(u_time))) / 250.0); 

, , :

, . , , . — . यह कैसे करना है? . .

0 1, - . 5 — . , .

 vec2 texture_coord = gl_FragCoord.xy / u_canvas_size; gl_FragColor = texture2D(u_texture, texture_coord + rand(floor(texture_coord * 5.0) + vec2(sin(u_time))) / 100.0); 

, - . - . , , . ?

, , , - . , . , .. -. , . . , , . .

sin cos , . . .

 gl_FragColor = texture2D(u_texture, texture_coord + vec2( noise(texture_coord * 10.0 + sin(u_time + texture_coord.x * 5.0)) / 10.0, noise(texture_coord * 10.0 + cos(u_time + texture_coord.y * 5.0)) / 10.0)); 

. fract . 1 1 — :

 float noise(vec2 position) { vec2 block_position = floor(position); float top_left_value = rand(block_position); float top_right_value = rand(block_position + vec2(1.0, 0.0)); float bottom_left_value = rand(block_position + vec2(0.0, 1.0)); float bottom_right_value = rand(block_position + vec2(1.0, 1.0)); vec2 computed_value = fract(position); // ... } 

. WebGL smoothstep , :

 vec2 computed_value = smoothstep(0.0, 1.0, fract(position)); 

, . , X :

 return computed_value.x; 

… , , ...

- , , ... .

y — , . ?

 return length(computed_value); 

.

. 0.5 — .

 return mix(top_left_value, top_right_value, computed_value.x) + (bottom_left_value - top_left_value) * computed_value.y * (1.0 - computed_value.x) + (bottom_right_value - top_right_value) * computed_value.x * computed_value.y - 0.5; 

:

, , , .

, , . - .

uniform-, . 0 1, 0 — , 1 — .

 uniform float u_intensity; 

:

 gl_FragColor = texture2D(u_texture, texture_coord + vec2(noise(texture_coord * 10.0 + sin(u_time + texture_coord.x * 5.0)) / 10.0, noise(texture_coord * 10.0 + cos(u_time + texture_coord.y * 5.0)) / 10.0) * u_intensity); 

, .

( 0 1), .

, , , . — requestAnimationFrame. , FPS.

, . uniform-.

 document.addEventListener('mousemove', (e) => { let rect = CANVAS.getBoundingClientRect(); MOUSE_POSITION = [ e.clientX - rect.left, rect.height - (e.clientY - rect.top) ]; GL.uniform2fv(GL.getUniformLocation(PROGRAM, 'u_mouse_position'), MOUSE_POSITION); }); 

, . — , .

 void main() { vec2 texture_coord = gl_FragCoord.xy / u_canvas_size; vec2 direction = u_mouse_position / u_canvas_size - texture_coord; float dist = distance(gl_FragCoord.xy, u_mouse_position) / u_canvas_size; if (dist < 0.4) { gl_FragColor = texture2D(u_texture, texture_coord + u_intensity * direction * dist * 1.2 ); } else { gl_FragColor = texture2D(u_texture, texture_coord); } } 

- . .

. , .

. Glitch- , SVG. . — . ? — , , , .

 float random_value = rand(vec2(texture_coord.y, u_time)); if (random_value < 0.05) { gl_FragColor = texture2D(u_texture, vec2(texture_coord.x + random_value / 5.0, texture_coord.y)); } else { gl_FragColor = texture2D(u_texture, texture_coord); } 

" ?" — , . .

. — , .

 float random_value = rand(vec2(floor(texture_coord.y * 20.0), u_time)); 

. , :

 gl_FragColor = texture2D(u_texture, vec2(texture_coord.x + random_value / 4.0, texture_coord.y)) + vec4(vec3(random_value), 1.0); 

. — . , — .r , .g , .b , .rg , .rb , .rgb , .bgr , ... .

:

 float random_value = u_intensity * rand(vec2(floor(texture_coord.y * 20.0), u_time)); 

परिणाम क्या है?

, , . , , — .