🖇️ 🙌🏼 🤭 WPF अनुप्रयोगों में मोशन कलंक प्रभाव जोड़ें 🏂🏻 🚭 👨‍🌾

हेलो, हेब्र!
हम सभी ने वाक्यांश को कई बार सुना है कि 24 फ्रेम प्रति सेकंड अधिकतम संभव मूल्य है जिसे मानव दृष्टि अनुभव कर सकती है। इसलिए, यदि आप केवल एक अतिरिक्त फ्रेम द्वारा वीडियो को गति देते हैं, तो आप दर्शक के अवचेतन में किसी भी जानकारी को एम्बेड कर सकते हैं। और हम सभी, निश्चित रूप से, जानते हैं कि यह सच नहीं है । डिजिटल कैमरों के मैट्रिक्स के फोटोडायोड्स की तरह, रेटिना न्यूरॉन्स एक निश्चित बिंदु पर तात्कालिक रोशनी को रिकॉर्ड नहीं करते हैं, लेकिन थोड़े समय के अंतराल के लिए कुल चमकदार प्रवाह, जिसके परिणामस्वरूप तेजी से बढ़ने वाली वस्तुएं हमें "धुंधला" लगती हैं। इसके अलावा, हमारा मस्तिष्क इस तरह की दृष्टि के आदी है, इसलिए किसी वस्तु की व्यक्तिगत तस्वीरों से बना एक वीडियो हमारे लिए अप्राकृतिक लगता है। वही कंप्यूटर एनीमेशन के लिए जाता है। एनीमेशन कलाकारों ने लंबे समय से अपने पात्रों के पीछे धुंधली गाड़ियों को चित्रित करना सीखा है - इस तकनीक को "मोशन ब्लर" कहा जाता है और यह 2 डी- और 3 डी-एनीमेशन के सभी आधुनिक पैकेजों में उपलब्ध है। लेकिन साधारण डेस्कटॉप प्रोग्रामर के बारे में क्या? इस लेख में मैं इस बारे में बात करने की कोशिश करूंगा कि पॉप-अप दिखाई देने पर मैं एक उत्तरदायी प्रभाव देने के लिए एक WPF आवेदन में मोशन ब्लर को कैसे खराब कर दिया।

शुरुआत के लिए, मैं दो तस्वीरों को देखने का प्रस्ताव करता हूं। उनमें फ़्रेमों की संख्या समान है।

नियमित एनीमेशन	मोशन ब्लर

यदि आप अंतर नहीं देखते हैं, तो आप मान सकते हैं कि मैंने कई शामें बर्बाद की हैं। लेकिन मुझे विश्वास है कि अंतर अभी भी ध्यान देने योग्य है :)

और यह वही है जो फ्रेम-बाय-फ्रेम स्कैन में दिखता है:

नियमित एनीमेशन

मोशन ब्लर

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

हुड के नीचे एक नज़र डालें?

पिक्सेल शेड्स

सबसे शक्तिशाली आधुनिक केंद्रीय प्रोसेसर पर भी एक गैर-ब्रेकिंग मोशन कलंक प्रभाव का एहसास करना संभव नहीं है, इसलिए मेरे उदाहरण में धुंधली "ट्रेस" का प्रतिपादन करने में जीपीयू महत्वपूर्ण भूमिका निभाता है। WPF में पिक्सेल शेड्स के समर्थन के लिए धन्यवाद, हम दृश्य तत्वों में विभिन्न प्रभाव लागू कर सकते हैं, जिसमें छाया, विरूपण प्रभाव (ग्लास, घुमा, लहर), रंग संतुलन बदलना, धुंधला होना आदि शामिल हैं।
यदि यह आपको लगता है कि शेड कुछ भयानक और जटिल हैं, तो मैं आपसे पूरी तरह सहमत हूं। कुछ समय पहले तक, मुझे यकीन था कि मैं अपने जीवन में उनका सामना कभी नहीं करूंगा, जब तक कि मैं खेल-देव में नहीं जाता। लेकिन यह पता चला कि वे लागू प्रोग्रामिंग में भी उपयोगी हो सकते हैं। इस मामले में, shaders लिखने के लिए विशेष भाषाओं को जानना आवश्यक नहीं है, जैसे GLSL , HLSL , आदि। इंटरनेट पर लंबे समय तक शेड्स के कई तैयार किए गए उदाहरण हैं, जिनमें से एक मैंने इस्तेमाल किया था। इसे ZoomBlurEffect कहा जाता है और मुफ्त Shazzam Shader संपादक के लिए डेमो शेडर्स की आपूर्ति में शामिल है। यहाँ उसका कोड है:

ZoomBlurEffect.fx

/// <class>ZoomBlurEffect</class> /// <description>An effect that applies a radial blur to the input.</description> sampler2D inputSource : register(S0); /// <summary>The center of the blur.</summary> float2 Center : register(C0); /// <summary>The amount of blur.</summary> float BlurAmount : register(C1); float4 main(float2 uv : TEXCOORD) : COLOR { float4 c = 0; uv -= Center; for (int i = 0; i < 15; i++) { float scale = 1.0 + BlurAmount * (i / 14.0); c += tex2D(inputSource, uv * scale + Center); } c /= 15; return c; }

यहां तक कि एचएलएसएल भाषा के बारे में जानने के बिना, जिसमें यह शेडर लिखा गया है, आप आसानी से इसके संचालन के एल्गोरिथ्म को समझ सकते हैं: अंतिम छवि के प्रत्येक बिंदु के लिए, इस बिंदु और C0 रजिस्टर में संग्रहीत धब्बा केंद्र के बीच की रेखा पर स्थित 15 अंकों के औसत रंग मूल्य की गणना की जाती है। इस बिंदु से औसत अंकों की दूरी को C1 रजिस्टर में संग्रहीत BlurAmount पैरामीटर द्वारा नियंत्रित किया जाता है। हमारे उदाहरण में, छवि के केंद्र से धुंधला होता है, इसलिए C0 (0.5; 0.5) है, और BlurAmount पैरामीटर का मूल्य इस बात पर निर्भर करता है कि वर्तमान फ्रेम पिछले एक से कितना अलग है, लेकिन बाद में और अधिक।
बेशक, आप इस रूप में shader का उपयोग नहीं कर सकते हैं - आपको इसे fxc.exe उपयोगिता का उपयोग करके संकलित करने की आवश्यकता है, जो DirectX SDK का हिस्सा है। पिक्सेल शेडर को संकलित करने का परिणाम एक्सटेंशन ".ps" के साथ एक फ़ाइल है, जिसका उपयोग हमारे WPF एप्लिकेशन में किया जा सकता है। ऐसा करने के लिए, इसे एक संसाधन के रूप में हमारी परियोजना में जोड़ें और ZoomBlurEffect क्लास बनाएँ:

ZoomBlurEffect.cs

  /// <summary>An effect that applies a radial blur to the input.</summary> public class ZoomBlurEffect : ShaderEffect { public static readonly DependencyProperty InputProperty = RegisterPixelShaderSamplerProperty("Input", typeof (ZoomBlurEffect), 0); public static readonly DependencyProperty CenterProperty = DependencyProperty.Register("Center", typeof (Point), typeof (ZoomBlurEffect), new UIPropertyMetadata(new Point(0.9D, 0.6D), PixelShaderConstantCallback(0))); public static readonly DependencyProperty BlurAmountProperty = DependencyProperty.Register("BlurAmount", typeof (double), typeof (ZoomBlurEffect), new UIPropertyMetadata(0.1D, PixelShaderConstantCallback(1))); public ZoomBlurEffect() { PixelShader = new PixelShader { UriSource = new Uri(@"pack://application:,,,/ZoomBlurEffect.ps", UriKind.Absolute) }; UpdateShaderValue(InputProperty); UpdateShaderValue(CenterProperty); UpdateShaderValue(BlurAmountProperty); } public Brush Input { get { return ((Brush) (GetValue(InputProperty))); } set { SetValue(InputProperty, value); } } /// <summary>The center of the blur.</summary> public Point Center { get { return ((Point) (GetValue(CenterProperty))); } set { SetValue(CenterProperty, value); } } /// <summary>The amount of blur.</summary> public double BlurAmount { get { return ((double) (GetValue(BlurAmountProperty))); } set { SetValue(BlurAmountProperty, value); } } }

(वास्तव में, Shazzam Shader संपादक ही shaders के लिए ऐसे आवरण वर्ग उत्पन्न करने में सक्षम है, जिसका मैंने उपयोग किया था)।

विंडो एनीमेशन

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

मोशन ब्लर प्रभाव के बिना विंडो उपस्थिति को एनिमेट करने के लिए छद्म कोड

 double t = 0.0; int  = ; while (t < 1.0) { (ElasticEase(t)); t = ( - ) / ; } (1.0);

यहाँ t 0 से 1 तक भिन्न होता है, जहाँ 0 वह क्षण होता है जिस दिन एनीमेशन शुरू होता है, और 1 वह क्षण होता है जब वह समाप्त होता है। ElasticEase (t) फ़ंक्शन का मान इस कानून के अनुसार लगभग बदलता है:

गति-धुंधला को हमारे एनीमेशन में जोड़ें। ऐसा करने के लिए, विंडो के चाइल्ड कंट्रोल की इफेक्ट प्रॉपर्टी का उपयोग करें:

 content.Effect = new ZoomBlurEffect { Center = new Point(0.5, 0.5) };

मोशन ब्लर एनिमेशन स्यूडोकोड

 double t = 0.0; double prevEase = 0.0; int  = ; (new ZoomBlurEffect { Center = new Point(0.5, 0.5) }); while (t < 1.0) { var ease = ElasticEase(t); (ease); content.Effect.BlurAmount = ease - prevEase; prevEase = ease; t = ( - ) / ; } (1.0); (null);

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

नुकसान के बारे में

दुर्भाग्य से, WPF अनुप्रयोगों में मोशन ब्लर प्रभाव को लागू करने से कुछ समस्याएं होती हैं। यहाँ उनमें से कुछ हैं:

प्रदर्शन। जैसा कि अभ्यास से पता चला है, यहां तक कि GPU भी सर्वशक्तिमान नहीं है। परीक्षण के परिणामों के अनुसार, विंडो में ज़ूम प्रभाव जोड़ने से रेंडरिंग लगभग 1.5-2 गुना (मेरे वीडियो कार्ड पर) धीमा हो जाता है। हालांकि, चूंकि एफपीएस में नेत्रहीन रूप से वृद्धि हुई है, इसलिए यह मुझे एक बड़ी समस्या नहीं लगती है।
यह स्पष्ट नहीं है कि यह बिल्कुल क्यों जरूरी है :) मैंने दोस्तों के बीच एक सर्वेक्षण किया कि क्या वे प्रभाव के साथ और बिना व्यवहार के बीच अंतर देखते हैं। और सभी ने पहले कहा कि कोई अंतर नहीं था। वास्तव में क्या देखना है यह इंगित करने के बाद, उनमें से अधिकांश ने वाह प्रभाव व्यक्त किया, लेकिन एक अन्य भाग ने कहा कि प्रभाव के बिना यह बहुत बेहतर और स्पष्ट है। उनकी राय को भी ध्यान में रखना होगा।

निष्कर्ष

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

डेमो प्रोजेक्ट यहाँ से डाउनलोड करें: github.com/misupov/motion-blur

WPF अनुप्रयोगों में मोशन कलंक प्रभाव जोड़ें

पिक्सेल शेड्स

विंडो एनीमेशन

नुकसान के बारे में

निष्कर्ष

More articles: