शुरुआती के लिए 3 डी गेम शेड्स: प्रभाव

[ पहला भाग ]

मूल बातें से निपटा, लेख के इस भाग में हम वस्तु रूपरेखा, खिल, SSAO, कलंक, क्षेत्र की गहराई, पिक्सेलकरण, और अन्य जैसे प्रभाव को लागू करते हैं।

रूपरेखा

दृश्य की ज्यामिति के चारों ओर आकृति बनाना खेल को एक अनोखा रूप देता है जो कॉमिक्स या कार्टून जैसा दिखता है।

डिफ्यूज़ मटीरियल

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

uniform struct { vec4 diffuse ; } p3d_Material; out vec4 fragColor; void main() { vec3 diffuseColor = p3d_Material.diffuse.rgb; fragColor = vec4(diffuseColor, 1); } 

यह एक छोटा सा टुकड़ा shader है जो एक ज्यामिति सामग्री के फैलाने वाले रंग को एक फ्रेम बफर बनावट में प्रस्तुत करता है। फ्रेम बफर से यह फैलाना रंग बनावट पथ shader के लिए इनपुट बनावट होगी।


यह फ्रेम बफर से सामग्री के फैलाने वाले रंग की बनावट है, जो उन रंगों को प्रदर्शित करता है जिन्हें हम ब्लेंडर में सेट करते हैं। समोच्च शेडर दृश्य में किनारों को पहचानेंगे और उन्हें रंग देंगे।

यह ध्यान दिया जाना चाहिए कि सामग्री के फैलाना रंग काम नहीं करेगा यदि दृश्य के कुछ हिस्सों में सामग्री का अपना फैलाना रंग नहीं है।

किनारों का निर्माण

किनारे बनाना GIMP में एज रिकग्निशन फिल्टर का उपयोग करने के समान है।

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

 // ... uniform sampler2D materialDiffuseTexture; // ... vec2 texSize = textureSize(materialDiffuseTexture, 0).xy; vec2 texCoord = gl_FragCoord.xy; // ... 

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

  // ... int separation = 1; // ... 

अपने स्वाद के अनुरूप separation को अनुकूलित किया जा सकता है। अधिक से अधिक पृथक्करण, किनारों या रेखाओं को मोटा करता है।

  // ... float threshold = 0; // ... vec4 mx = vec4(0); vec4 mn = vec4(1); int x = -1; int y = -1; for (int i = 0; i < 9; ++i) { vec4 color = texture ( materialDiffuseTexture , (texCoord + (vec2(x, y) * separation)) / texSize ); mx = max(color, mx); mn = min(color, mn); x += 1; if (x >= 2) { x = -1; y += 1; } } float alpha = ((mx.r + mx.g + mx.b) / 3) - ((mn.r + mn.g + mn.b) / 3); if (alpha > threshold) { alpha = 1; } // ... 

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

  // ... vec3 lineRgb = vec3(0.012, 0.014, 0.022); // ... vec4 lineColor = vec4(lineRgb, alpha); // ... fragColor = lineColor; // ... 

इस अंतर का उपयोग आउटपुट रंग के अल्फा चैनल में किया जाता है। यदि कोई अंतर नहीं है, तो किनारे या रेखा नहीं खींची जाती है। यदि कोई अंतर है, तो बढ़त तैयार है।

  // ... float threshold = 0; // ... if (alpha > threshold) { alpha = 1; } // ... 

थ्रेशोल्ड मान के साथ प्रयोग करने का प्रयास करें। अब यह शून्य है। कोई भी नॉनज़ोरो वैल्यू एक बढ़त बन जाती है; यह छोटे अंतर के साथ आने वाली बनावट के लिए विशेष रूप से उपयोगी है। शोर आने वाली बनावट के मामले में, आपको आमतौर पर केवल बड़े अंतर के लिए रूपरेखा बनाने की आवश्यकता होती है।

स्रोत कोड

• main.cxx
• base.vert
• basic.vert
• सामग्री diffuse.frag
• outline.frag

कोहरा

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

 // ... uniform struct p3d_FogParameters { vec4 color ; float start ; float end ; } p3d_Fog; // ... 

पांडा 3 डी में एक सुविधाजनक डेटा संरचना है जिसमें सभी कोहरे के पैरामीटर शामिल हैं, लेकिन आप उन्हें मैन्युअल रूप से अपनी छाया में स्थानांतरित कर सकते हैं।

  // ... float fogIntensity = clamp ( ( p3d_Fog.end - vertexPosition.y) / ( p3d_Fog.end - p3d_Fog.start) , 0 , 1 ); fogIntensity = 1 - fogIntensity; // ... 

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

  // ... fragColor = mix ( outputColor , p3d_Fog.color , fogIntensity ); // ... 

कोहरे की चमक के आधार पर, हम आउटपुट रंग के साथ कोहरे के रंग को मिलाते हैं। जैसे-जैसे fogIntensity एकता के fogIntensity आती है, कम और कम outputColor -रंग और अधिक से अधिक कोहरे का रंग दिखाई देगा। जब fogIntensity एकता तक पहुंचती है, तो केवल कोहरे का रंग बना रहेगा।

कोहरे पर कोहरे

 // ... uniform sampler2D positionTexture; // ... vec4 position = texture(positionTexture, texCoord / texSize); float fogIntensity = clamp ( ( p3d_Fog.end - position.y) / ( p3d_Fog.end - p3d_Fog.start) , 0 , 1 ); fogIntensity = 1 - fogIntensity; vec4 lineWithFogColor = mix ( lineColor , p3d_Fog.color , fogIntensity ); fragColor = vec4(lineWithFogColor.rgb, alpha); // ... 

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

positionTexture एक फ्रेम बफर टेक्सचर है जिसमें व्यू स्पेस के वर्टिकल के पोजिशन होते हैं। जब हम SSAO shader को कार्यान्वित करेंगे, तो आप इसके बारे में जानेंगे।

स्रोत कोड

• main.cxx
• base.vert
• basic.vert
• base.frag
• outline.frag

फूल

दृश्य में खिलने से प्रकाश मॉडल का एक ठोस भ्रम पैदा हो सकता है। प्रकाश उत्सर्जक वस्तुएं अधिक ठोस हो जाती हैं, और प्रकाश प्रतिबिंब अतिरिक्त चमक प्राप्त करते हैं।

  //... float separation = 3; int samples = 15; float threshold = 0.5; float amount = 1; // ... 

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

  // ... int size = samples; int size2 = size * size; int x = 0; int y = 0; // ... float value = 0; vec4 result = vec4(0); vec4 color = vec4(0); // ... for (int i = 0; i < size2; ++i) { // ... } // ... 

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

  // ... color = texture ( bloomTexture , ( gl_FragCoord.xy + vec2(x * separation, y * separation) ) / texSize ); value = ((0.3 * color.r) + (0.59 * color.g) + (0.11 * color.b)); if (value < threshold) { color = vec4(0); } result += color; // ... 

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

खिड़की के भीतर सभी नमूनों से गुजरते हुए, यह result में उनके सभी मूल्यों को जमा करता है।

  // ... result = result / size2; // ... 

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


यहाँ आप ब्लूम एल्गोरिथ्म को निष्पादित करने की प्रक्रिया देखते हैं।

स्रोत कोड

• main.cxx
• basic.vert
• bloom.frag

स्क्रीन स्पेस एंबिएंट इंक्लूजन (SSAO)

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

ध्यान दें कि शीर्षक में "स्क्रीन स्पेस" शब्द पूरी तरह से सही नहीं है, क्योंकि स्क्रीन स्पेस में सभी गणना नहीं की जाती हैं।

आवक डेटा

SSAO shader को निम्नलिखित इनपुट की आवश्यकता होगी।

• देखने की जगह में शीर्ष पदों के क्षेत्र।
• देखने की जगह में कोने के लिए सामान्य वैक्टर।
• स्पर्शरेखा स्थान में नमूना वैक्टर।
• स्पर्शरेखा स्थान में शोर वैक्टर।
• कैमरा लेंस पर प्रक्षेपण मैट्रिक्स।

स्थिति

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

 PT(Texture) depthTexture = new Texture("depthTexture"); depthTexture->set_format(Texture::Format::F_depth_component32); PT(GraphicsOutput) depthBuffer = graphicsOutput->make_texture_buffer("depthBuffer", 0, 0, depthTexture); depthBuffer->set_clear_color(LVecBase4f(0, 0, 0, 0)); NodePath depthCameraNP = window->make_camera(); DCAST(Camera, depthCameraNP.node())->set_lens(window->get_camera(0)->get_lens()); PT(DisplayRegion) depthBufferRegion = depthBuffer->make_display_region(0, 1, 0, 1); depthBufferRegion->set_camera(depthCameraNP); 

यदि आप गहराई बफर का उपयोग करने का निर्णय लेते हैं, तो यहां बताया गया है कि आप इसे पांडा 3 डी में कैसे कॉन्फ़िगर कर सकते हैं।

 in vec4 vertexPosition; out vec4 fragColor; void main() { fragColor = vertexPosition; } 

यहाँ एक बफर बफर बनावट में देखने की जगह में शीर्ष पदों को प्रस्तुत करने के लिए एक साधारण shader है। एक अधिक कठिन कार्य फ्रेम बफर की बनावट को समायोजित करना है ताकि इसके द्वारा प्राप्त टुकड़े वेक्टर के घटक अंतराल [0, 1] तक सीमित न हों, और प्रत्येक में पर्याप्त उच्च सटीकता (पर्याप्त रूप से बड़ी संख्या में बिट्स) हो। उदाहरण के लिए, यदि किसी प्रकार का प्रक्षेपित शीर्ष स्थान स्थिति <-139.444444566, 0.00000034343, 2.5> , तो आप इसे बनावट के रूप में <0.0, 0.0, 1.0> नहीं बचा सकते।

  // ... FrameBufferProperties fbp = FrameBufferProperties::get_default(); // ... fbp.set_rgba_bits(32, 32, 32, 32); fbp.set_rgb_color(true); fbp.set_float_color(true); // ... 

यहाँ एक उदाहरण कोड है जो वर्टेक्स पोजीशन को संचय करने के लिए एक फ्रेम बफर बनावट तैयार करता है। उसे लाल, हरे, नीले और अल्फा के लिए 32 बिट्स की आवश्यकता है, इसलिए वह अंतराल द्वारा मानों के प्रतिबंध को निष्क्रिय कर देता है [0, 1] । set_rgba_bits(32, 32, 32, 32) लिए कॉल बिट वॉल्यूम सेट करता है और प्रतिबंध को अक्षम करता है।

  glTexImage2D ( GL_TEXTURE_2D , 0 , GL_RGB32F , 1200 , 900 , 0 , GL_RGB , GL_FLOAT , nullptr ); 

यहाँ OpenGL पर एक समान कॉल है। GL_RGB32F बिट्स सेट करता है और प्रतिबंध को अक्षम करता है।

यदि रंगीन बफर में एक निश्चित अल्पविराम होता है, तो प्रारंभिक समीकरणों के अंतिम और अंतिम मानों के साथ-साथ मिश्रण सूचकांकों की गणना करने से पहले, मिश्रित समीकरण की गणना [0, 1] या [−1, 1] तक सीमित की जाती है, जो सामान्यीकृत रंगीन बफ़र्स के लिए होती है। यदि रंग बफर में एक अस्थायी बिंदु है, तो प्रतिबंध नहीं मिला है।

स्रोत

यहाँ आप कोने की स्थिति देखते हैं; y अक्ष ऊपर है।

याद रखें कि PAND3D एक अक्ष को इंगित करते हुए z अक्ष को परिभाषित करता है, जबकि OpenGL में y अक्ष ऊपर दिखता है। पैंडर 3 डी में पोजिशन shader उर्ध्व z के साथ कोने की स्थिति प्रदर्शित करता है
gl-coordinate-system default पैरामीटर कॉन्फ़िगर किया गया है।

normals

SSAO shader में प्राप्त नमूनों के सही अभिविन्यास के लिए, हमें कोने के मानदंड की आवश्यकता होती है। नमूना कोड गोलार्ध में वितरित कई नमूने वाले वैक्टर उत्पन्न करता है, लेकिन आप गोले का उपयोग कर सकते हैं और मानदंडों की आवश्यकता की समस्या को पूरी तरह से हल कर सकते हैं।

 in vec3 vertexNormal; out vec4 fragColor; void main() { vec3 normal = normalize(vertexNormal); fragColor = vec4(normal, 1); } 

स्थिति shader की तरह, सामान्य shader बहुत सरल है। मानदंडों को मानदंडों को सामान्य करने के लिए याद रखें और याद रखें कि वे देखने की जगह में हैं।


कोने के मानदंड यहां दिखाए गए हैं; y अक्ष ऊपर है।

याद रखें कि पांडा 3 डी z अक्ष को उर्ध्वाधर वेक्टर, और ओपनजीएल को y अक्ष मानता है। सामान्य shader z अक्ष को इंगित करने के साथ कोने की स्थिति को प्रदर्शित करता है, क्योंकि gl-coordinate-system default 3D में ग्ल gl-coordinate-system default कॉन्फ़िगर किया गया है।

नमूने

किसी भी टुकड़े के लिए परिवेश रोड़ा मूल्य निर्धारित करने के लिए, हमें आस-पास के क्षेत्र का नमूना लेना होगा।

  // ... for (int i = 0; i < numberOfSamples; ++i) { LVecBase3f sample = LVecBase3f ( randomFloats(generator) * 2.0 - 1.0 , randomFloats(generator) * 2.0 - 1.0 , randomFloats(generator) ).normalized(); float rand = randomFloats(generator); sample[0] *= rand; sample[1] *= rand; sample[2] *= rand; float scale = (float) i / (float) numberOfSamples; scale = lerp(0.1, 1.0, scale * scale); sample[0] *= scale; sample[1] *= scale; sample[2] *= scale; ssaoSamples.push_back(sample); } // ... 

नमूना कोड एक गोलार्ध में वितरित 64 यादृच्छिक नमूने उत्पन्न करता है। ये ssaoSamples SSAO shader को पास कर दिए जाएंगे।

  LVecBase3f sample = LVecBase3f ( randomFloats(generator) * 2.0 - 1.0 , randomFloats(generator) * 2.0 - 1.0 , randomFloats(generator) * 2.0 - 1.0 ).normalized(); 

यदि आप अपने नमूनों को एक क्षेत्र में वितरित करना चाहते हैं, तो यादृच्छिक घटक z के अंतराल को बदल दें ताकि यह शून्य से एक में बदल जाए।

शोर

  // ... for (int i = 0; i < 16; ++i) { LVecBase3f noise = LVecBase3f ( randomFloats(generator) * 2.0 - 1.0 , randomFloats(generator) * 2.0 - 1.0 , 0.0 ); ssaoNoise.push_back(noise); } // ... 

नमूना क्षेत्र को अच्छी तरह से कवर करने के लिए, हमें शोर वैक्टर उत्पन्न करना होगा। ये शोर वैक्टर सतह के शीर्ष के चारों ओर नमूनों को घुमा सकते हैं।

परिवेश रोड़ा

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


यहाँ आपको सतह के ऊपर स्थान दिखाई देता है जो रोड़ा के लिए नमूना है।

  // ... float radius = 1.1; float bias = 0.026; float lowerRange = -2; float upperRange = 2; // ... 

कुछ अन्य तकनीकों की तरह, SSAO shader में कई नियंत्रण पैरामीटर हैं जिन्हें वांछित उपस्थिति प्राप्त करने के लिए बदला जा सकता है। पूर्वाग्रह नमूना से कैमरे की दूरी पर जोड़ा जाता है। इस पैरामीटर का उपयोग दाग से निपटने के लिए किया जा सकता है। त्रिज्या नमूना स्थान के कवरेज क्षेत्र को बढ़ाता या घटाता है। लोअररेंज और अपररेंज आपके द्वारा चुने गए किसी भी मान के लिए कारक मीट्रिक की मानक सीमा को [0, 1] से बदल देते हैं। सीमा बढ़ाकर, आप इसके विपरीत बढ़ा सकते हैं।

  // ... vec4 position = texture(positionTexture, texCoord); vec3 normal = texture(normalTexture, texCoord).xyz; int noiseX = int(gl_FragCoord.x - 0.5) % 4; int noiseY = int(gl_FragCoord.y - 0.5) % 4; vec3 random = noise[noiseX + (noiseY * 4)]; // ... 

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

  // ... vec3 tangent = normalize(random - normal * dot(random, normal)); vec3 binormal = cross(normal, tangent); mat3 tbn = mat3(tangent, binormal, normal); // ... 

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

  // ... float occlusion = NUM_SAMPLES; for (int i = 0; i < NUM_SAMPLES; ++i) { // ... } // ... 

एक मैट्रिक्स होने के बाद, शेडर लूप के सभी नमूनों के माध्यम से लूप कर सकता है, बिना किसी की संख्या को घटाए।

  // ... vec3 sample = tbn * samples[i]; sample = position.xyz + sample * radius; // ... 

मैट्रिक्स का उपयोग करके, नमूना को शीर्ष / खंड स्थिति के बगल में रखें और इसे त्रिज्या द्वारा स्केल करें।

  // ... vec4 offset = vec4(sample, 1.0); offset = lensProjection * offset; offset.xyz /= offset.w; offset.xyz = offset.xyz * 0.5 + 0.5; // ... 

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

 -1 * 0.5 + 0.5 = 0 1 * 0.5 + 0.5 = 1 

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

  // ... vec4 offsetPosition = texture(positionTexture, offset.xy); float occluded = 0; if (sample.y + bias <= offsetPosition.y) { occluded = 0; } else { occluded = 1; } // ... 

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

  // ... float intensity = smoothstep ( 0.0 , 1.0 , radius / abs(position.y - offsetPosition.y) ); occluded *= intensity; occlusion -= occluded; // ... 

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

  // ... occlusion /= NUM_SAMPLES; // ... fragColor = vec4(vec3(occlusion), position.a); // ... 

अंतराल [0, NUM_SAMPLES] से अंतराल को [0, 1] परिवर्तित करने के लिए नमूनों की संख्या से ओवरलैप की संख्या को विभाजित करें। शून्य का मतलब पूर्ण रोड़ा है, इकाइयों का अर्थ है कोई रोड़ा नहीं। अब विखंडन मीट्रिक को खंड रंग में असाइन करें, और यह बात है।

कृपया ध्यान दें कि उदाहरण कोड में, अल्फा चैनल को ओवरलैपिंग पृष्ठभूमि से बचने के लिए फ्रेम बफर से स्थिति बनावट का अल्फा मान सौंपा गया है।

धुंधला (धुंधला)

SSAO फ्रेम बफर की बनावट थोड़ा शोर है, इसलिए आपको इसे चौरसाई के लिए धुंधला करना चाहिए।

  // ... for (int i = 0; i < size2; ++i) { x = size - xCount; y = yCount - size; result += texture ( ssaoTexture , texCoord + vec2(x * parameters.x, y * parameters.x) ).rgb; xCount -= 1; if (xCount < countMin) { xCount = countMax; yCount -= 1; } } result = result / size2; // ... 

SSAO ब्लर शेडर एक नियमित बॉक्स ब्लर है। ब्लूमर शैडर की तरह, यह आने वाली बनावट पर एक खिड़की खींचता है और प्रत्येक टुकड़े को अपने पड़ोसियों के मूल्यों के साथ औसत करता है।

ध्यान दें कि पैरामीटर। X एक अलग पैरामीटर है।

परिवेश का रंग

  // ... vec2 ssaoBlurTexSize = textureSize(ssaoBlurTexture, 0).xy; vec2 ssaoBlurTexCoord = gl_FragCoord.xy / ssaoBlurTexSize; float ssao = texture(ssaoBlurTexture, ssaoBlurTexCoord).r; vec4 ambient = p3d_Material.ambient * p3d_LightModel.ambient * diffuseTex * ssao; // ... 

SSAO के लिए अंतिम चुनौती फिर से प्रकाश गणना में है। यहां हम देखते हैं कि बनावट SSAO बनावट बफर में कैसे रोड़ा पाया जाता है और परिवेश प्रकाश की गणना में शामिल है।

स्रोत कोड

• main.cxx
• base.vert
• basic.vert
• position.frag
• normal.frag
• ssao.frag
• blur.frag

क्षेत्र की गहराई

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

ध्यान में

पहला चरण दृश्य को पूरी तरह से फोकस में प्रस्तुत कर रहा है। इसे फ्रेम बफर टेक्सचर पर रेंडर करें। यह फ़ील्ड बफर की गहराई के लिए इनपुट मानों में से एक होगा।

ध्यान से बाहर

  // ... vec4 result = vec4(0); for (int i = 0; i < size2; ++i) { x = size - xCount; y = yCount - size; result += texture ( blurTexture , texCoord + vec2(x * parameters.x, y * parameters.x) ); xCount -= 1; if (xCount < countMin) { xCount = countMax; yCount -= 1; } } result = result / size2; // ... 

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

ध्यान दें कि पैरामीटर। X एक अलग पैरामीटर है।

मिश्रण

  // ... float focalLengthSharpness = 100; float blurRate = 6; // ... 

आप अपने स्वाद के लिए इन विकल्पों को अनुकूलित कर सकते हैं। focalLengthSharpness प्रभावित करता है कि कैसे दृश्य फोकल लंबाई में defocused होगा। focalLengthSharpness छोटी focalLengthSharpness , focalLengthSharpness ही ज्यादा focalLengthSharpness सीन फोकल लेंथ पर होंगे। धुंधला हो जाना फोकल लंबाई से दूर जाने पर दृश्य को धुंधला करने की गति को प्रभावित करता है। blurRate जितना छोटा होगा, फोकस बिंदु से दूर जाते समय दृश्य उतना ही धुंधला होगा।

  // ... vec4 focusColor = texture(focusTexture, texCoord); vec4 outOfFocusColor = texture(outOfFocusTexture, texCoord); // ... 

हमें फ़ोकस में और डिफोकस की गई छवि में रंगों की आवश्यकता होगी।

  // ... vec4 position = texture(positionTexture, texCoord); // ... 

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

  // ... float blur = clamp ( pow ( blurRate , abs(position.y - focalLength.x) ) / focalLengthSharpness , 0 , 1 ); // ... fragColor = mix(focusColor, outOfFocusColor, blur); // ... 

और यहां भ्रम की स्थिति पैदा होती है। एक के करीब blur, जितना अधिक यह उपयोग करेगा outOfFocusColor। शून्य के मूल्य का blurमतलब है कि यह टुकड़ा पूरी तरह से ध्यान में है। blur >= 1इस टुकड़े के साथ पूरी तरह से defocused है।

स्रोत कोड

• main.cxx
• basic.vert
• blur.frag
• गहराई के- field.frag

posterization

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

  // ... float levels = 8; // ... 

आप इस पैरामीटर के साथ प्रयोग कर सकते हैं। यह जितना बड़ा होगा, उतने ही अधिक फूल बने रहेंगे।

  // ... vec4 texColor = texture(posterizeTexture, texCoord); // ... 

हमें आने वाले रंग की आवश्यकता होगी।

  // ... vec3 grey = vec3((texColor.r + texColor.g + texColor.b) / 3.0); vec3 grey1 = grey; grey = floor(grey * levels) / levels; texColor.rgb += (grey - grey1); // ... 

मैंने इस तरह की पदावनति नहीं देखी है। इसकी जाँच करने के बाद, मैंने देखा कि यह पारंपरिक तरीकों की तुलना में अधिक सुंदर परिणाम बनाता है। रंग पैलेट को कम करने के लिए, पहले ग्रेस्केल में रंग को एक मूल्य में परिवर्तित करें। हम रंग को एक स्तर पर बांधकर अलग करते हैं। हम ग्रेस्केल में विच्छेदित मूल्य और ग्रेस्केल में गैर-विवेकी मूल्य के बीच अंतर की गणना करते हैं। इस अंतर को इनपुट रंग में जोड़ें। यह अंतर वह राशि है जिसके द्वारा ग्रेस्केल में एक विवेकपूर्ण मूल्य प्राप्त करने के लिए रंग को बढ़ाना / घटाना चाहिए।

  // ... fragColor = texColor; // ... 

टुकड़ा के रंग को इनपुट रंग के मूल्य को निर्दिष्ट करने के लिए मत भूलना।

सेल शेडिंग

चित्रांकन चित्र को सीएल शेडिंग की तरह बना सकता है, क्योंकि सेल शेडिंग विसरित फैलाने की प्रक्रिया है और रंगों को असतत रंगों में परिवर्तित करती है। हम सामान्य नक्शे के बारीक विवरण और छोटे मूल्य के बिना केवल ठोस फैल रंगों का उपयोग करना चाहते हैं levels।

स्रोत कोड

• main.cxx
• basic.vert
• posterize.frag

पिक्सेलेशन

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

  // ... int pixelSize = 5; // ... 

आप पिक्सेल आकार को स्वयं समायोजित कर सकते हैं। यह जितना बड़ा होगा, छवि उतनी ही कठिन होगी।

  // ... float x = int(gl_FragCoord.x) % pixelSize; float y = int(gl_FragCoord.y) % pixelSize; x = floor(pixelSize / 2.0) - x; y = floor(pixelSize / 2.0) - y; x = gl_FragCoord.x + x; y = gl_FragCoord.y + y; // ... 

यह तकनीक प्रत्येक टुकड़े को अपने निकटतम गैर-अतिव्यापी पिक्सेल-आकार की खिड़की के केंद्र में संलग्न करती है। ये विंडो इनकमिंग टेक्सचर के शीर्ष पर होती हैं। खिड़की के केंद्र में टुकड़े उनकी खिड़की में अन्य टुकड़ों के रंग का निर्धारण करते हैं।

  // ... fragColor = texture(pixelizeTexture, vec2(x, y) / texSize); // ... 

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

स्रोत कोड

• main.cxx
• basic.vert
• pixelize.frag

पैना

पैनापन प्रभाव (पैनापन) छवि के किनारों पर विपरीतता को बढ़ाता है। यह बहुत काम आता है जब ग्राफिक्स बहुत नरम हो जाते हैं।

  // ... float amount = 0.8; // ... 

मूल्य बदलकर, हम परिणाम के तेज के परिमाण को नियंत्रित कर सकते हैं। यदि मान शून्य है, तो छवि नहीं बदलेगी। नकारात्मक मूल्यों के साथ, छवि अजीब लगने लगती है।

  // ... float neighbor = amount * -1; float center = amount * 4 + 1; // ... 

आसन्न अंशों को गुणा किया जाता है amount * -1। वर्तमान टुकड़ा द्वारा गुणा किया जाता है amount * 4 + 1।

  // ... vec3 color = texture(sharpenTexture, vec2(gl_FragCoord.x + 0, gl_FragCoord.y + 1) / texSize).rgb * neighbor + texture(sharpenTexture, vec2(gl_FragCoord.x - 1, gl_FragCoord.y + 0) / texSize).rgb * neighbor + texture(sharpenTexture, vec2(gl_FragCoord.x + 0, gl_FragCoord.y + 0) / texSize).rgb * center + texture(sharpenTexture, vec2(gl_FragCoord.x + 1, gl_FragCoord.y + 0) / texSize).rgb * neighbor + texture(sharpenTexture, vec2(gl_FragCoord.x + 0, gl_FragCoord.y - 1) / texSize).rgb * neighbor ; // ... 

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

  // ... fragColor = vec4(color, texture(sharpenTexture, texCoord).a); // ... 

यह राशि टुकड़े का अंतिम रंग है।

स्रोत कोड

• main.cxx
• basic.vert
• sharpen.frag

फिल्म का दाना

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

ध्यान दें कि फिल्म अनाज आमतौर पर अंतिम प्रभाव है जो प्रदर्शित होने से पहले फ्रेम पर लागू होता है।

मूल्य

  // ... float amount = 0.1; // ... 

amountफिल्म अनाज की दृश्यता को नियंत्रित करता है। उच्च मूल्य, तस्वीर में अधिक "बर्फ"।

यादृच्छिक चमक

 // ... uniform float osg_FrameTime; //... float toRadians = 3.14 / 180; //... float randomIntensity = fract ( 10000 * sin ( ( gl_FragCoord.x + gl_FragCoord.y * osg_FrameTime ) * toRadians ) ); // ... 

कोड का यह टुकड़ा मूल्य को समायोजित करने के लिए आवश्यक यादृच्छिक चमक की गणना करता है।

 Time Since F1 = 00 01 02 03 04 05 06 07 08 09 10 Frame Number = F1 F3 F4 F5 F6 osg_FrameTime = 00 02 04 07 08 

पांडा 3 डी osg_FrameTime द्वारा प्रदान किया गया मूल्य । एक फ्रेम टाइम एक टाइमस्टैम्प है जिसमें यह जानकारी होती है कि पहले फ्रेम के बाद कितने सेकंड बीत चुके हैं। नमूना कोड फिल्म के दाने को चेतन करने के लिए इसका उपयोग करता है, जो osg_FrameTimeप्रत्येक फ्रेम में अलग होगा।

  // ... ( gl_FragCoord.x + gl_FragCoord.y * 8009 // Large number here. // ... 

स्थिर अनाज के लिए, फिल्मों को osg_FrameTimeबड़ी संख्या में प्रतिस्थापित किया जाना चाहिए । पैटर्न देखने से बचने के लिए, आप विभिन्न संख्याओं को आज़मा सकते हैं।

  // ... * sin ( ( gl_FragCoord.x + gl_FragCoord.y * someNumber // ... 

फिल्म अनाज के अंक, या स्पॉट बनाने के लिए, दोनों निर्देशांक, और x, और y का उपयोग किया जाता है। यदि आप x का उपयोग करते हैं, तो केवल ऊर्ध्वाधर रेखाएँ प्रदर्शित की जाएंगी, यदि आप y का उपयोग करते हैं, तो केवल क्षैतिज रेखाएँ प्रदर्शित होंगी।

कोड में, विकर्ण समरूपता को नष्ट करने के लिए एक समन्वय दूसरे से गुणा किया जाता है।


बेशक, आप समन्वय गुणक से छुटकारा पा सकते हैं, और पूरी तरह से स्वीकार्य बारिश प्रभाव प्राप्त कर सकते हैं।

ध्यान दें कि वर्षा प्रभाव को चेतन करने के लिए, आउटपुट sinको गुणा करें osg_FrameTime।

एक्स और वाई के साथ प्रयोग बारिश की दिशा बदलने के लिए समन्वय करता है। नीचे की ओर बौछार के लिए, केवल x समन्वय छोड़ें।

 input = (gl_FragCoord.x + gl_FragCoord.y * osg_FrameTime) * toRadians frame(10000 * sin(input)) = fract(10000 * sin(6.977777777777778)) = fract(10000 * 0.6400723818964882) = 

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

 fract(10000 * sin(6.977777777777778)) = fract(10000 * 0.6400723818964882) = fract(6400.723818964882) = 0.723818964882 

sinसाथ fractमें एक छद्म यादृच्छिक संख्या जनरेटर के रूप में भी उपयोग किया जाता है।

 >>> [floor(fract(4 * sin(x * toRadians)) * 10) for x in range(0, 10)] [0, 0, 1, 2, 2, 3, 4, 4, 5, 6] >>> [floor(fract(10000 * sin(x * toRadians)) * 10) for x in range(0, 10)] [0, 4, 8, 0, 2, 1, 7, 0, 0, 5] 

पहले संख्याओं की पहली पंक्ति देखें, और फिर दूसरी पर। प्रत्येक पंक्ति नियतात्मक है, लेकिन पैटर्न दूसरे की तुलना में दूसरे में कम ध्यान देने योग्य है। इसलिए, इस तथ्य के बावजूद कि आउटपुट fract(10000 * sin(...))निर्धारक है, पैटर्न को बहुत कमजोर माना जाता है।


यहां हम देखते हैं कि कारक sinपहले 1, फिर 10, फिर 100 और फिर 1000 है।

जैसा कि आउटपुट मानों के गुणक में वृद्धि होती है, sinपैटर्न कम ध्यान देने योग्य हो जाता है। इस कारण से, कोड sinको 10,000 से गुणा किया जाता है।

खुशबू का रंग

  // ... vec2 texSize = textureSize(filmGrainTexture, 0).xy; vec2 texCoord = gl_FragCoord.xy / texSize; vec4 color = texture(filmGrainTexture, texCoord); // ... 

टुकड़े के निर्देशांक को UV-निर्देशांक में बदलें। इन यूवी-निर्देशांक का उपयोग करके, हम वर्तमान टुकड़े के लिए बनावट के रंग की तलाश करते हैं।

  // ... amount *= randomIntensity; color.rgb += amount; // ... 

मूल्य को यादृच्छिक चमक में बदलें और इसे रंग में जोड़ें।

  // ... fragColor = color; // ... 

टुकड़े का रंग निर्धारित करें, और यह बात है

स्रोत कोड

• main.cxx
• basic.vert
• फिल्म grain.frag

धन्यवाद

• Kiwi Soda Font