हम साइट को सजाने के लिए शेडो में वोरोनोई के मोज़ेक, पिक्सेलेशन और ज्यामितीय मास्क का उपयोग करते हैं

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

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

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

लेकिन चलिए शुरू करते हैं ...

शेड के साथ काम करने के लिए टेम्पलेट

उन लोगों के लिए, जिन्होंने पिछले लेख को नहीं पढ़ा है, हमने शेडर्स के साथ काम करने के लिए यह खाका बनाया है:

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

मौज़ेक

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

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

• विमान पर बिंदुओं का एक सेट लें।
• विमान के प्रत्येक बिंदु के लिए, इस सेट से उसके निकटतम बिंदु को ढूंढें।
• बस इतना ही। विमान को बहुभुज क्षेत्रों में विभाजित किया गया है, जिनमें से प्रत्येक को सेट में एक बिंदु से निर्धारित किया जाता है।

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

function createPoints() { for (let i = 0; i < NUMBER_OF_POINTS; i++) { POINTS.push([Math.random(), Math.random()]); } } 

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

 for (let i = 0; i < NUMBER_OF_POINTS; i++) { GL.uniform2fv(GL.getUniformLocation(PROGRAM, 'u_points[' + i + ']'), POINTS[i]); } 

आज, हम अक्सर वास्तविक ब्राउज़र में क्या उम्मीद की जाती है और क्या होता है, के बीच असंगति की समान समस्याओं का सामना करेंगे। आमतौर पर WebGL ट्यूटोरियल्स THREE.js का उपयोग करते हैं और यह लाइब्रेरी अपने आप में कुछ गंदगी छिपाती है, जैसा कि एक बार jQuery ने अपने कार्यों में किया था, लेकिन यदि आप इसे हटाते हैं, तो यह वास्तव में आपके मस्तिष्क को नुकसान पहुंचाता है।

टुकड़ा shader में, हमारे पास अंकों के लिए एक सरणी चर है। हम केवल एक निश्चित लंबाई के एरेज़ बना सकते हैं। चलो 10 अंकों के साथ शुरू करते हैं:

 #define NUMBER_OF_POINTS 10 uniform vec2 u_points[NUMBER_OF_POINTS]; 

सुनिश्चित करें कि यह सब बिंदुओं के स्थानों में हलकों को खींचकर काम कर रहा है। डिबगिंग के दौरान अक्सर विभिन्न ज्यामितीय प्राइमिटिव्स की ऐसी ड्राइंग का उपयोग किया जाता है - वे स्पष्ट रूप से दिखाई देते हैं और आप तुरंत समझ सकते हैं कि क्या स्थित है और यह कहां घूम रहा है।

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

 for (int i = 0; i < NUMBER_OF_POINTS; i++) { if (distance(texture_coord, u_points[i]) < 0.02) { gl_FragColor = WHITE; break; } } 

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

 function movePoints(timeStamp) { if (timeStamp) { for (let i = 0; i < NUMBER_OF_POINTS; i++) { POINTS[i][0] += Math.sin(i * timeStamp / 5000.0) / 500.0; POINTS[i][1] += Math.cos(i * timeStamp / 5000.0) / 500.0; } } } 

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

 float min_distance = 1.0; int area_index = 0; for (int i = 0; i < NUMBER_OF_POINTS; i++) { float current_distance = distance(texture_coord, u_points[i]); if (current_distance < min_distance) { min_distance = current_distance; area_index = i; } } 

प्रदर्शन का परीक्षण करने के लिए, हम फिर से चमकीले रंगों में सब कुछ पेंट करते हैं:

 gl_FragColor = texture2D(u_texture, texture_coord); gl_FragColor.g = abs(sin(float(area_index))); gl_FragColor.b = abs(sin(float(area_index))); 

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

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

 int number_of_near_points = 0; for (int i = 0; i < NUMBER_OF_POINTS; i++) { if (distance(texture_coord, u_points[i]) < min_distance + EPSILON) { number_of_near_points++; } } if (number_of_near_points > 1) { gl_FragColor.rgb = vec3(1.0); } 

आपको कुछ इस तरह से मिलना चाहिए:

यह अभी भी एक मसौदा है, हम अभी भी इसे अंतिम रूप देंगे। लेकिन अब विमान के इस तरह के अलगाव की सामान्य अवधारणा स्पष्ट है।

तस्वीरों से मोज़ेक

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

 function createTextures() { for (let i = 0; i < URLS.textures.length; i++) { createTexture(i); } } function createTexture(index) { const image = new Image(); image.crossOrigin = 'anonymous'; image.onload = () => { const texture = GL.createTexture(); GL.activeTexture(GL['TEXTURE' + index]); GL.bindTexture(GL.TEXTURE_2D, texture); GL.pixelStorei(GL.UNPACK_FLIP_Y_WEBGL, true); GL.texImage2D(GL.TEXTURE_2D, 0, GL.RGB, GL.RGB, GL.UNSIGNED_BYTE, image); 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); GL.uniform1i(GL.getUniformLocation(PROGRAM, 'u_textures[' + index + ']'), index); }; image.src = URLS.textures[index]; } 

कुछ भी असामान्य नहीं हुआ, हमने सिर्फ शून्य को index पैरामीटर से बदल दिया और मौजूदा कोड को तीन बनावटों को लोड करने के लिए पुन: उपयोग किया। Shader में, हमारे पास अब एक बनावट है:

 #define NUMBER_OF_TEXTURES 3 uniform sampler2D u_textures[NUMBER_OF_TEXTURES]; 

अब हम तीन बनावटों में से एक का चयन करने के लिए पहले से सहेजे गए क्षेत्र संख्या का उपयोग कर सकते हैं। लेकिन ...

लेकिन उससे पहले मैं एक छोटा सा विषयांतर करना चाहूंगा। पीड़ादायक के बारे में। वाक्य-विन्यास के बारे में। आधुनिक जावास्क्रिप्ट (सशर्त रूप से ES6 +) एक अच्छी भाषा है। यह आपको अपने विचारों को व्यक्त करने की अनुमति देता है क्योंकि वे उत्पन्न होते हैं, किसी भी विशिष्ट प्रोग्रामिंग प्रतिमान तक रूपरेखा को सीमित नहीं करता है, हमारे लिए कुछ बिंदुओं को पूरा करता है और आपको इसके कार्यान्वयन पर विचार पर अधिक ध्यान केंद्रित करने की अनुमति देता है। निर्माता के लिए - यह बात है कुछ लोगों का मानना ​​है कि यह बहुत अधिक स्वतंत्रता देता है और उदाहरण के लिए टाइपस्क्रिप्ट पर स्विच करता है। शुद्ध C एक अधिक कठोर भाषा है। यह बहुत कुछ भी अनुमति देता है, आप इस पर कुछ भी कर सकते हैं, लेकिन जेएस के बाद इसे थोड़ा अजीब, पुराने जमाने या कुछ के रूप में माना जाता है। फिर भी, वह अभी भी अच्छा है। ब्राउज़रों में मौजूद GLSL सिर्फ कुछ है। न केवल यह सी की तुलना में परिमाण का एक क्रम है, इसमें अभी भी कई परिचित ऑपरेटरों और सिंटैक्स के निर्माण का अभाव है। WebGL के लिए अधिक या कम जटिल शेड लिखते समय यह संभवतः सबसे बड़ी समस्या है। कोड के रूप में बदल जाने वाले आतंक के पीछे, मूल एल्गोरिथ्म पर एक नज़र रखना बहुत मुश्किल हो सकता है। कुछ कोडर सोचते हैं कि जब तक वे सी नहीं सीखते, उनके लिए शेड्स का रास्ता बंद है। तो: C का ज्ञान यहाँ विशेष रूप से मदद नहीं करेगा। यहाँ किसी तरह की अपनी दुनिया है। पागलपन, डायनासोर और बैसाखी की दुनिया।

मैं एक नंबर वाले तीन टेक्सट को कैसे चुन सकता हूं - एरिया नंबर। शेष संख्या को बनावट की संख्या से विभाजित करने से ध्यान में आता है। महान विचार है। केवल % ऑपरेटर, जो हाथ पहले से ही लिखते हैं, यहां नहीं है। इस तथ्य को समझने की धारणा चित्र द्वारा अच्छी तरह वर्णित है:

बेशक आप कहते हैं, "हाँ, कोई समस्या नहीं है, एक mod कार्य है - चलो इसे लेते हैं!" लेकिन यह पता चला है कि वह दो पूर्णांकों को स्वीकार नहीं करती है, केवल भिन्नात्मक। ठीक है, ठीक है, उनमें से एक float बनाते हैं। हमें एक float भी मिलता है, लेकिन हमें एक int जरूरत है। आपको सब कुछ वापस बदलना होगा, अन्यथा संकलन त्रुटि होने की एक गैर-नकली संभावना है।

 int texture_index = int(mod(float(area_index), float(NUMBER_OF_TEXTURES))); 

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

ठीक है, चलो इसे अभी के लिए छोड़ दें। बस चयनित बनावट से वांछित पिक्सेल का रंग लें और इसे चर gl_FragColor । तो? क्या हमने पहले ही ऐसा कर लिया था? और फिर यह बिल्ली फिर से दिखाई देती है। किसी एरे को एक्सेस करने पर आप नॉन-कंटीन्यू का इस्तेमाल नहीं कर सकते। और जो हमने गणना की वह अब स्थिर नहीं है। बा-डम-टॉस !!!

आपको कुछ इस तरह करना होगा:

 if (texture_index == 0) { gl_FragColor = texture2D(u_textures[0], texture_coord); } else if (texture_index == 1) { gl_FragColor = texture2D(u_textures[1], texture_coord); } else if (texture_index == 2) { gl_FragColor = texture2D(u_textures[2], texture_coord); } 

सहमत, ऐसा कोड govnokod.ru के लिए एक सीधी सड़क है, लेकिन फिर भी, यह किसी भी तरह से अलग है। यहां तक ​​कि switch-case भी कम से कम किसी भी तरह से इस अपमान को स्वीकार नहीं करता है। वास्तव में एक और, कम स्पष्ट बैसाखी है जो एक ही समस्या को हल करती है:

 for (int i = 0; i < 3; i++) { if (texture_index == i) { gl_FragColor = texture2D(u_textures[i], texture_coord); } } 

साइकिल काउंटर, जो एक से बढ़ते हैं, संकलक एक स्थिर के रूप में गिन सकते हैं। लेकिन यह बनावट के एक सरणी के साथ काम नहीं करता था - अंतिम क्रोम में, एक त्रुटि यह कहते हुए पॉप अप हुई कि यह एक बनावट के साथ ऐसा करना असंभव था। एक संख्या के साथ, इसने काम किया। लगता है कि क्यों यह एक सरणी के साथ काम करता है, लेकिन दूसरे के साथ नहीं? अगर आपको लगता है कि जेएसएल में टाइप कास्टिंग सिस्टम जादू से भरा था - जीएलएसएल में "स्थिर - स्थिर नहीं" प्रणाली को छाँटें। मजेदार बात यह है कि परिणाम इस्तेमाल किए गए वीडियो कार्ड पर भी निर्भर करते हैं, इसलिए एनवीआईडीआईए ग्राफिक्स कार्ड पर काम करने वाली मुश्किल बैसाखी एएमडी पर बहुत अच्छी तरह से टूट सकती है।

संकलक के बारे में मान्यताओं के आधार पर ऐसे निर्णयों से बचना बेहतर है। वे टूट जाते हैं और परीक्षण करना मुश्किल होता है।

दुःख दुःख है। लेकिन, अगर हम दिलचस्प चीजें करना चाहते हैं, तो हमें इस सब से अमल करने और जारी रखने की जरूरत है।

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

 for (let i = 0; i < NUMBER_OF_POINTS; i++) { for (let j = i; j < NUMBER_OF_POINTS; j++) { let deltaX = POINTS[i][0] - POINTS[j][0]; let deltaY = POINTS[i][1] - POINTS[j][1]; let distance = Math.sqrt(deltaX * deltaX + deltaY * deltaY); if (distance < 0.1) { POINTS[i][0] += 0.001 * Math.sign(deltaX); POINTS[i][1] += 0.001 * Math.sign(deltaY); POINTS[j][0] -= 0.001 * Math.sign(deltaX); POINTS[j][1] -= 0.001 * Math.sign(deltaY); } } } 

इस दृष्टिकोण के साथ मुख्य समस्या, साथ ही साथ हमने जो छाया में उपयोग किया था, वह सभी बिंदुओं की सभी के साथ तुलना कर रहा है। आपको यह समझने के लिए एक महान गणितज्ञ होने की आवश्यकता नहीं है कि यदि हम 10 अंक नहीं करते हैं तो दूरी की गणना की संख्या अविश्वसनीय होगी, लेकिन 1000. हां, 100 भी सब कुछ धीमा करने के लिए पर्याप्त है। इसलिए, यह केवल कुछ ही अंकों के लिए इसे लागू करने के लिए समझ में आता है।

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

मूली मत बनो, अपने शिल्प के प्रदर्शन की जांच न केवल अपने खनन खेत पर करें, बल्कि साधारण लैपटॉप पर भी करें। उपयोगकर्ता मूल रूप से ही होंगे।

फंक्शन ग्राफ के अनुसार प्लेन का विभाजन

आइए एक विमान को भागों में विभाजित करने के लिए एक और विकल्प देखें। इसके लिए अब बड़ी कंप्यूटिंग शक्ति की आवश्यकता नहीं होगी। मुख्य विचार कुछ गणितीय कार्य करना और उसका ग्राफ बनाना है। परिणामी रेखा बस विमान को दो भागों में विभाजित करेगी। यदि हम फॉर्म y = f(x) फंक्शन का उपयोग करते हैं, तो हमें कट के रूप में विभाजन मिलता है। X को Y से बदलने पर, हम क्षैतिज खंड को ऊर्ध्वाधर में बदल सकते हैं। यदि आप फ़ंक्शन को ध्रुवीय निर्देशांक में लेते हैं, तो आपको कार्टेसियन और इसके विपरीत में सब कुछ अनुवाद करने की आवश्यकता है, लेकिन गणना का सार नहीं बदलेगा। इस मामले में, परिणाम दो भागों में कटौती नहीं है, बल्कि एक छेद में कटौती है। लेकिन हम पहला विकल्प देखेंगे।

प्रत्येक Y के लिए, हम एक ऊर्ध्वाधर खंड बनाने के लिए X के मान की गणना करेंगे। हम इन उद्देश्यों के लिए एक साइन लहर ले सकते हैं, उदाहरण के लिए, लेकिन यह बहुत उबाऊ है। एक बार में कुछ टुकड़े लेना और उन्हें मोड़ना बेहतर होता है।

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

 float time = u_time * SPEED; float x = (sin(texture_coord.y * FREQUENCY) + sin(texture_coord.y * FREQUENCY * 2.1 + time) + sin(texture_coord.y * FREQUENCY * 1.72 + time * 1.121) + sin(texture_coord.y * FREQUENCY * 2.221 + time * 0.437) + sin(texture_coord.y * FREQUENCY * 3.1122 + time * 4.269)) * AMPLITUDE; 

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

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

 if (texture_coord.x - 0.5 > x) { gl_FragColor = texture2D(u_textures[0], texture_coord); } else { gl_FragColor = texture2D(u_textures[1], texture_coord); } 

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

मास्क

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

हम सभी अनावश्यक को हटाते हैं और माउस के निर्देशांक वापस करते हैं। कर्सर स्थान पर केंद्र के साथ एक रेडियल ढाल बनाएं और इसे मास्क के रूप में उपयोग करें। इस उदाहरण में, shader व्यवहार अधिक बारीकी से SVG में मास्क के तर्क से मिलता-जुलता है, पिछले उदाहरणों की तुलना में। हमें mix फंक्शन और डिस्टेंस के कुछ फंक्शन चाहिए। पहले दोनों बनावट से पिक्सेल रंग के मूल्यों को मिलाएगा, तीसरे पैरामीटर के रूप में एक गुणांक (0 से 1 तक) ले रहा है जो यह निर्धारित करता है कि परिणामस्वरूप कौन से मान प्रबल होंगे। हम साइन मॉडुलस को दूरी के एक समारोह के रूप में लेते हैं - यह सिर्फ 0 और 1 के बीच के मूल्य में एक सहज बदलाव देगा।

 gl_FragColor = mix( texture2D(u_textures[0], texture_coord), texture2D(u_textures[1], texture_coord), abs(sin(length(texture_coord - u_mouse_position / u_canvas_size)))); 

बस इतना ही। आइए देखें परिणाम:

एसवीजी पर मुख्य लाभ स्पष्ट है:

एसवीजी के विपरीत, यहां हम विभिन्न गणितीय कार्यों के लिए आसानी से आसानी से ग्रेडिएंट बना सकते हैं, और कई रैखिक ग्रेडिएंट्स से उन्हें इकट्ठा नहीं कर सकते हैं।

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

शैक्षिक उद्देश्यों के लिए, आइए एक और उदाहरण देखें। सबसे पहले, एक सर्कल बनाएं जिसमें बनावट रहेगी जैसा कि यह है:

 gl_FragColor = texture2D(u_textures[0], texture_coord); float dist = distance(texture_coord, u_mouse_position / u_canvas_size); if (dist < 0.3) { return; } 

और बाकी को विकर्ण धारियों से भरें:

 float value = sin((texture_coord.y - texture_coord.x) * 200.0); if (value > 0.0) { gl_FragColor.rgb *= dist; } else { gl_FragColor.rgb *= dist / 10.0; } 

स्वीकृति समान हैं - हम पट्टियों की आवृत्ति बढ़ाने के लिए साइन के लिए पैरामीटर को गुणा करते हैं; प्राप्त मूल्यों को दो भागों में विभाजित करें; प्रत्येक पड़ाव के लिए, हम अपने तरीके से पिक्सेल के रंग को बदलते हैं। यह याद रखना उपयोगी है कि तिरछी रेखाएँ खींचना आमतौर पर X और Y में निर्देशांक जोड़ने से जुड़ा होता है। ध्यान दें कि हम रंग बदलते समय माउस कर्सर की दूरी का भी उपयोग करते हैं, जिससे एक प्रकार की छाया का निर्माण होता है। उसी तरह, आप इसे ज्यामितीय परिवर्तनों के साथ उपयोग कर सकते हैं, हम जल्द ही इसे पिक्सेलेशन के उदाहरण पर देखेंगे। इस बीच, इस shader के परिणाम पर एक नज़र डालें:

सरल और सुंदर।

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

यह एक और विचार को याद रखने योग्य है:

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

लेकिन विमान को भागों में विभाजित करने के लिए वापस।

पिक्सेलेशन

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

 float block_size = abs(sin(u_time)) / 20.0; vec2 block_position = floor(texture_coord / block_size) * block_size; gl_FragColor = ( texture2D(u_textures[0], block_position) + texture2D(u_textures[0], block_position + vec2(1.0, 0.0) * block_size) + texture2D(u_textures[0], block_position + vec2(0.0, 1.0) * block_size) + texture2D(u_textures[0], block_position + vec2(1.0, 1.0) * block_size) ) / 4.0; 

हम फिर से साइन मॉड्यूल के माध्यम से समय-समय पर मापदंडों में से एक को देखते हैं कि यह क्या होता है जब यह बदलता है।

पिक्सेल तरंगें

, .

 float block_size = abs(sin( length(texture_coord - u_mouse_position / u_canvas_size) * 2.0 - u_time)) / 100.0 + 0.001; 

, 0 1; , , , . , .

"" , , -. . " ", , . . — . .

परिणाम

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

PS: , WebGL ( ) ? , , . ?