वेब के लिए एक कार्टून वाटर शेडर बनाएं। भाग 3

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

अपवर्तन और पश्च-प्रसंस्करण प्रभाव

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

पोस्ट प्रोसेसिंग

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

PlayCanvas में, आप एक नई स्क्रिप्ट बनाकर इस पोस्ट-प्रोसेसिंग प्रभाव को अनुकूलित कर सकते हैं। चलो इसे Refraction.js कहते हैं और इस टेम्पलेट को रिक्त के रूप में कॉपी करते हैं:

//---------------   ------------------------// pc.extend(pc, function () { //  -      var RefractionPostEffect = function (graphicsDevice, vs, fs, buffer) { var fragmentShader = "precision " + graphicsDevice.precision + " float;\n"; fragmentShader = fragmentShader + fs; //      this.shader = new pc.Shader(graphicsDevice, { attributes: { aPosition: pc.SEMANTIC_POSITION }, vshader: vs, fshader: fs }); this.buffer = buffer; }; //      pc.PostEffect RefractionPostEffect = pc.inherits(RefractionPostEffect, pc.PostEffect); RefractionPostEffect.prototype = pc.extend(RefractionPostEffect.prototype, { //      render, //    ,    , //       render: function (inputTarget, outputTarget, rect) { var device = this.device; var scope = device.scope; //       .  ,     scope.resolve("uColorBuffer").setValue(inputTarget.colorBuffer); //       .       . //          pc.drawFullscreenQuad(device, outputTarget, this.vertexBuffer, this.shader, rect); } }); return { RefractionPostEffect: RefractionPostEffect }; }()); //---------------  ------------------------// var Refraction = pc.createScript('refraction'); Refraction.attributes.add('vs', { type: 'asset', assetType: 'shader', title: 'Vertex Shader' }); Refraction.attributes.add('fs', { type: 'asset', assetType: 'shader', title: 'Fragment Shader' }); //  initialize       Refraction.prototype.initialize = function() { var effect = new pc.RefractionPostEffect(this.app.graphicsDevice, this.vs.resource, this.fs.resource); //     postEffects var queue = this.entity.camera.postEffects; queue.addEffect(effect); this.effect = effect; //       this.savedVS = this.vs.resource; this.savedFS = this.fs.resource; }; Refraction.prototype.update = function(){ if(this.savedFS != this.fs.resource || this.savedVS != this.vs.resource){ this.swap(this); } }; Refraction.prototype.swap = function(old){ this.entity.camera.postEffects.removeEffect(old.effect); this.initialize(); }; 

यह एक नियमित स्क्रिप्ट के समान है, लेकिन हम RefractionPostEffect वर्ग को परिभाषित करते हैं जिसे कैमरे पर लागू किया जा सकता है। रेंडरिंग के लिए, इसे वर्टेक्स और फ्रेगमेंट शेड्स की जरूरत होती है। विशेषताएँ पहले से ही कॉन्फ़िगर की गई हैं, इसलिए निम्न सामग्री के साथ Refraction.frag बनाएं:

 precision highp float; uniform sampler2D uColorBuffer; varying vec2 vUv0; void main() { vec4 color = texture2D(uColorBuffer, vUv0); gl_FragColor = color; } 

और Refract.vert एक मूल शीर्ष shader के साथ:

 attribute vec2 aPosition; varying vec2 vUv0; void main(void) { gl_Position = vec4(aPosition, 0.0, 1.0); vUv0 = (aPosition.xy + 1.0) * 0.5; } 

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

केवल रंग को Refraction.frag पर वापस करने के बजाय, लाल घटक को 1.0 पर सेट करने का प्रयास करें, जो छवि को नीचे दिखाए गए चित्र को देना चाहिए।

विरूपण shader

एक एनिमेटेड विरूपण बनाने के लिए, हमें एक समान समय चर जोड़ना होगा, तो आइए इसे Refraction.js में इस पोस्ट-इफेक्ट निर्माता के अंदर बनाएं:

 var RefractionPostEffect = function (graphicsDevice, vs, fs) { var fragmentShader = "precision " + graphicsDevice.precision + " float;\n"; fragmentShader = fragmentShader + fs; //       this.shader = new pc.Shader(graphicsDevice, { attributes: { aPosition: pc.SEMANTIC_POSITION }, vshader: vs, fshader: fs }); // >>>>>>>>>>>>>    this.time = 0; }; 

अब रेंडर फंक्शन के अंदर, हम इसे बढ़ाने के लिए अपने shader को पास करते हैं:

 RefractionPostEffect.prototype = pc.extend(RefractionPostEffect.prototype, { //      render, //      , //       render: function (inputTarget, outputTarget, rect) { var device = this.device; var scope = device.scope; //       .  ,     scope.resolve("uColorBuffer").setValue(inputTarget.colorBuffer); /// >>>>>>>>>>>>>>>>>>    uniform-  scope.resolve("uTime").setValue(this.time); this.time += 0.1; //       .       . //          pc.drawFullscreenQuad(device, outputTarget, this.vertexBuffer, this.shader, rect); } }); 

अब हम पानी के विरूपण ट्यूटोरियल से एक ही shader कोड का उपयोग कर सकते हैं, हमारे पूर्ण टुकड़ा shader को निम्नलिखित में बदल सकते हैं:

 precision highp float; uniform sampler2D uColorBuffer; uniform float uTime; varying vec2 vUv0; void main() { vec2 pos = vUv0; float X = pos.x*15.+uTime*0.5; float Y = pos.y*15.+uTime*0.5; pos.y += cos(X+Y)*0.01*cos(Y); pos.x += sin(XY)*0.01*sin(Y); vec4 color = texture2D(uColorBuffer, pos); gl_FragColor = color; } 

यदि सब कुछ सही ढंग से किया जाता है, तो पूरी तस्वीर को ऐसा दिखना चाहिए जैसे कि यह पूरी तरह से पानी के नीचे है।

कार्य 1: सुनिश्चित करें कि विरूपण केवल स्क्रीन के निचले भाग पर लागू होता है।

कैमरा मास्क

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


यह बनावट में प्रस्तुत करेगा जिसे हम मुखौटा के रूप में उपयोग करते हैं। फिर हम इस बनावट को अपने अपवर्तन शैडर में स्थानांतरित कर देंगे, जो पिक्सेल को तैयार छवि में विकृत कर देगा, जब मुखौटा में संबंधित पिक्सेल सफेद होगा।

आइए यह जानने के लिए कि क्या इसे मास्क के रूप में उपयोग किया जाता है, पानी की सतह पर एक बूलियन विशेषता जोड़ते हैं। निम्नलिखित को Water.js में जोड़ें:

 Water.attributes.add('isMask', {type:'boolean',title:"Is Mask?"}); 

फिर, हमेशा की तरह, हम इसे material.setParameter('isMask',this.isMask); के साथ shader को पास कर सकते हैं material.setParameter('isMask',this.isMask); । फिर इसे वाटर.फ्रैग में घोषित करें और यदि विशेषता सही हो तो पिक्सेल को सफेद रंग दें।

 //    uniform uniform bool isMask; //      ,    //    true if(isMask){ color = vec4(1.0); } 

सुनिश्चित करें कि यह "मुखौटा?" संपत्ति को चालू करके काम करता है। संपादक में और खेल को पुनरारंभ करना। यह सफेद दिखना चाहिए, जैसा कि ऊपर की छवि में है।

अब, दृश्य को फिर से प्रस्तुत करने के लिए, हमें एक दूसरे कैमरे की आवश्यकता है। एडिटर में एक नया कैमरा बनाएं और उसे कैमरामास्क कहें । हम संपादक में जल इकाई की नकल करते हैं और डुप्लिकेट वाटरमास्क का नाम देते हैं । इकाई के लिए सुनिश्चित करें "पानी मास्क है?" गलत है, और वाटरमास्क सच है।

एक स्क्रीन के बजाय एक बनावट को प्रस्तुत करने के लिए एक नया कैमरा ऑर्डर करने के लिए, एक नया CameraMask.js स्क्रिप्ट बनाएं और इसे नए कैमरे से संलग्न करें। हम इस कैमरे के आउटपुट को कैप्चर करने के लिए एक RenderTarget बनाते हैं:

 //  initialize       CameraMask.prototype.initialize = function() { //  512x512x24-      var colorBuffer = new pc.Texture(this.app.graphicsDevice, { width: 512, height: 512, format: pc.PIXELFORMAT_R8_G8_B8, autoMipmap: true }); colorBuffer.minFilter = pc.FILTER_LINEAR; colorBuffer.magFilter = pc.FILTER_LINEAR; var renderTarget = new pc.RenderTarget(this.app.graphicsDevice, colorBuffer, { depth: true }); this.entity.camera.renderTarget = renderTarget; }; 

अब एप्लिकेशन को लॉन्च करने के बाद, आप देखेंगे कि यह कैमरा अब स्क्रीन पर रेंडर नहीं करता है। हम Refraction.js में इसके लक्ष्य रेंडर का आउटपुट निम्नानुसार प्राप्त कर सकते हैं:

 Refraction.prototype.initialize = function() { var cameraMask = this.app.root.findByName('CameraMask'); var maskBuffer = cameraMask.camera.renderTarget.colorBuffer; var effect = new pc.RefractionPostEffect(this.app.graphicsDevice, this.vs.resource, this.fs.resource, maskBuffer); // ... //     ,    }; 

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

 ////       var RefractionPostEffect = function (graphicsDevice, vs, fs, buffer) { var fragmentShader = "precision " + graphicsDevice.precision + " float;\n"; fragmentShader = fragmentShader + fs; //       this.shader = new pc.Shader(graphicsDevice, { attributes: { aPosition: pc.SEMANTIC_POSITION }, vshader: vs, fshader: fs }); this.time = 0; //// <<<<<<<<<<<<<    this.buffer = buffer; }; 

अंत में, रेंडर फंक्शन में, हम बफर को अपने शेडर में पास करते हैं:

 scope.resolve("uMaskBuffer").setValue(this.buffer); 

अब, यह सुनिश्चित करने के लिए कि यह सब काम करता है, मैं इसे एक कार्य के रूप में आपके पास छोड़ दूंगा।

कार्य 2: यह सुनिश्चित करने के लिए स्क्रीन पर uMaskBuffer प्रस्तुत करें कि यह दूसरे कैमरे का आउटपुट है।

निम्नलिखित पर विचार किया जाना चाहिए: लक्ष्य रेंडर को CameraMask.js स्क्रिप्ट के आरंभ में कॉन्फ़िगर किया गया है, और यह उस समय तक तैयार होना चाहिए जब Refraction.js कहा जाता है। यदि स्क्रिप्ट अलग तरीके से काम करती है, तो हमें एक त्रुटि मिलती है। यह सुनिश्चित करने के लिए कि वे सही क्रम में काम करते हैं, कैमरामास्क को संपादक में इकाई सूची के शीर्ष पर खींचें, जैसा कि नीचे दिखाया गया है।


दूसरे कैमरे को हमेशा मूल दृश्य के समान दृश्य के साथ देखना चाहिए, तो चलो इसे हमेशा अपडेट में CameraMask.js स्क्रिप्ट के स्थान और रोटेशन का पालन करें:

 CameraMask.prototype.update = function(dt) { var pos = this.CameraToFollow.getPosition(); var rot = this.CameraToFollow.getRotation(); this.entity.setPosition(pos.x,pos.y,pos.z); this.entity.setRotation(rot); }; 

आरंभ में, CameraToFollow परिभाषित CameraToFollow :

 this.CameraToFollow = this.app.root.findByName('Camera'); 

क्लिपिंग मास्क

दोनों कैमरे अब एक ही बात प्रस्तुत करते हैं। हम चाहते हैं कि मास्क कैमरा वास्तविक पानी को छोड़कर सब कुछ प्रस्तुत करे, और असली कैमरा मास्क पानी को छोड़कर सब कुछ प्रस्तुत करे।

ऐसा करने के लिए, हम कैमरे के बिट-क्लिपिंग मास्क का उपयोग कर सकते हैं। यह टकराव मास्क के समान काम करता है। यदि कोई वस्तु बिटविंड AND उसके मास्क और कैमरा मास्क के बीच का परिणाम 1 है, तो उसे क्लिप किया जाएगा (अर्थात, रेंडर नहीं किया गया)।

मान लीजिए कि पानी में बिट 2 है और वाटरमास्क में 3 बिट है। 3 को छोड़कर सभी बिट्स को असली कैमरे के लिए सेट किया जाना चाहिए, और मास्क कैमरा के लिए 2 को छोड़कर सभी बिट्स। "एन को छोड़कर सभी बिट्स" कहने का सबसे आसान तरीका इस प्रकार है। जिस तरह से:

 ~(1 << N) >>> 0 

बिटवाइज़ ऑपरेशंस के बारे में और यहाँ पढ़ें।

कैमरा क्लिपिंग मास्क को कॉन्फ़िगर करने के लिए, हम CameraMask.js स्क्रिप्ट के इनिशियलाइज़ेशन के नीचे निम्नलिखित सम्मिलित कर सकते हैं:

  //   ,  2 this.entity.camera.camera.cullingMask &= ~(1 << 2) >>> 0; //   ,  3 this.CameraToFollow.camera.camera.cullingMask &= ~(1 << 3) >>> 0; //      ,   : // console.log((this.CameraToFollow.camera.camera.cullingMask >>> 0).toString(2)); 

अब Water.js में हम पानी की जाली के 2 बिट सेट करेंगे, और बिट 3 पर इसका मास्क संस्करण:

 //      initialize  Water.js //    var bit = this.isMask ? 3 : 2; meshInstance.mask = 0; meshInstance.mask |= (1 << bit); 

अब एक प्रजाति सादे पानी के साथ होगी, और दूसरी ठोस सफेद पानी के साथ। बाईं ओर की छवि मूल कैमरे से दृश्य दिखाती है, और दाईं ओर से मुखौटा कैमरे से दृश्य दिखाई देता है।

मुखौटा आवेदन

और अब अंतिम चरण! हम जानते हैं कि पानी के नीचे के क्षेत्रों को सफेद पिक्सल के साथ चिह्नित किया गया है। हमें केवल यह जांचने की आवश्यकता है कि क्या हम एक सफेद पिक्सेल में हैं, और यदि नहीं, तो अपवर्तन को बंद कर दें।

 //   ,      vec4 maskColor = texture2D(uMaskBuffer, pos); vec4 maskColor2 = texture2D(uMaskBuffer, vUv0); //     ? if(maskColor != vec4(1.0) || maskColor2 != vec4(1.0)){ //      pos = vUv0; } 

और इससे हमारी समस्या का समाधान होना चाहिए!

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

चौरसाई

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

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

निष्कर्ष में विचार

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

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

अब आपके पास एक सुंदर पानी का प्रभाव है जिसे आप अपने खेल में लागू कर सकते हैं! आप इसे कस्टमाइज़ कर सकते हैं और अपना विवरण जोड़ सकते हैं। पानी के साथ बहुत कुछ किया जा सकता है (मैंने किसी भी प्रकार के प्रतिबिंबों का भी उल्लेख नहीं किया है)। नीचे विचारों के एक जोड़े हैं।

शोर की लहरें

केवल कोसाइन और सेंस के संयोजन के साथ तरंगों को एनिमेट करने के बजाय, आप बनावट का नमूना ले सकते हैं ताकि लहरें थोड़ी अधिक प्राकृतिक और कम पूर्वानुमान लगें।

गतिशील फोम निशान

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

स्रोत कोड

समाप्त PlayCanvas परियोजना यहां पाई जा सकती है । हमारी रिपॉजिटरी में तीन . js के तहत एक प्रोजेक्ट पोर्ट भी है।