🐔 👏🏾 👩‍👧‍👦 2 डी में डायनामिक लाइटिंग और असीमित संख्या में फ्री-फॉर्म स्रोत 👩🏼‍🎨 🧗 🌊

साइकिल निर्माण के विषय को जारी रखते हुए, मैं साझा करना चाहता हूं कि मैंने पिक्सेल कला खिलौने में प्रकाश व्यवस्था कैसे की।
इस पद्धति की एक विशेषता यह है कि ये प्रकाश स्रोत मात्रा या आकार द्वारा सीमित नहीं हैं ।

परंपरागत रूप से, एल्गोरिथ्म को दो घटकों में विभाजित किया जा सकता है: 2 डी वस्तुओं का प्रकाश और प्रकाश स्रोतों की प्रस्तुति का रूप।

प्रकाश

कवरेज का हिस्सा इस पोस्ट में लिखा गया है।

स्पॉइलर

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

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

अगला, उसके लिए एक ऊंचाई का नक्शा तैयार किया गया है। मेरे मामले में, स्प्राइट की व्याख्या एक ऊंचाई के नक्शे के रूप में की जा सकती है। एक ऊंचाई का नक्शा क्या है और आम तौर पर सामान्य रूप से टक्कर मानचित्रण के बारे में, आप यहां पढ़ सकते हैं।
ऊंचाई के नक्शे का उपयोग करके, आप पहले से ही एक सामान्य नक्शा बना सकते हैं। कई उपयोगिताएं हैं जो ऐसा कर सकती हैं। मैंने GIMP के लिए प्लगइन का उपयोग किया (यहां कुछ अच्छे हैं , लेकिन ऐसा लगता है कि मानक रिपॉजिटरी में ऑबंट्स हैं)।

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

कोड

// varying vec4 texCoord; void main(){ gl_Position = gl_ModelViewProjectionMatrix*gl_Vertex; texCoord = gl_MultiTexCoord0; } // uniform sampler2D colorMap; uniform sampler2D normalMap; varying vec4 texCoord; uniform vec2 light; uniform vec2 screen; uniform float dist; void main() { vec3 normal = texture2D(normalMap, texCoord.st).rgb; normal = 2.0*normal-1.0; vec3 n = normalize(normal); vec3 l = normalize(vec3((gl_FragCoord.xy-light.xy)/screen, dist)); float a = dot(n, l); gl_FragColor = a*texture2D(colorMap, texCoord.st); }

प्रकाश स्रोत

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

प्रकाश स्रोतों की संख्या केवल लोहे द्वारा सीमित है। उदाहरण के लिए, 1000 प्रकाश स्रोत 1000 स्प्राइट हैं। 1000 स्प्राइट्स का प्रतिपादन करना मोबाइल GPU के लिए भी मुश्किल नहीं होगा, और क्या किसी 2D दृश्य में 1000 स्रोतों का होना आवश्यक है?
प्रकाश स्रोत अलग-अलग रंगों और पारदर्शिता के विभिन्न डिग्री के हो सकते हैं - क्योंकि यह एक सामान्य बनावट है
प्रकाश स्रोतों का आकार कोई भी हो सकता है

उदाहरण के लिए, लावा के साथ एक दृश्य का एक लाइटमैप:

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

v [cx] [cy] .x = p [cx] [cy] .x - p [cx + 1] [cyx .x
v [cx] [cy] .y = p [cx] [cy] .y - p [cx] [+ + 1] .y

जहां cx, साइबर प्रश्न में पिक्सेल के निर्देशांक हैं
हालांकि, दो आसन्न पिक्सल के बीच का अंतर बेहद छोटा हो सकता है, इसलिए वेक्टर की लंबाई भी छोटी और सटीक नहीं हो सकती है, इसलिए इस मामले में प्रकाश "फ्लैट" लग सकता है। मुझे इस समस्या के दो समाधान मिले: एक निश्चित कारक द्वारा परिणाम को गुणा करें या एक दूसरे से 1 या अधिक पिक्सेल द्वारा पिक्सेल लें। दूसरे मामले में, हम प्रकाश विस्तार का त्याग करते हैं। अंत में, मैंने इन दोनों तरीकों को संयोजित किया और अंतिम सूत्र इस तरह दिखता है:

v [cx] [cy] .x = (p [cx-d / 2] [cy] .x - p [cx + d / 2] [cy] .x) * k
v [cx] [cy] .y = (p [cx] [cy-d / 2] .y - p [cx] [cy + d / 2] .y) * k

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

शेडर

 // varying vec4 texCoord; varying vec4 nmTexCoord; varying vec2 lightMapTexCoord; //    varying vec2 lightMapTexCoordX1; //    varying vec2 lightMapTexCoordX2; //    varying vec2 lightMapTexCoordY1; //    varying vec2 lightMapTexCoordY2; //    //,  ,     .    uniform vec2 fieldSize; //    const float spriteSize = 16.0; //      void main() { gl_Position = gl_ModelViewProjectionMatrix*gl_Vertex; texCoord = gl_MultiTexCoord0; nmTexCoord = gl_MultiTexCoord1; //     . lightMapTexCoordX1 = vec2(gl_Vertex.x/(fieldSize.x-1.0/spriteSize), gl_Vertex.y/fieldSize.y); lightMapTexCoordX2 = vec2(gl_Vertex.x/(fieldSize.x+1.0/spriteSize), gl_Vertex.y/fieldSize.y); lightMapTexCoordY1 = vec2(gl_Vertex.x/fieldSize.x, gl_Vertex.y/(fieldSize.y-1.0/spriteSize)); lightMapTexCoordY2 = vec2(gl_Vertex.x/fieldSize.x, gl_Vertex.y/(fieldSize.y+1.0/spriteSize)); lightMapTexCoord = vec2(gl_Vertex.x/fieldSize.x, gl_Vertex.y/fieldSize.y); } //--------------------------------------------------------------------------------------------------------------- // varying vec4 texCoord; varying vec4 nmTexCoord; varying vec2 lightMapTexCoord; varying vec2 lightMapTexCoordX1; varying vec2 lightMapTexCoordX2; varying vec2 lightMapTexCoordY1; varying vec2 lightMapTexCoordY2; uniform sampler2D colorMap; //         uniform sampler2D lightMap; uniform float ambientIntensity; //  uniform float lightIntensity; //    const float shadowIntensity = 8.0; //     const vec3 av = vec3(0.33333); //     void main() { vec4 lmc = texture2D(lightMap, lightMapTexCoord)*2,0; //   .    ,          0.5,   1.0 ().         , ,    .    ,         . // x  y -      float x = (dot(texture2D(lightMap, lightMapTexCoordX1).rgb, av)- dot(texture2D(lightMap, lightMapTexCoordX2).rgb, av))*shadowIntensity; float y = (dot(texture2D(lightMap, lightMapTexCoordY2).rgb, av)- dot(texture2D(lightMap, lightMapTexCoordY1).rgb, av))*shadowIntensity; float br = dot(lmc.rgb, av); //      -   vec3 l = vec3(x, y, br); //    ,  z    ,        ,    ,     l = normalize(l)*br; //       vec3 normal = 2.0*texture2D(colorMap, nmTexCoord.st).rgb-1.0; float a = dot(normal, l)*lightIntensity; a = max(a, 0.0); vec4 c = texture2D(colorMap, texCoord.st); c = a*min(c, lmc)+ambientIntensity*c; //         float m = 0.0; //        ,    ,          (.    gif  ).    . m = max(m, cr); m = max(m, cg); m = max(m, cb); gl_FragColor = c+max(0.0, m-1.0); //    . }

प्रभाव को प्रदर्शित करने वाला वीडियो: एक प्रकाश स्रोत मनमाना आकार का एक स्प्राइट है , प्रत्येक लावा कण एक प्रकाश स्रोत है ।

2 डी में डायनामिक लाइटिंग और असीमित संख्या में फ्री-फॉर्म स्रोत

प्रकाश

प्रकाश स्रोत

More articles: