तीव्र कॉर्नर हस्ताक्षरित दूरी फ़ील्ड्स फ़ॉन्ट्स के साथ

Question

इस पेपर में वाल्व द्वारा रिज़ॉल्यूशन इंडिपेंडेंट फॉन्ट रेंडरिंग को प्राप्त करने के लिए हस्ताक्षरित डिस्टल फील्ड्स (एसडीएफ) को एक तेज़ समाधान के रूप में प्रस्तुत किया गया था ।

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

वास्तव में इस पेपर से बहुत सारे कार्यान्वयन विवरण बचे हैं।

मैं जानना चाहूंगा कि क्या आप में से कोई भी मुझे तेज कोनों के साथ एसडीएफ के फॉन्ट रेंडर करने के लिए निर्देश दे सकता है।

Comments

तथ्य के रूप में एडम ने पहले से ही shadertoy पर स्रोत कोड पोस्ट किया। यहाँ लिंक है: shadertoy.com/view/ltXSDB

— फेलिप लीरा

तुमने मुझे उत्तेजित कर दिया था। उन्होंने shadertoy पर bezier सामान पोस्ट किया, लेकिन बनावट दूरी फ़ील्ड सामान नहीं!

— एलन वोल्फ

@AlanWolfe मुझे लगता है कि उन्होंने केवल प्रक्रियात्मक रूप से सेट bezier घटता के लिए किया है। मुझे यकीन नहीं है कि यह एक ttf रेंडर lib में एकीकृत करने के लिए आवश्यक प्रयास है। जब मेरे पास कुछ समय होगा तो मैं इसे देखूंगा।

— फेलिप लीरा

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

— एलन वोल्फ

पार्टी के लिए थोड़ा देर से लेकिन

— रेडिट के

Answer 1

एडम सिमंस ने इस क्षेत्र में कुछ दिलचस्प काम किया है। मैं विशेष रूप से नहीं जानता कि वह इसे कैसे प्राप्त कर रहा है, लेकिन उसका एसडीएफ-आधारित वेक्टर रेंडरिंग सबसे तेज है जिसे मैंने वाल्व के बाहर अभ्यास में देखा है। http://twitter.com/adamjsimmons/status/611677036545863680

Comments

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

— डिटेरॉक

Answer 2

संपादित करें: कृपया मेरे अन्य जवाब को एक ठोस समाधान के साथ देखें।

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

हालांकि, एक बहुत सरल ऑपरेशन है जो दोनों और या स्थिति के आधार पर सुविधा प्रदान कर सकता है, और यह मेरी थीसिस का मुख्य विचार है: तीन का माध्य । तो मूल रूप से, आप बिल्कुल तीन चैनलों (RGB के लिए आदर्श) का उपयोग करते हैं, जो पूरी तरह से विनिमेय हैं, और उन्हें माध्यियन ऑपरेशन का उपयोग करके संयोजित करें (तीन में से मध्य मान चुनें)।

एंटी-अलियासिंग को समायोजित करने के लिए, हम केवल बूलियन के साथ काम नहीं करते हैं, लेकिन फ्लोटिंग पॉइंट वैल्यू, और AND ऑपरेशन न्यूनतम हो जाता है, और OR अधिकतम दो मान बन जाता है। तीन की औसत वास्तव में दोनों कर सकते हैं: अगर एक < b , के लिए ( एक , एक , ख ), मंझला न्यूनतम है, और के लिए ( एक , ख , ख ), यह सबसे अधिक है।

प्रतिपादन की प्रक्रिया अभी भी बेहद सरल है। एंटी-अलियासिंग सहित संपूर्ण खंड shader कुछ इस तरह दिख सकता है:

int main() {
    // Bilinear sampling of the distance field
    vec3 s = texture2D(sdf, p).rgb;
    // Acquire the signed distance
    float d = median(s.r, s.g, s.b) - 0.5;
    // Weight between inside and outside (anti-aliasing)
    float w = clamp(d/fwidth(d) + 0.5, 0.0, 1.0);
    // Combining the background and foreground color
    gl_FragColor = mix(outsideColor, insideColor, w);
}

तो मूल विधि से एकमात्र अंतर बनावट के नमूने के बाद माध्यिका की गणना कर रहा है। आपको माध्यिका फ़ंक्शन को लागू करना होगा, जो कि केवल 4 मिनट / अधिकतम ऑपरेशन के साथ किया जा सकता है ।

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

निम्नलिखित छवि मेरी थीसिस से कार्यक्रम द्वारा उत्पन्न एक उदाहरण अपघटन है:

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

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

Comments

शानदार पहला उत्तर, कंप्यूटर ग्राफिक्स एसई में आपका स्वागत है! :) क्या आपकी थीसिस सार्वजनिक रूप से उपलब्ध है? (या यह आपके द्वारा कहे गए कागज़ को पूरा करने के बाद होगा?) यदि ऐसा है तो संभवतः इससे लिंक करना बहुत ही उपयोगी होगा।

— मार्टिन एंडर

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

— डेंटेरॉक

जब आप लेख के साथ किए जाते हैं तो @Detheroc कृपया यहां और gamedev Q पर सूचित करें। स्पष्टीकरण अभी भी मेरे लिए 100% स्पष्ट नहीं है। मैं सुझाव दूंगा कि आप चित्रों में स्टेप बाई स्टेप कम्पोजिशन दिखा सकते हैं।

— इंजीनियर

अपने वर्तमान परिणामों को दोहराने में सक्षम होना पसंद करेंगे, भले ही वे आपके भविष्य के परिणामों के रूप में अच्छे न हों, +1 जो भी विवरण आप साझा कर सकते हैं। बहुत ही रोमांचक। क्या आपने रे मार्चिंग (क्षेत्र अनुरेखण) के लिए या तो तकनीक के आवेदन पर विचार किया है? वॉल्यूम टेक्सचर या इसी तरह के ...

— एलन वोल्फ

थीसिस सार्वजनिक रूप से यहाँ उपलब्ध है: dspace.cvut.cz/bitstream/handle/10467/62770/…

— Romain लड़के

Answer 3

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

यह GitHub: https://github.com/Chlumsky/msdfgen पर उपलब्ध है

(मैं इसके लिए नया हूं, इसलिए कृपया मुझे बताएं कि क्या भंडार के साथ कुछ गलत है।)

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

Answer 4

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

Answer 5

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

वैकल्पिक रूप से, यदि आप एक दूसरे चैनल का उपयोग करने में कोई आपत्ति नहीं करते हैं, तो आप क्षैतिज दूरी के लिए एक चैनल और दूसरे के लिए ऊर्ध्वाधर दूरी की कोशिश कर सकते हैं, और बनावट को संपीड़ित करने के लिए लैपलैसियन (DoL) एनर्जी पिरामिड के अंतर का उपयोग कर सकते हैं ताकि बेमानी जानकारी प्राप्त हो सके। 'दर्ज नहीं किया जाएगा।

एक तीसरा और अंतिम सैद्धांतिक समाधान ऐरे सेट सेटिंग के माध्यम से हेक्सागोनली सैम्पल टेक्सचर के साथ प्रयोग करना होगा।

दुर्भाग्य से, मेरे पास वर्तमान में अपने विचारों के परीक्षण का कोई साधन नहीं है, और मेरे विचारों के समान किसी भी चीज का वर्णन करने या परीक्षण करने में कोई भी दस्तावेज खोजने में असमर्थ रहा है। मैं उन सभी प्रासंगिक लेखों को लिंक करूँगा जहाँ मुझे शीघ्र ही मेरी जानकारी / विचार मिल गए।