💡 ☔️ 👀 सिल्वरलाइट + संवर्धित वास्तविकता + शेड्स 👩🏿‍🚒 ♂️ 🕴🏻

सभी को नमस्कार।

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

यदि आप इसके बारे में जानने में रुचि रखते हैं, तो बिल्ली का स्वागत करें:

आरंभ करने के लिए, SLARToolkit डाउनलोड करें ।

डाउनलोड किए गए संग्रह में आवश्यक लाइब्रेरी और 3 तैयार किए गए मार्कर हैं। अपने स्वयं के मार्कर बनाने के कई तरीके हैं, लेकिन शुरुआत के लिए, पर्याप्त तैयार-तैयार हैं।

अब एक नया सिल्वरलाइट एप्लिकेशन बनाएं और हमारे द्वारा डाउनलोड किए गए संग्रह से SLARTooklit.dll और Matrix3DEx.dll के लिंक जोड़ें।

यहाँ मेरे रिक्त का XAML मार्कअप है

 <UserControl x: Class = "SilverlightForHabr.MainPage" xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/pretation" xmlns: x = "http://schemas.microsoft.com/winfx/2006 / xaml "xmlns: d =" http://schemas.microsoft.com/expression/blend/2008 "xmlns: mc =" http://schemas.openxmlformats.org/markup-compatibility/2006 "mc: Ignorable =" d "d: DesignHeight =" 550 "d: DesignWidth =" 700 "> <ग्रिड x: नाम =" लेआउटरूट "पृष्ठभूमि =" व्हाइट "> <स्टैकपैनल> <टेक्स्टबैक टेक्स्ट =" सिल्वर + ऑगमेंटेड रियलिटी + शेड्स "हॉरिज़ॉन्टल एलाइगमेंट =" केंद्र "/> <ग्रिड चौड़ाई =" 640 "ऊँचाई =" 480 "> <आयत नाम =" व्यूपोर्ट "स्ट्रोक =" काला "स्ट्रोक" = 2 "/> <कैनवास> <छवि =" लोगो "स्रोत =" habr .png "चौड़ाई =" 300 "ऊँचाई =" 300 "/> </ कैनवास> </ ग्रिड> <बटन सामग्री =" चलो शुरू करें "पैडिंग =" 5 "मार्जिन =" 5 "क्षैतिजता =" केंद्र /> </ StackPanel > </ ग्रिड> </ UserControl>

अगला, आपको कैमरे तक पहुंचने और स्क्रीन पर कैमरे से छवि प्रदर्शित करने की आवश्यकता है।

यह बस किया जाता है:

कैप्चर सोर्स ऑब्जेक्ट बनाएँ
हम उपयोगकर्ता से कैमरे का उपयोग करने की अनुमति मांगते हैं
चित्र प्रदर्शित करें

कहीं आसान नहीं है।

ऐसा करने के लिए, XAML में एक विधि का लिंक जोड़ा जाता है जिसे लोड करने के बाद कॉल किया जाएगा और एक बटन क्लिक हैंडलर का लिंक:

 भरा हुआ = "UserControl_Loaded">
 और
 <बटन कंटेंट = "लेट्स स्टार्ट" पेडिंग = "5" मार्जिन = "5" हॉरिज़ॉन्टल एलाइगमेंट = "सेंटर" पर क्लिक करें = "ऑनस्टार्टबटन क्लिक करें" />

यह स्वयं विधियों का वर्णन करने के लिए बना हुआ है:

 निजी शून्य UserControl_Loaded (ऑब्जेक्ट प्रेषक, RoutedEventArgs e)
 {
       कैप्चरसोर्स = नया कैप्चर स्रोत (); 
       CaptureSource.VideoCaptureDevice = CaptureDeviceConfiguration.GetDefaultVideoCaptureDevice ();  // डिफ़ॉल्ट रूप से कैमरे को संलग्न करें
 
       var vidBrush = new VideoBrush ();
       vidBrush.SetSource (कैप्चरसोर्स);  // ब्रश के लिए, एक स्रोत के रूप में कैमरे से वीडियो निर्दिष्ट करें
       व्यूपोर्ट.फिल = विदब्रश;  // हमारी आयत पर ब्रश के साथ आकर्षित करें
 }

 निजी शून्य onStartBtnClick (ऑब्जेक्ट प्रेषक, RoutedEventArgs e)
 {
       अगर (कैप्चरडेविसकॉन्फिगरेशन। असेंसटिवडेविसएट ()) // उपयोगकर्ता से पूछें कि क्या कैमरे के साथ काम करना संभव है
       {
           कैप्चर सोर्स। कार्ट (); // यदि हां, तो चलें!
       }
 }

अब कैमरे से चित्र स्क्रीन पर प्रदर्शित होता है।

संवर्धित वास्तविकता के साथ शुरुआत करना

ऑपरेशन का सिद्धांत इस प्रकार है:

हम कैप्चरसोर्समैकरडेटेटर वर्ग का एक उदाहरण बनाते हैं, जो आने वाले कैमरा वीडियो में मार्करों का पता लगाने के लिए जिम्मेदार है
कुछ मिल जाए, तो हैंडलर को बुलाओ
हम मार्कर के प्रक्षेपण मैट्रिक्स (अंतरिक्ष में स्थिति) को स्वयं निर्धारित करते हैं
हम इस मैट्रिक्स को उस ऑब्जेक्ट पर लागू करते हैं जिसे हम मार्कर के ऊपर ओवरले करना चाहते हैं

इन सभी कार्यों के लिए निम्न कोड जिम्मेदार है:

 निजी शून्य UserControl_Loaded (ऑब्जेक्ट प्रेषक, RoutedEventArgs e)
 {
       कैप्चरसोर्स = नया कैप्चर स्रोत ();
       CaptureSource.VideoCaptureDevice = CaptureDeviceConfiguration.GetDefaultVideoCaptureDevice ();

       var vidBrush = new VideoBrush ();
       vidBrush.SetSource (कैप्चरसोर्स);
       व्यूपोर्ट.फिल = विदब्रश;


       arDetector = new CaptureSourceMarkerDetector ();
       var मार्कर = Marker.LoadFromResource ("Marker_L_16x16seolution_80width.pat", 16, 16, 80);
       arDetector.Initialize (कैप्चरसोर्स, 1, 4000, मार्कर);

       arDetector.MarkersDetected + = (s, me) =>
       {
           Dispatcher.BeginInvoke () =>
           {
               var dr = me.DetectionResults;
               अगर (dr.HasResults)
               {
                   var centerAtOrigin = Matrix3DFactory.CreateTranslation (-Logo.ActualWidth * 0.5; -Logo.ActualHeight * 0.5, 0);
                   var स्केल = Matrix3DFactory.CreateScale (0.5, -0.5, 0.5);
                   var दुनिया = centerAtOrigin * स्केल * डॉ [0]।

                    var vp = Matrix3DFactory.CreateViewportTransformation (Viewport.ActualWidth, Viewport.ActualHeight);
                    var m = Matrix3DFactory.CreateViewportProjection (दुनिया, Matrix3D.Identity, arDetector.Projection, vp);

                    Logo.Projection = new Matrix3DProjection {ProjectionMatrix = m};
               }
           });
       };
 }

और हां, हम अपने मार्कर को समाधान में जोड़ते हैं। इस स्थिति में, यह Marker_L_16x16seolution_80width.pat है। अपनी बिल्ड एक्शन प्रॉपर्टी में, संसाधन निर्दिष्ट करें।

अब हमारे लिए केवल एक चीज बची है जिसे हम चुने हुए मार्कर को प्रिंट करना चाहते हैं। सुविधा के लिए, SLARToolkit के डेवलपर्स ने मुद्रण के लिए मार्कर का एक पीडीएफ संस्करण रखा।

हम शुरू करते हैं, और हम देखते हैं कि हैबर का लोगो मार्कर के ऊपर लगाया गया है और उसका अनुसरण करता है।

अद्भुत!

shaders

संक्षेप में, एक शेडर एचएलएसएल (हाई लेवल शैडर लैंग्वेज) में लिखा गया एक प्रोग्राम है जिसमें सभी क्रियाओं को पिक्सेल के रंग या स्थिति को बदलने के लिए नीचे आता है।

एचएलएसएल एक सी-लाइक भाषा है, इसलिए इसे समझने के लिए आपको कम से कम समय की आवश्यकता है।

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

कई कार्यक्रम हैं जो शेड्स के निर्माण को सरल बनाते हैं। व्यक्तिगत रूप से, मुझे शाज़म कार्यक्रम सबसे अधिक पसंद आया। यह आपको तुरंत कई छवियों और वीडियो पर परिणाम देखने की अनुमति देता है, इसके कई उदाहरण हैं, और सबसे महत्वपूर्ण बात यह है कि यह एक C # या VB वर्ग उत्पन्न करता है जो आपको कोड की एक पंक्ति में हमारी परियोजना के लिए एक shader कनेक्ट करने की अनुमति देता है।

तो, Shazzam साइट से डाउनलोड करें।

स्थापित करें और चलाएं।

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

शेडर कोड

 /// <class> ZoomBlurEffect </ class>

 /// <विवरण> एक प्रभाव जो इनपुट पर एक रेडियल कलंक लागू करता है। </ वर्णन>

 // ------------------------------------------------ -----------------------------------------
 // शेडर निरंतर रजिस्टर मैपिंग (स्केलर - फ्लोट, डबल, पॉइंट, कलर, पॉइंट 3 डी, आदि)
 // ------------------------------------------------ -----------------------------------------

 /// <सारांश> धुंधला का केंद्र। </ सारांश>
 /// <minValue> 0 </ minValue>
 /// <maxValue> 0.2 </ maxValue>
 /// <defaultValue> 0.9,0.6 </ defaultValue>
 फ्लोट 2 केंद्र: रजिस्टर (C0);

 /// <सारांश> धुंधला की मात्रा। </ सारांश>
 /// <minValue> 0 </ minValue>
 /// <maxValue> 0.2 </ maxValue>
 /// <defaultValue> 0.1 </ defaultValue>
 फ्लोट ब्लरमाउंट: रजिस्टर (C1);

 // ------------------------------------------------ --------------------------------------
 // सैम्पलर इनपुट्स (ब्रश, इम्प्लिसेंटइन्पुट सहित)
 // ------------------------------------------------ --------------------------------------

 sampler2D inputSource: रजिस्टर (S0);

 // ------------------------------------------------ --------------------------------------
 // पिक्सेल शेडर
 // ------------------------------------------------ --------------------------------------

 फ्लोट 4 मेन (फ्लोट 2 uv: TEXCOORD): रंग
 {
	 फ्लोट 4 सी = 0;    
	 uv - = केंद्र;

	 for (int i = 0; मैं <15; i ++)
     {
		 फ्लोट स्केल = 1.0 + ब्लरअमाउंट * (i / 14.0);
		 c + = tex2D (inputSource, uv * scale + Center);
	 }
   
	 सी / = 15;
	 वापसी c;
 }

Shazzam का परिणाम ZoomBlur.ps और ZoomBlurEffect.cs फाइलें हैं। उन्हें हमारे प्रोजेक्ट में जोड़ें।

पहली फाइल रेडी-मेड शेडर है। दूसरा एक स्वचालित रूप से उत्पन्न वर्ग है जो एक shader के उपयोग को सुविधाजनक बनाता है।

एक और बटन जोड़ें जिसमें हमारा शेडर शामिल होगा:

  <बटन सामग्री = "शेडर सक्षम करें" नाम = "शेडर्सबटन" पैडिंग = "5" हॉरिज़ॉन्टल एलाइगमेंट = "केंद्र" पर क्लिक करें = "स्विचऑनशीटर्स" />

कोड के लिए एक हैंडलर जोड़ें:

 निजी शून्य स्विचऑनशेड्स (ऑब्जेक्ट प्रेषक, रूट किए गएएवेंटएगर्स ई)
 {
     अगर (Viewport.Effect == zb)
     {
         व्यूपोर्ट.फ़ेक्ट = अशक्त;
         ShadersBtn.Content = "Shader सक्षम करें";
         वापसी;
     }

     zb.Center = नया बिंदु ();
     zb.BlurAmount = 0.2;

     व्यूपोर्ट.फेक्ट = zb;
     ShadersBtn.Content = "Shader को अक्षम करें";
            
 }

अब, मार्कर को हिलाने से धब्बा बदल जाता है।

अंतभाषण

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

लिंक

स्रोत डाउनलोड करने के लिए लिंक

देखें कि यह कैसे काम करता है

SLARToolkit - संवर्धित वास्तविकता खेल शुरू करने के लिए एसडीके

Shazzam सिल्वरलाइट और WPF के लिए आरामदायक बनाने के लिए एक आवेदन पत्र है।

सिल्वरलाइट + संवर्धित वास्तविकता + शेड्स