🛌🏾 💆🏽 🆘 जीपीयूइमेज उदाहरण का उपयोग करके शेड का परिचय ↪️ 🤴🏽 🐪

इस लेख में, मैं iphone के लिए एक एप्लिकेशन के विकास का वर्णन करने जा रहा हूं जो वास्तविक समय में डिवाइस के कैमरे से वीडियो को संसाधित करेगा। ऐसा करने के लिए, हम GPUImage फ्रेमवर्क का उपयोग करेंगे, OpenGL ES पर अपना स्वयं का शेडर लिखें और यह पता लगाने की कोशिश करें कि छवियों को संसाधित करने के लिए कौन से फ़िल्टर हैं।

GPUImage ढांचा

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

GPU बनाम CPU

प्रत्येक iPhone दो प्रोसेसर से सुसज्जित है: सीपीयू और जीपीयू, जिनमें से प्रत्येक की अपनी ताकत और कमजोरियां हैं।
जब आप Xcode में C या Objective-C लिखते हैं, तो आप ऐसे निर्देश बनाते हैं जो विशेष रूप से CPU पर निष्पादित किए जाएंगे। जीपीयू, इसके विपरीत, एक विशेष चिप है जो विशेष रूप से गणना के लिए उपयुक्त है जिसे कई छोटे, स्वतंत्र संचालन में विभाजित किया जा सकता है, जैसे कि, उदाहरण के लिए, ग्राफिक्स प्रतिपादन। GPU के लिए निर्देश के प्रकार मूल रूप से CPU से भिन्न होते हैं, इसलिए हम OpenGL में (या अधिक सटीक रूप से shader भाषा GLSL में) दूसरी भाषा में कोड लिखते हैं।
सीपीयू और जीपीयू पर वीडियो रेंडरिंग के प्रदर्शन की तुलना करते हुए, यह ध्यान देने योग्य है कि अंतर केवल विशाल हैं:

फ्रेम दर: सीपीयू बनाम। GPU (बड़ा एफपीएस बेहतर है)

कंप्यूटिंग	GPU FPS	सीपीयू एफपीएस	Δ
थ्रेसहोल्ड ☓ 1	60.00	4.21	14.3
थ्रेशोल्ड ☓ 2	33.63	2.36	14.3
थ्रेशोल्ड ☓ 100	1.45	0.05	28.7

GPUImage बनाम कोर छवि

कोर छवि - लगभग वास्तविक समय में छवियों और वीडियो के प्रसंस्करण के लिए एक मानक ढांचा। यह ios 5 के बाद से दिखाई दिया, और इस संस्करण के लिए इसमें फ़िल्टर का इतना बड़ा सेट नहीं था (हालाँकि अधिकांश कार्यों के लिए यह काफी पर्याप्त है), ios 6 की रिलीज़ के साथ फ़िल्टर की संख्या में काफी वृद्धि हुई है। कोर इमेज सीपीयू और जीपीयू दोनों पर प्रोसेसिंग की भी अनुमति देती है।

कोर छवि पर GPUImage के मुख्य लाभ:

GPUImage आपको अपने स्वयं के फ़िल्टर रिकॉर्ड करने (बनाने) की अनुमति देता है (कोर छवि आपको केवल OS X पर ऐसा करने की अनुमति देती है, iOS के लिए नहीं);
GPUImage कोर इमेज से तेज है;
GPUImage अपनी भाषा के बजाय GLSL का उपयोग करता है;
GPUImage ओपन सोर्स है;

GPUImage OpenGL सीखना शुरू करने का एक अच्छा तरीका है, क्योंकि इसके बहुत सारे उदाहरण, प्रलेखन और टर्नकी समाधान हैं। आप तुरंत अधिक रोमांचक चीजों पर जा सकते हैं, उदाहरण के लिए, नए फिल्टर लिखना, और जल्द ही परिणाम देखें!

GPUImage संरचना

GPUImage अनिवार्य रूप से रेंडरिंग पाइपलाइन के आसपास ऑब्जेक्टिव-सी का एक अमूर्तन है। बाहरी स्रोत से छवियां, चाहे वह एक कैमरा, नेटवर्क या डिस्क हो, फ़िल्टर की एक श्रृंखला के माध्यम से डाउनलोड और संशोधित होती है और परिणाम को एक छवि (UIImage) के रूप में प्रदर्शित करती है, स्क्रीन पर प्रत्यक्ष प्रतिपादन (GPUImageVIew या केवल एक डेटा स्ट्रीम के माध्यम से)।

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

रंग का स्तर

GPUImageVideoCamera *videoCamera = [[GPUImageVideoCamera alloc] initWithSessionPreset:AVCaptureSessionPreset640x480 cameraPosition:AVCaptureDevicePositionBack]; videoCamera.outputImageOrientation = UIInterfaceOrientationPortrait; GPUImageFilter *filter = [[GPUImageLevelsFilter alloc] initWithFragmentShaderFromFile:@"CustomShader"]; [filter setRedMin:0.299 gamma:1.0 max:1.0 minOut:0.0 maxOut:1.0]; [filter setGreenMin:0.587 gamma:1.0 max:1.0 minOut:0.0 maxOut:1.0]; [filter setBlueMin:0.114 gamma:1.0 max:1.0 minOut:0.0 maxOut:1.0]; [videoCamera addTarget:filter]; GPUImageView *filteredVideoView = [[GPUImageView alloc] initWithFrame:self.view.bounds)]; [filter addTarget:filteredVideoView]; [self.view addSubView:filteredVideoView]; [videoCamera startCameraCapture]

गंभीरता से, फ़िल्टर प्रस्तुति ऐप जो GPUImage के लिए एक उदाहरण के रूप में बंडल किया गया है, बिना किसी बदलाव के लगभग 3.99 डॉलर में Apple स्टोर पर होस्ट किया जा सकता है। और ट्विटर एकीकरण और ध्वनि प्रभावों के एक जोड़े को जोड़कर, आप कीमत केवल $ 6.99 तक बढ़ा सकते हैं।

वर्टेक्स शेड्स GPUImage

एक shader GPU के लिए एक प्रोग्राम है जो ग्राफिक्स पाइपलाइन के एक चरण के व्यवहार को नियंत्रित करता है और संबंधित इनपुट डेटा को संसाधित करता है।
एक बेहतर समझ के लिए, लेख के मुख्य भाग में क्या हो रहा है, हम शीर्ष शीर्ष shaders पर स्पर्श करेंगे।
एक छवि के साथ काम करते समय, अधिकांश समय हम दो-आयामी वस्तुओं के साथ काम कर रहे होते हैं। छवि एक विमान पर प्रदर्शित होती है जो एक आयत है। यह OpenGL के लिए आवश्यक है, जैसा कि तीन-आयामी अंतरिक्ष में सब कुछ मौजूद है। यदि हम कुछ आकर्षित करना चाहते हैं, तो हमें पहले एक सतह बनानी होगी, जहाँ हम आकर्षित करेंगे। ओपनजीएल ईएस 2.0 केवल त्रिकोण (साथ ही अंक और रेखाएं, लेकिन आयताकार नहीं) खींच सकता है, इसलिए विमान दो त्रिकोणों से बनाया गया है।
वर्टेक्स शेड्स वन वर्टेक्स प्रोसेसिंग के लिए एक छोटा प्रोग्राम है।
यह वही है जो GPUImage पर मानक वर्टिकल शेडर दिखता है:

वर्टेक्स shader

 attribute vec4 position; attribute vec4 inputTextureCoordinate; varying vec2 textureCoordinate; void main() { gl_Position = position; textureCoordinate = inputTextureCoordinate.xy; }

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

एक नया GPUImage प्रोजेक्ट बनाएं

IPhone के लिए एक नया प्रोजेक्ट बनाएं। ऐसा करने के लिए, निष्पादित करें: फ़ाइल-> प्रोजेक्ट → एकल दृश्य अनुप्रयोग। आप स्टोरीबोर्ड और एआरसी को छोड़ या अनचेक कर सकते हैं।
अगला, फ्रेमवर्क को हमारी बनाई गई परियोजना से कनेक्ट करें (फ्रेमवर्क के साथ फ़ोल्डर पर राइट-क्लिक करें → फाइलें जोड़ें)। फिर हमें स्क्रीनशॉट में दिखाए गए कुछ फ्रेमवर्क और लाइब्रेरीज़ को जोड़ना चाहिए:

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

ध्रुवीय पिक्सेलेट पोस्टर को फ़िल्टर करते हैं

हमारा फ़िल्टर आने वाली छवि को पिक्सेल करने के लिए एक ध्रुवीय समन्वय प्रणाली का उपयोग करेगा।
पहली बात यह है कि GPUImageFilter से विरासत में मिला एक नया वर्ग बनाया गया है। चलो इसे GPUImagePolarPixellatePosterizeFilter कहते हैं।

GPUImageFilter

 #import "GPUImageFilter.h" @interface GPUImagePolarPixellateFilterPosertize : GPUImageFilter { GLint centerUniform, pixelSizeUniform; } // The center about which to apply the distortion, with a default of (0.5, 0.5) @property(readwrite, nonatomic) CGPoint center; // The amount of distortion to apply, from (-2.0, -2.0) to (2.0, 2.0), with a default of (0.05, 0.05) @property(readwrite, nonatomic) CGSize pixelSize; @end

हम इस फ़िल्टर में दो समान चर पास करने जा रहे हैं। वैरिएबल सेंटर यूनीफॉर्म वह बिंदु है जहां ध्रुवीय समन्वय प्रणाली की उत्पत्ति होती है - डिफ़ॉल्ट रूप से यह 0.5, 0.5, अर्थात् स्क्रीन का केंद्र है। OpenGL में निर्देशांक प्रणाली 0.0 से 0.0, 1.0 से 1.0, निचले बाएं कोने में एक शुरुआत के साथ है (ध्यान दें कि हम बनावट निर्देशांक के बारे में बात कर रहे हैं)। Pixellate मान यह निर्धारित करता है कि फ़िल्टर लगाने के बाद 'पिक्सेल' कितना बड़ा होगा। चूंकि हम एक ध्रुवीय समन्वय प्रणाली का उपयोग करते हैं, इसलिए मूल्य "x" त्रिज्या ("केंद्र" से दूरी) है, और अन्य मान रेडियन में कोण है।
हालांकि GPUImageFilter OpenGL की स्थापना और आवश्यक फ्रेमबफ़र बनाने के लिए ज़िम्मेदारी लेता है, फिर भी हमें खुद को shader लिखने और उसमें आवश्यक समान चर पास करने की आवश्यकता है।

हमारे पहले shader

@ कार्यान्वयन लाइन से पहले निम्न कोड जोड़ें:

कोड

 NSString *const kGPUImagePolarPixellatePosterizeFragmentShaderString = SHADER_STRING ( varying highp vec2 textureCoordinate; uniform highp vec2 center; uniform highp vec2 pixelSize; uniform sampler2D inputImageTexture; void main() { highp vec2 normCoord = 2.0 * textureCoordinate - 1.0; highp vec2 normCenter = 2.0 * center - 1.0; normCoord -= normCenter; highp float r = length(normCoord); // to polar coords highp float phi = atan(normCoord.y, normCoord.x); // to polar coords r = r - mod(r, pixelSize.x) + 0.03; phi = phi - mod(phi, pixelSize.y); normCoord.x = r * cos(phi); normCoord.y = r * sin(phi); normCoord += normCenter; mediump vec2 textureCoordinateToUse = normCoord / 2.0 + 0.5; mediump vec4 color = texture2D(inputImageTexture, textureCoordinateToUse ); color = color - mod(color, 0.1); gl_FragColor = color; } );

Shader कोड मैक्रो SHADER_STRING () में संलग्न है, इसे NSString स्ट्रिंग के रूप में दर्शाने के लिए।
GLSL में डेटा प्रकार और संचालन के बारे में कुछ शब्द। उपयोग किए जाने वाले मुख्य डेटा प्रकार int, float, वेक्टर (vec2, vec3, vec4) और matrices (mat2, mat3, mat4) हैं। आप मैट्रिस और वैक्टर पर सरल अंकगणितीय ऑपरेशन कर सकते हैं, जैसे, उदाहरण के लिए, vec2 + vec2 को जोड़ना। इसके अलावा, एक संख्या (इंट या फ्लोट) द्वारा एक वेक्टर को गुणा करने के लिए संचालन की अनुमति है, उदाहरण के लिए: फ्लोट * vec2 = vec2.x * फ्लोट, vec2.y * फ्लोट। यदि आप vec3 प्राप्त करना चाहते हैं, तो आप कॉल का उपयोग भी कर सकते हैं: vec4.xyz। समर्थित प्रकारों की एक पूरी सूची यहां पाई जा सकती है ।
देखते हैं कि यहां क्या होता है। प्रकार vec2 के भिन्न बनावट बनावट को डिफ़ॉल्ट डिफ़ॉल्ट शेल्डर से हमारे पास आता है। यूनिफ़ॉर्म - केंद्र और पिक्सेल आकार चर - वे चर हैं जो हम अपने फ़िल्टर वर्ग से पास करते हैं। और अंत में, हमारे पास टाइप sampler2D का एक इनपुटइमेजटेक्स्ट चर है। यह समान चर सुपरक्लास, GPUImageFilter पर सेट किया गया है, और उस छवि के दो-आयामी बनावट का प्रतिनिधित्व करता है जिसे हम संसाधित करना चाहते हैं।
आपने देखा होगा कि हम हमेशा हाई क्लास क्लासिफायर का उपयोग करते हैं। यह हमारे डेटा प्रकारों की सटीकता स्तर के बारे में GLSL को बताने के लिए किया जाता है। जैसा कि आप कल्पना कर सकते हैं, उच्च सटीकता, हमारे डेटा प्रकारों की सटीकता जितनी अधिक होगी। लेकिन यह हमेशा प्रासंगिक नहीं होता है - सरल प्रतिपादन के लिए, कम सटीकता स्क्रीन फिट होगी, जो आपको थोड़ी तेजी से गणना करने की अनुमति देगा। सटीकता क्लासिफायरियर lowp, mediump, highp हैं। आप यहां सटीकता और वास्तविक सीमाओं के बारे में अधिक जान सकते हैं।
शेडर में हमेशा मुख्य फ़ंक्शन मुख्य () होता है। टुकड़ा shader का परिणाम रंग है जो संसाधित होने वाले टुकड़े के लिए सेट किया जाएगा। हमारे मामले में यह रंग मूल छवि से normCoord निर्देशांक पर लिया गया है। हम ध्रुवीय समन्वय प्रणाली में स्थिति के आधार पर पिक्सेलकरण का उत्पादन करने के लिए इस मूल्य का उपयोग करेंगे।

पहली चीज जो हम करते हैं वह हमारी समन्वय प्रणाली को ध्रुवीय निर्देशांक वाली प्रणाली में बदल देता है। TextureCoordinate चर 0.0, 0.0 से 1.0, 1.0 के बीच परिभाषित किया गया है। समान चर केंद्र समान श्रेणी में परिभाषित किया गया है। ध्रुवीय निर्देशांक में हमारी स्क्रीन का वर्णन करने के लिए, हमें -1.0, -1.0 से 1.0, 1.0 तक निर्देशांक की आवश्यकता होती है। पहली दो पंक्तियाँ यह रूपांतरण करती हैं। तीसरी पंक्ति केंद्र मानदंड से घटती है। यानी हमने बस निर्देशांक प्रणाली को निर्देशांक में केंद्रित एक नए बिंदु पर स्थानांतरित कर दिया। हम त्रिज्या और कोण phi का मान पाते हैं, जिसके बाद हम फिर से कार्टेशियन समन्वय प्रणाली में लौटते हैं, इसके केंद्र को अपने पूर्व स्थान पर स्थानांतरित करते हैं। इस प्रकार, हमें 0.0, 0.0 1.0, 1.0 की रेंज मिलती है, जिसकी बनावट की खोज करने की आवश्यकता होती है। ऐसा करने के लिए, हम बुनावट 2 डी () फ़ंक्शन को कॉल करते हैं, जो इनपुट के रूप में दो मापदंडों को लेता है: एक दो-आयामी बनावट वस्तु (हमारे मामले में, inputImage) और निर्देशांक (बुनावट कोऑर्डिनेटटू यू)।
अंत में, हम लाल, हरा, नीला (और अल्फा के लिए रंग सरगम को कम करते हैं, लेकिन अल्फा हमेशा हमारे मामले में 1.0 जैसा है ...) प्रत्येक घटक (16.8 मिलियन रंगों) से 10 (1000 रंगों) के लिए 256 मानों से। ।
यह हमारा टुकड़ा shader है और यह बहुत जल्दी काम करेगा। यदि हमें एक ही लक्ष्य को प्राप्त करने के लिए प्रोसेसर (सीपीयू) पर एक ही ऑपरेशन करने की आवश्यकता होती है, तो अधिक समय लगेगा। कई मामलों में, GPU पर वास्तविक समय वीडियो फ़िल्टरिंग की जा सकती है, जो CPU का उपयोग करना संभव नहीं होगा।

फ़िल्टर के विकास को समाप्त करना

जब हमने shader लिखा, उसके बाद हमारे लिए एकमात्र चीज़ समान चरों के लिए बसने वाली है। आरंभीकरण के दौरान, हम शेल्डर के पाठ को सुपरक्लास को पास करते हैं, पॉइंटर्स को समरूप चर में परिभाषित करते हैं और कुछ डिफ़ॉल्ट मान सेट करते हैं।
@ कार्यान्वयन के बाद निम्न कोड जोड़ें:

कोड

 @synthesize center = _center; @synthesize pixelSize = _pixelSize; #pragma mark - #pragma mark Initialization and teardown - (id)init { if (!(self = [super initWithFragmentShaderFromString:kGPUImagePolarPixellatePosterizeFragmentShaderString])) { return nil; } pixelSizeUniform = [filterProgram uniformIndex:@"pixelSize"]; centerUniform = [filterProgram uniformIndex:@"center"]; self.pixelSize = CGSizeMake(0.05, 0.05); self.center = CGPointMake(0.5, 0.5); return self; }

जब initWithFragmentShaderFromString का आह्वान किया जाता है, तो हमारी शेप सत्यापन और संकलन के लिए उपयुक्त तरीकों से गुजरती है, ताकि यह GPU पर चलने के लिए तैयार हो। यदि हम एक ही तरीके से वर्टेक्स शेडर प्रस्तुत करना चाहते थे, तो उसके लिए सभी समान कार्यों से गुजरना एक ही चुनौती है।
हमें अपने shader में निहित प्रत्येक वर्दी - चर के लिए [filterProgram वर्दीIndex:] कॉल करना चाहिए। यह विधि एक समान चर के लिए Glint प्रकार का एक संकेतक लौटाती है, जिसके साथ हम चर का मान सेट कर सकते हैं।
अंत में, हम आरंभिक अवस्था में कुछ डिफ़ॉल्ट मान सेट करते हैं, ताकि हमारा फ़िल्टर उपयोगकर्ता के हस्तक्षेप के बिना काम करे।
आखिरी चीज जो हमें करने की ज़रूरत है वह है कि हमारे समान चर के लिए सेटर्स और गेटर्स सेट करें:

कोड

 - (void)setPixelSize:(CGSize)pixelSize { _pixelSize = pixelSize; [self setSize:pixelSize forUniform: pixelSizeUniform program:filterProgram]; } - (void)setCenter:(CGPoint)newValue; { _center = newValue; [self setPoint:newValue forUniform: centerUniform program:filterProgram]; }

एक एप्लिकेशन बनाएं

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

कोड

 #import "JGViewController.h" #import "GPUImage.h" #import "GPUImagePolarPixellatePosterizeFilter.h" @interface JGViewController () { GPUImageVideoCamera *vc; GPUImagePolarPixellatePosterizeFilter *ppf; } @end @implementation JGViewController - (void)viewDidLoad { [super viewDidLoad]; vc = [[GPUImageVideoCamera alloc] initWithSessionPreset:AVCaptureSessionPreset640x480 cameraPosition:AVCaptureDevicePositionBack ]; vc.outputImageOrientation = UIInterfaceOrientationPortrait; ppf = [[GPUImagePolarPixellatePosterizeFilter alloc] init]; [vc addTarget:ppf]; GPUImageView *v = [[GPUImageView alloc] init]; [ppf addTarget:v]; self.view = v; [vc startCameraCapture]; } -(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event { CGPoint location = [[touches anyObject] locationInView:self.view]; CGSize pixelS = CGSizeMake(location.x / self.view.bounds.size.width * 0.5, location.y / self.view.bounds.size.height * 0.5); [ppf setPixelSize:pixelS]; } -(void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event { CGPoint location = [[touches anyObject] locationInView:self.view]; CGSize pixelS = CGSizeMake(location.x / self.view.bounds.size.width * 0.5, location.y / self.view.bounds.size.height * 0.5); [ppf setPixelSize:pixelS]; }

हम एक विशेष रिज़ॉल्यूशन और GPUImageVideoCamera और हमारे GPUImagePolarPixellatePosterizeFilter फ़िल्टर के स्थान के साथ एक वीडियो कैमरा बनाते हैं।
और GPUImageView को हमारे व्यू कंट्रोलर के मुख्य दृश्य के रूप में सेट करें।
इस प्रकार, हमारी पाइपलाइन इस तरह दिखती है: कैमरे से वीडियो - फ़िल्टर pikselizatsii और पास्चराइजेशन (polarpixellateposterizefilter) - GPUImageView, जिसका उपयोग हम फोन स्क्रीन पर वीडियो प्रदर्शित करने के लिए करेंगे।

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

शेड्स का उपयोग करके इमेज प्रोसेसिंग के अन्य उदाहरण

छवि में लाल और हरे रंग के स्तर को कम करना, नीला बढ़ाना:

कोड

 lowp vec4 color = sampler2D(inputImageTexture, textureCoordinate); lowp vec4 alter = vec4(0.1, 0.5, 1.5, 1.0); gl_FragColor = color * alter;

चमक में कमी:

कोड

 lowp vec4 textureColor = texture2D(inputImageTexture, textureCoordinate); gl_FragColor = vec4((textureColor.rgb + vec3(-0.5)), textureColor.w);

लोकप्रिय छवि धुंधला:

कोड

 mediump float texelWidthOffset = 0.01; mediump float texelHeightOffset = 0.01; vec2 firstOffset = vec2(1.5 * texelWidthOffset, 1.5 * texelHeightOffset); vec2 secondOffset = vec2(3.5 * texelWidthOffset, 3.5 * texelHeightOffset); mediump oneStepLeftTextureCoordinate = inputTextureCoordinate - firstOffset; mediump twoStepsLeftTextureCoordinate = inputTextureCoordinate - secondOffset; mediump oneStepRightTextureCoordinate = inputTextureCoordinate + firstOffset; mediump twoStepsRightTextureCoordinate = inputTextureCoordinate + secondOffset; mediump vec4 fragmentColor = texture2D(inputImageTexture, inputTextureCoordinate) * 0.2; fragmentColor += texture2D(inputImageTexture, oneStepLeftTextureCoordinate) * 0.2; fragmentColor += texture2D(inputImageTexture, oneStepRightTextureCoordinate) * 0.2; fragmentColor += texture2D(inputImageTexture, twoStepsLeftTextureCoordinate) * 0.2; fragmentColor += texture2D(inputImageTexture, twoStepsRightTextureCoordinate) * 0.2; gl_FragColor = fragmentColor;

GPUImage के साथ शुरुआत करना काफी आसान है और यह आपके द्वारा सपने में देखी गई हर चीज को मूर्त रूप देने के लिए काफी शक्तिशाली है। और इससे भी अधिक, GPUImage फिल्टर, रंग सेटिंग्स, सम्मिश्रण मोड और दृश्य प्रभावों की एक चक्करदार संख्या है जो आप केवल सपने देख सकते हैं (या यहां तक कि उनके अस्तित्व के बारे में भी नहीं जानते थे)। आप आधुनिक फिल्टर का उपयोग करके उदाहरणों का एक गुच्छा पा सकते हैं जिसमें किनारे की पहचान, फिषेई, और अन्य ठंडे सामान का एक टन शामिल है।
स्रोत कोड
OpenGL ES 2.0 (GLSL) और ग्राफिक्स पाइपलाइन डिवाइस का परिचय: एक , दो , तीन ।
लेख ज्ञान प्रसंस्करण और अनुवाद के साथ एक रचनात्मक अनुकूलन है: स्रोत 1 , स्रोत 2

जीपीयूइमेज उदाहरण का उपयोग करके शेड का परिचय

GPUImage ढांचा

GPU बनाम CPU

GPUImage बनाम कोर छवि

GPUImage संरचना

वर्टेक्स शेड्स GPUImage

एक नया GPUImage प्रोजेक्ट बनाएं

ध्रुवीय पिक्सेलेट पोस्टर को फ़िल्टर करते हैं

हमारे पहले shader

फ़िल्टर के विकास को समाप्त करना

एक एप्लिकेशन बनाएं

शेड्स का उपयोग करके इमेज प्रोसेसिंग के अन्य उदाहरण

More articles: