वीडियो गेम में आउटलाइन बनाने के तरीके

 (ameye.dev)
2 पॉइंट द्वारा GN⁺ 2025-01-05 | 1 टिप्पणियां | WhatsApp पर शेयर करें

  • परिचय

    • गेम में आउटलाइन रेंडरिंग का उपयोग अक्सर सौंदर्य कारणों या gameplay support के लिए किया जाता है। उदाहरण के लिए, गेम Sable में कॉमिक-बुक शैली बनाने के लिए आउटलाइन का उपयोग होता है, जबकि The Last of Us में इसे दुश्मनों को हाइलाइट करने के लिए इस्तेमाल किया जाता है।

  • रिम इफेक्ट

    • तकनीक

      • Fresnel effect का उपयोग करके ऑब्जेक्ट के किनारों पर आउटलाइन render की जा सकती है। यह ऑब्जेक्ट के एज पर ज्यादा strong हो जाती है।

    • इम्प्लीमेंटेशन

      • Fresnel effect वाले कस्टम shader का इस्तेमाल करके ऑब्जेक्ट पर आउटलाइन render की जाती है। यह sphere या capsule जैसे smooth ऑब्जेक्ट के लिए उपयुक्त है, लेकिन cube जैसे तेज़/एज वाले ऑब्जेक्ट के लिए ठीक नहीं।

  • वर्टेक्स एक्सट्रूज़न

    • तकनीक

      • मूल ऑब्जेक्ट की कॉपी से आउटलाइन बनाई जाती है। कॉपी के vertices को expand करके उसे original से बड़ा किया जाता है।

    • एक्सट्रूज़न दिशा

      • vertices को move करने की दिशा चुनकर ऑब्जेक्ट का साइज़ एडजस्ट करते हैं। ऑब्जेक्ट स्पेस में vertices को शिफ्ट करके आउटलाइन बनाई जाती है।

    • एक्सट्रूज़न स्पेस

      • ऑब्जेक्ट स्पेस में vertices शिफ्ट करने और clip space में शिफ्ट करने दोनों तरीके मौजूद हैं। clip space में शिफ्ट करने पर अधिक uniform आउटलाइन मिलती है।

    • मास्किंग

      • duplicated mesh के फ्रंट फेस को हटाकर केवल आउटलाइन दिखाई जाती है।

  • ब्लर बफर

    • तकनीक

      • ऑब्जेक्ट की silhouette को बफर में render करके उसे blur किया जाता है और इसी से आउटलाइन बनती है।

    • सिल्हूट बफर

      • ऑब्जेक्ट को सिंगल कलर में render करके silhouette buffer बनाया जाता है।

    • ब्लर पास

      • silhouette buffer को बढ़ाने के लिए blur pass इस्तेमाल किए जाते हैं। Box blur या Gaussian blur से performance बेहतर हो जाती है।

    • आउटलाइन पास

      • blurred silhouette को original scene के साथ blend करके आउटलाइन बनाते हैं।

  • जंप फ्लड एल्गोरिद्म

    • जंप फ्लड एल्गोरिद्म का उपयोग करके आउटलाइन render की जाती है। चौड़ी आउटलाइन को कम performance cost पर render किया जा सकता है।

  • एज डिटेक्शन

    • तकनीक

      • full-screen pass से scene की discontinuity detect करके आउटलाइन render की जाती है।

    • डिस्कन्टिन्यूटी डिटेक्शन

      • Roberts cross या Sobel operator से discontinuity detect की जाती है।

    • डिस्कन्टिन्यूटी के स्रोत

      • depth, normal और color texture में discontinuity खोजकर आउटलाइन बनाई जाती है।

    • एज डिटेक्शन ट्यूनिंग

      • discontinuity detection में इस्तेमाल threshold बदलकर artifacts हटाए जाते हैं।

    • यूज़र-डिफाइंड डिस्कन्टिन्यूटी स्रोत

      • यूज़र-कस्टम डिस्कन्टिन्यूटी स्रोत देकर आउटलाइन को control किया जा सकता है।

  • निष्कर्ष

    • आउटलाइन बनाने के 5 तरीके हैं, जो performance, visual fidelity और manual settings के बीच trade-off देते हैं।

संबंधित पढ़ाई

1 टिप्पणियां

 
GN⁺ 2025-01-05
Hacker News टिप्पणियाँ

  • Jump Flood Algorithm पर एक बहुत ही रुचिकर लेख पढ़ा। पिक्सेल स्तर पर अलग-अलग approaches के बारे में सोचना मज़ेदार लगा

    • SDF (Signed Distance Field) बनाने का यह बेहद चतुर तरीका है। रैखिक समय में इच्छित चौड़ाई वाली आउटलाइन बना पाना खास तौर पर इंप्रेसिव है
    • SDF को vector-based, function-based, या texel/voxel-based approaches में इस्तेमाल किया जा सकता है। Houdini raster SDF को अच्छी तरह सपोर्ट करता है, और इसका free version भी मौजूद है
    • SDF कई अलग-अलग क्षेत्रों में बहुत काम आता है

  • मॉडल को solid color में render करके बाद में edge detection से आउटलाइन निकालने का सुझाव दिया। इसमें अतिरिक्त render pass की जरूरत पड़ती है

  • स्टाइलाइज़्ड 3D graphics के लिए एक R&D प्रोजेक्ट में मेरी रुचि है। कई सवाल अभी भी अनसुलझे हैं

    • जब कैमरा zoom-out करे तो कार्टून-रेंडर्ड 3D मॉडल की डिटेल कैसे reduce करें
    • 3D बैकग्राउंड को watercolour/watercolor जैसा कैसे render करें
    • स्टाइलाइज़्ड 3D गेम में धुआँ, आग, पेड़ आदि को कैसे दिखाएँ
    • फ्री-फ्लाइंग कैमरे के साथ मॉडल को ऑटोमेटिकली कैसे adjust करें
    • स्टाइलाइज़्ड 3D renderer में आदर्श mesh और background editor program कैसा दिखना चाहिए
    • सरल 3D मॉडल में retro pixel art render करने की संभावना
    • स्टाइलाइज़ेशन के जरिए 3D गेम वर्ल्ड को और physically accurate कैसे बनाएं

  • Astral Divide गेम में blur-buffer जैसी तकनीक विकसित की। उन्होंने anti-aliasing का उपयोग करके edges बनाए। यह प्रदर्शन में हल्का और implement करने में सरल है

  • टेक्निकल आर्ट के प्रति उत्साह दिखाने वाले व्यक्ति Godot के compute shader pipeline सुधार की प्रतीक्षा कर रहे हैं। मौजूदा compositor plugin सेटअप अभी कुछ complex लगता है

  • Unity की pricing controversy के बाद क्या developers Unreal और Godot की तरफ शिफ्ट हुए हैं, यह जानना चाहूँगा/चाहूँगी

  • VR ऐप डेवलपमेंट से web development में आने के बाद भी 3D graphics, collision और shader काम करने जैसा जादुई एहसास मिस होता है

  • edge detection rendering का रिज़ल्ट बहुत satisfying है। यह मुझे Dutch comic book Franka के एक दृश्य जैसा लगता है

  • Mars First Logistics के developer द्वारा सुझाए गए edge detection approach पर एक शानदार नोट मिला

  • आउटलाइन ड्रॉ करने की आसान तकनीक का प्रस्ताव

    • प्रत्येक face की unique edges store करने वाली array बनाइए
    • edges को view space में transform करके कुछ conditions पर उस edge को draw कीजिए