ओपनजीएल को कई अतिव्यापी वस्तुओं की रूपरेखा मिलती है

मुझे बस अपने ऑन-गोइंग-गेम के लिए एक विचार था, जो कि c ++ में opengl के साथ बनाया गया था: जब खिलाड़ी कुछ जीतता है तो मैं कई ओवरलैपिंग ऑब्जेक्ट पर एक बड़ी रूपरेखा (5-6 पिक्सेल) रखना चाहता हूं।

मैंने सोचा कि स्टैंसिल बफर का उपयोग करने का सबसे अच्छा तरीका है, लेकिन यह कुछ घंटों का है कि मैं स्टैंसिल बफर के कुछ ऑफ-स्क्रीन रेंडर करने की कोशिश कर रहा हूं और मैं किसी भी तरह के परिणाम को प्राप्त नहीं कर सकता। कुछ अन्य तकनीकें हैं!

यह वही है जो मैं पाना चाहता हूं:

यहाँ छवि विवरण दर्ज करें

कोई विचार?

opengl outline

— nkint
स्रोत

किनारे का पता लगाने वाले फिल्टर का उपयोग करें, किनारों को मोटी रंगीन रेखाओं से भरें, फिर आकृतियों की प्रदान की गई छवियों को निकालें और रंगीन लाइनों की परत के ऊपर ओवरले करें?

— शॉटगन निंजा

क्या आप एक बढ़त का पता लगाने फिल्टर के साथ मतलब है? एक shader? एक छवि प्रसंस्करण फ़िल्टर? जैसे opencv (बनावट को प्रस्तुत करना, बनावट पर फ़िल्टर लागू करना, संशोधित बनावट को वापस धकेलना)?

— nkint

मुझे पता नहीं है; मैं 3 डी प्रतिपादन के साथ शुरू करने के लिए बहुत अच्छी तरह से वाकिफ नहीं हूं।

— शॉटगन निंजा

क्या आपके पास स्टैंसिल बफर के कुछ उदाहरण हैं? मुझे लगता है कि स्टैंसिल बफर का उपयोग करना क्लीनर तरीका होगा, लेकिन मैं स्टैंसिल बफर काम करने में सक्षम नहीं हूं

— nkint

जवाबों:

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

यहाँ कुछ webGL स्टैंसिल कोड से अनुकूलित कोड है जो मेरे पास काम कर रहा है:

// drawing will set stencil stencil
    gl.enable(gl.STENCIL_TEST);
    gl.stencilFunc(gl.ALWAYS,1,1);
    gl.stencilOp(gl.KEEP,gl.KEEP,gl.REPLACE);
    gl.stencilMask(1);
    gl.clearStencil(0);
    gl.clear(gl.STENCIL_BUFFER_BIT);
// draw objects
for(var object in objects)
  objects[object].draw();
// set stencil mode to only draw those not previous drawn
    gl.stencilFunc(gl.EQUAL,0,1);
    gl.stencilOp(gl.KEEP,gl.KEEP,gl.KEEP);
    gl.stencilMask(0x00);
// draw object halo
for(var object in objects)
  objects[object].drawHalo(1.1,red); // each mesh should be individually scaled e.g. by 1.1
// done
    gl.disable(gl.STENCIL_TEST);

मुझे लगता है कि मैंने आरटीएस गेम्स में इस दृष्टिकोण का इस्तेमाल चुनिंदा इकाइयों के इर्दगिर्द करने के लिए किया है, लेकिन यह बहुत समय पहले था और मुझे याद नहीं है कि क्या कोई गोचर और सभी बारीकियां हैं।

— मर्जी
स्रोत

— nkint

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

— शॉन मिडिलडाइच

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

— नाथन रीड

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

अपनी सभी वस्तुओं को ठोस रंगों के रूप में प्रस्तुत करें, समूह रंग का उपयोग करके, एक बनावट के लिए।

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

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

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

इस किनारे का पता लगाने के लिए एक टुकड़ा shader इस तरह लग सकता है;

precision mediump float;

uniform sampler2D s_texture;

varying vec2 v_texCoord;

void main()
{
    gl_FragColor = vec4(0.0);

    vec4 baseColor = texture2D(s_texture, v_texCoord);
    gl_FragColor += baseColor - texture2D(s_texture, top);
    gl_FragColor += baseColor - texture2D(s_texture, topRight);
    gl_FragColor += baseColor - texture2D(s_texture, right);
    gl_FragColor += baseColor - texture2D(s_texture, bottomRight);
    gl_FragColor += baseColor - texture2D(s_texture, bottom);
    gl_FragColor += baseColor - texture2D(s_texture, bottomLeft);
    gl_FragColor += baseColor - texture2D(s_texture, left);
    gl_FragColor += baseColor - texture2D(s_texture, topLeft);
}

जहां बुनावट 2 डी में दूसरा मूल्य दिखता है, v_texCoord के सापेक्ष 2d समन्वित है। आप इसे पूर्ण स्क्रीन क्वाड पर बनावट के रूप में पहला रेंडर लक्ष्य प्रदान करके लागू करेंगे। यह कैसे आप एक guassian कलंक के रूप में पूर्ण स्क्रीन धुंधला प्रभाव लागू होगा के समान है।

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

— OriginalDaemon
स्रोत

क्षमा करें, लेकिन "प्रत्येक टेक्सल के माध्यम से स्कैन करें" का क्या मतलब है? प्रत्येक पिक्सेल हालांकि पाश के लिए? सीपीयू में? तो यह कुछ इस तरह है: एक बनावट के लिए एक ठोस रंग के साथ प्रस्तुत करना, छवि को सीपीयू में स्थानांतरित करें, स्कैन करें, उन्हें फिर से बनावट में डालें? या यह एक shader में करते हैं?

— nkint

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

— OriginalDaemon