🔛 🤷🏻 👩🏾‍🤝‍👨🏿 वेब के लिए एक कार्टून वाटर शेडर बनाएं। भाग 1 💆🏻 👴🏿 🎅🏼

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

यहां बताया गया है कि तैयार प्रभाव कैसा दिखेगा। एक इंटरेक्टिव डेमो यहां देखा जा सकता है ।

इस प्रभाव में निम्नलिखित तत्व होते हैं:

पानी के पारभासी जाल के साथ उपविभाजित बहुभुज और लहरों को बनाने के लिए लंबवत ऑफसेट।
सतह पर स्थिर जल रेखाएँ।
नकली नाव उछाल।
पानी में वस्तुओं की सीमाओं के चारों ओर फोम की गतिशील लाइनें।
पानी के नीचे सब कुछ की विकृति पैदा करने के लिए पोस्ट-प्रोसेसिंग।

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

इस ट्यूटोरियल में, मैं PlayCanvas का उपयोग करूँगा , केवल इसलिए कि यह एक सुविधाजनक मुफ्त वेब-आईडीई है, लेकिन सब कुछ किसी भी समस्या के बिना किसी भी WebGL वातावरण में लागू किया जा सकता है। लेख के अंत में, थ्री.जे के लिए स्रोत कोड संस्करण प्रस्तुत किया जाएगा। हम मान लेंगे कि आप पहले से ही टुकड़े टुकड़े और PlayCanvas इंटरफ़ेस में अच्छी तरह से वाकिफ हैं। आप यहाँ shaders के बारे में अपने ज्ञान को ताज़ा कर सकते हैं , और यहाँ PlayCanvas से परिचित हो सकते हैं ।

पर्यावरण की स्थापना

इस खंड का उद्देश्य हमारे प्लेकैनवास परियोजना को कॉन्फ़िगर करना और इसमें कई पर्यावरणीय वस्तुओं को सम्मिलित करना है जो पानी को प्रभावित करेंगे।

यदि आपके पास PlayCanvas खाता नहीं है, तो इसे पंजीकृत करें और एक नया रिक्त प्रोजेक्ट बनाएं। डिफ़ॉल्ट रूप से, आपके पास दृश्य में कुछ ऑब्जेक्ट, एक कैमरा और एक प्रकाश स्रोत होना चाहिए।

मॉडल सम्मिलित करें

वेब के लिए 3 डी मॉडल खोजने के लिए एक महान संसाधन Google पॉली प्रोजेक्ट है। मैंने वहां से नाव का मॉडल लिया। आर्काइव को डाउनलोड करने और अनपैक करने के बाद, आपको इसमें .obj और .png फाइलें .obj ।

PlayCanvas परियोजना के एसेट्स विंडो में दोनों फ़ाइलों को खींचें।
स्वचालित रूप से जेनरेट की गई सामग्री का चयन करें और .png फ़ाइल को उसके प्रसार मानचित्र के रूप में चुनें।

अब आप Tugboat.json को दृश्य में खींच सकते हैं और बॉक्स और प्लेन ऑब्जेक्ट हटा सकते हैं। यदि नाव बहुत छोटी लगती है, तो आप इसका पैमाना बढ़ा सकते हैं (मैंने मान को 50 पर सेट किया है)।

इसी तरह, आप किसी भी अन्य मॉडल को दृश्य में जोड़ सकते हैं।

परिक्रमा कैमरा

कक्षा में उड़ने वाले कैमरे को कॉन्फ़िगर करने के लिए, हम इस PlayCanvas उदाहरण से स्क्रिप्ट की नकल करेंगे। लिंक का पालन करें और प्रोजेक्ट खोलने के लिए संपादक पर क्लिक करें।

इस ट्यूटोरियल प्रोजेक्ट से mouse-input.js और orbit-camera.js की सामग्री को अपने प्रोजेक्ट से समान नामों वाली फाइलों में कॉपी करें।
कैमरे में एक स्क्रिप्ट घटक जोड़ें।
कैमरे के लिए दो स्क्रिप्ट संलग्न करें।

संकेत: प्रोजेक्ट को व्यवस्थित करने के लिए, आप एसेट्स विंडो में फ़ोल्डर बना सकते हैं। मैंने इन दो कैमरा स्क्रिप्ट को लिपियों / कैमरा / फ़ोल्डर, मॉडल में मेरा मॉडल / और सामग्री / फ़ोल्डर में सामग्री डाल दिया।

अब जब आप गेम शुरू करते हैं (दृश्य विंडो के ऊपरी दाएं हिस्से में लॉन्च बटन) तो आपको एक नाव दिखनी चाहिए जिसे आप माउस के साथ कक्षा में ले जाकर कैमरे से निरीक्षण कर सकते हैं।

पानी की सतह बहुभुज डिवीजन

इस खंड का उद्देश्य एक उप-विभाजित जाल बनाना है जो पानी की सतह के रूप में उपयोग किया जाएगा।

पानी की सतह बनाने के लिए, हम राहत पीढ़ी के ट्यूटोरियल से कोड का हिस्सा अनुकूलित करते हैं। एक नई Water.js स्क्रिप्ट Water.js बनाएँ। संपादन के लिए इस स्क्रिप्ट को खोलें और एक नया GeneratePlaneMesh फ़ंक्शन बनाएं जो इस तरह दिखाई देगा:

 Water.prototype.GeneratePlaneMesh = function(options){ // 1 -    ,     if(options === undefined) options = {subdivisions:100, width:10, height:10}; // 2 -  , UV   var positions = []; var uvs = []; var indices = []; var row, col; var normals; for (row = 0; row <= options.subdivisions; row++) { for (col = 0; col <= options.subdivisions; col++) { var position = new pc.Vec3((col * options.width) / options.subdivisions - (options.width / 2.0), 0, ((options.subdivisions - row) * options.height) / options.subdivisions - (options.height / 2.0)); positions.push(position.x, position.y, position.z); uvs.push(col / options.subdivisions, 1.0 - row / options.subdivisions); } } for (row = 0; row < options.subdivisions; row++) { for (col = 0; col < options.subdivisions; col++) { indices.push(col + row * (options.subdivisions + 1)); indices.push(col + 1 + row * (options.subdivisions + 1)); indices.push(col + 1 + (row + 1) * (options.subdivisions + 1)); indices.push(col + row * (options.subdivisions + 1)); indices.push(col + 1 + (row + 1) * (options.subdivisions + 1)); indices.push(col + (row + 1) * (options.subdivisions + 1)); } } //   normals = pc.calculateNormals(positions, indices); //    var node = new pc.GraphNode(); var material = new pc.StandardMaterial(); //   var mesh = pc.createMesh(this.app.graphicsDevice, positions, { normals: normals, uvs: uvs, indices: indices }); var meshInstance = new pc.MeshInstance(node, mesh, material); //      var model = new pc.Model(); model.graph = node; model.meshInstances.push(meshInstance); this.entity.addComponent('model'); this.entity.model.model = model; this.entity.model.castShadows = false; //   ,       };

अब हम इसे initialize फंक्शन में कह सकते हैं:

 Water.prototype.initialize = function() { this.GeneratePlaneMesh({subdivisions:100, width:10, height:10}); };

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

समस्या 1: प्रत्येक वर्टेक्स के Y निर्देशांक को एक यादृच्छिक मान द्वारा स्थानांतरित करें ताकि विमान नीचे की आकृति जैसा दिखे।

लहरें

इस अनुभाग का उद्देश्य अपनी स्वयं की सामग्री की पानी की सतह को नामित करना और एनिमेटेड तरंगों को बनाना है।

हमारे द्वारा आवश्यक प्रभावों को प्राप्त करने के लिए, आपको अपनी स्वयं की सामग्री को कॉन्फ़िगर करना होगा। अधिकांश 3D इंजनों में वस्तुओं के प्रतिपादन के लिए पूर्वनिर्धारित शेड्स का एक सेट होता है और उन्हें फिर से परिभाषित करने का एक तरीका होता है। PlayCanvas में यह कैसे करना है इसकी एक अच्छी लिंक यहाँ दी गई है।

शेडर अटैचमेंट

आइए एक नया CreateWaterMaterial फ़ंक्शन बनाएं जो CreateWaterMaterial नई सामग्री को एक बदले हुए शेडर के साथ CreateWaterMaterial और उसे वापस करता है:

 Water.prototype.CreateWaterMaterial = function(){ //     var material = new pc.Material(); //    ,       material.name = "DynamicWater_Material"; //    //        . var gd = this.app.graphicsDevice; var fragmentShader = "precision " + gd.precision + " float;\n"; fragmentShader = fragmentShader + this.fs.resource; var vertexShader = this.vs.resource; //       . var shaderDefinition = { attributes: { aPosition: pc.gfx.SEMANTIC_POSITION, aUv0: pc.SEMANTIC_TEXCOORD0, }, vshader: vertexShader, fshader: fragmentShader }; //     this.shader = new pc.Shader(gd, shaderDefinition); //      material.setShader(this.shader); return material; };

यह फ़ंक्शन स्क्रिप्ट विशेषताओं से वर्टेक्स और टुकड़ा shader कोड लेता है। तो चलो उन्हें फ़ाइल के शीर्ष पर परिभाषित करें ( pc.createScript लाइन के बाद):

 Water.attributes.add('vs', { type: 'asset', assetType: 'shader', title: 'Vertex Shader' }); Water.attributes.add('fs', { type: 'asset', assetType: 'shader', title: 'Fragment Shader' });

अब हम इन shader फ़ाइलों को बना सकते हैं और इसे अपनी स्क्रिप्ट में संलग्न कर सकते हैं। संपादक पर लौटें और दो shader फ़ाइलें बनाएँ: Water.frag और Water.vert । नीचे दिए गए चित्र में दिखाए गए अनुसार इन शेड्स को स्क्रिप्ट में संलग्न करें।

यदि संपादक में नई विशेषताएँ प्रदर्शित नहीं होती हैं, तो स्क्रिप्ट को अपडेट करने के लिए पार्स बटन पर क्लिक करें।

अब इस मूल shader को Water.frag में चिपकाएँ :

 void main(void) { vec4 color = vec4(0.0,0.0,1.0,0.5); gl_FragColor = color; }

और यह एक Water.vert में है :

 attribute vec3 aPosition; uniform mat4 matrix_model; uniform mat4 matrix_viewProjection; void main(void) { gl_Position = matrix_viewProjection * matrix_model * vec4(aPosition, 1.0); }

अंत में, मानक सामग्री के बजाय हमारी नई सामग्री का उपयोग करने के लिए Water.js पर लौटें। इसके बजाय, यह है:

 var material = new pc.StandardMaterial();

सम्मिलित करें:

 var material = this.CreateWaterMaterial();

अब, खेल शुरू करने के बाद, विमान नीला होना चाहिए।

गर्म रिबूट

अभी के लिए, हम अपनी नई सामग्री के लिए सिर्फ shader blanks सेट करते हैं। इससे पहले कि मैं वास्तविक प्रभाव लिखना शुरू करूं, मैं स्वचालित कोड को फिर से लोड करना चाहता हूं।

किसी भी स्क्रिप्ट फ़ाइल (उदाहरण के लिए, Water.js में) में swap फ़ंक्शन को अनइंस्टॉल करने के बाद, हम हॉट रीलोडिंग को सक्षम करेंगे। बाद में हम देखेंगे कि वास्तविक समय में कोड को अपडेट करते समय भी स्थिति बनाए रखने के लिए इसका उपयोग कैसे करें। लेकिन अभी के लिए, हम केवल बदलाव करने के बाद शेड्स को फिर से लागू करना चाहते हैं। WebGL में चलने से पहले, शेड्स संकलित किए जाते हैं, इसलिए ऐसा करने के लिए हमें अपनी सामग्री को फिर से बनाने की आवश्यकता है।

हम जांच करेंगे कि क्या हमारे shader कोड की सामग्री बदल गई है, और यदि हां, तो सामग्री को फिर से बनाएं। सबसे पहले, प्रारंभिक शेडर्स को इनिशियलाइज़ में सहेजें:

 //  initialize,       Water.prototype.initialize = function() { this.GeneratePlaneMesh(); //    this.savedVS = this.vs.resource; this.savedFS = this.fs.resource; };

और यदि कोई परिवर्तन हुआ है तो हम अपडेट करते हैं:

 //  update,     Water.prototype.update = function(dt) { if(this.savedFS != this.fs.resource || this.savedVS != this.vs.resource){ //   ,      var newMaterial = this.CreateWaterMaterial(); //     var model = this.entity.model.model; model.meshInstances[0].material = newMaterial; //    this.savedVS = this.vs.resource; this.savedFS = this.fs.resource; } };

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

 vec4 color = vec4(0.0,0.7,1.0,0.5);

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

तरंगों को बनाने के लिए, हमें अपने जाल के प्रत्येक शीर्ष को प्रत्येक फ्रेम में स्थानांतरित करना होगा। ऐसा लगता है कि यह बहुत अक्षम होगा, लेकिन प्रत्येक मॉडल के प्रत्येक शीर्ष को पहले से ही प्रत्येक प्रदान किए गए फ्रेम में बदल दिया जाता है। यही क्रिया शीर्षासन करता है।

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

डिफ़ॉल्ट रूप से एक शीर्ष shader मॉडल की दुनिया में एक स्थिति प्राप्त करता है और स्क्रीन पर अपनी स्थिति देता है। हमारा 3D दृश्य x, y और z निर्देशांक में सेट किया गया है, लेकिन मॉनिटर एक सपाट द्वि-आयामी विमान है, इसलिए हम 3D स्क्रीन को 2D स्क्रीन पर प्रोजेक्ट करते हैं। प्रकार, प्रक्षेपण और मॉडल के मैट्रिक्स इस तरह के प्रक्षेपण में शामिल हैं, इसलिए हम इस ट्यूटोरियल में इस पर विचार नहीं करेंगे। लेकिन अगर आप समझना चाहते हैं कि प्रत्येक चरण में वास्तव में क्या होता है, तो यहां एक बहुत अच्छा मार्गदर्शक है ।

अर्थात्, यह रेखा:

 gl_Position = matrix_viewProjection * matrix_model * vec4(aPosition, 1.0);

किसी विशेष शीर्ष के 3D दुनिया में एक स्थिति के रूप में aPosition प्राप्त करता है और इसे gl_Position परिवर्तित करता है, अर्थात 2D स्क्रीन पर अंतिम स्थिति में। उपसर्ग में "उप" एक इंगित करता है कि यह मान एक विशेषता है । यह मत भूलो कि चर वर्दी एक मूल्य है जिसे हम सीपीयू में परिभाषित कर सकते हैं और इसे shader को पास कर सकते हैं। यह सभी पिक्सेल / कोने के लिए समान मूल्य रखता है। दूसरी ओर, निर्दिष्ट सीपीयू सरणी से विशेषता मान प्राप्त किया जाता है। इस विशेषता सरणी के प्रत्येक मान के लिए एक शीर्ष shader कहा जाता है।

आप देख सकते हैं कि ये विशेषताएँ उस शेडर परिभाषा में कॉन्फ़िगर की गई हैं जिसे हमने Water.js में सेट किया है:

 var shaderDefinition = { attributes: { aPosition: pc.gfx.SEMANTIC_POSITION, aUv0: pc.SEMANTIC_TEXCOORD0, }, vshader: vertexShader, fshader: fragmentShader };

प्लेकैनवास इस गणना को पारित करते समय aPosition लिए शीर्ष पदों की एक सरणी को स्थापित करने और संचारित करने का ख्याल रखता है, लेकिन सामान्य स्थिति में, हम किसी भी डेटा सरणी को वर्टेकर shader को पारित कर सकते हैं।

वर्टेक्स आंदोलन

मान लीजिए कि हम सभी x मानों को 0.5 से गुणा करके पूरे विमान को संपीड़ित करना चाहते हैं। क्या हमें aPosition या gl_Position बदलने की आवश्यकता है?

पहले aPosition । हम विशेषता को सीधे नहीं बदल सकते, लेकिन हम एक प्रति बना सकते हैं:

 attribute vec3 aPosition; uniform mat4 matrix_model; uniform mat4 matrix_viewProjection; void main(void) { vec3 pos = aPosition; pos.x *= 0.5; gl_Position = matrix_viewProjection * matrix_model * vec4(pos, 1.0); }

अब विमान को एक आयत की तरह दिखना चाहिए। और इसके बारे में कुछ भी अजीब नहीं है। लेकिन अगर हम gl_Position बदलने की कोशिश करें तो क्या होगा?

 attribute vec3 aPosition; uniform mat4 matrix_model; uniform mat4 matrix_viewProjection; void main(void) { vec3 pos = aPosition; //pos.x *= 0.5; gl_Position = matrix_viewProjection * matrix_model * vec4(pos, 1.0); gl_Position.x *= 0.5; }

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

इसलिए हम कार्यक्षेत्रों को स्थानांतरित कर सकते हैं, और साथ ही यह दुनिया और स्क्रीन स्पेस में काम के बीच अंतर करना महत्वपूर्ण है।

टास्क 2: क्या आप अपने शेप को विकृत किए बिना प्लेन की पूरी सतह को कई यूनिट ऊपर (Y अक्ष के साथ) वर्टिकल शैडर में स्थानांतरित कर सकते हैं?

कार्य 3: मैंने कहा कि gl_Position द्वि-आयामी है, लेकिन gl_Position.z भी मौजूद है। क्या आप यह देखने के लिए जांच सकते हैं कि क्या यह मूल्य कुछ को प्रभावित करता है, और यदि हां, तो इसका क्या उपयोग किया जाता है?

समय जोड़ना

चलती लहरों को बनाने के लिए शुरू करने से पहले हमें जो आखिरी चीज चाहिए वह एक समान चर है जिसे समय के रूप में इस्तेमाल किया जा सकता है। शिखर की छाया में समान घोषित करें:

 uniform float uTime;

अब, इसे shader में पास करने के लिए, चलिए Water.js पर वापस जाते हैं और प्रारंभ में समय चर को परिभाषित करते हैं:

 Water.prototype.initialize = function() { this.time = 0; /////     this.GeneratePlaneMesh(); //    this.savedVS = this.vs.resource; this.savedFS = this.fs.resource; };

अब, चर को छायादार में स्थानांतरित करने के लिए, हम material.setParameter उपयोग material.setParameter । सबसे पहले, हम CreateWaterMaterial फ़ंक्शन के अंत में प्रारंभिक मान सेट करते हैं:

 //     this.shader = new pc.Shader(gd, shaderDefinition); //////////////   material.setParameter('uTime',this.time); this.material = material; //      //////////////// //      material.setShader(this.shader); return material;

अब, update फ़ंक्शन में, हम समय की वृद्धि कर सकते हैं और इसके लिए बनाई गई लिंक का उपयोग करके सामग्री तक पहुंच सकते हैं:

 this.time += 0.1; this.material.setParameter('uTime',this.time);

अंत में, स्वैप फ़ंक्शन में, हम पुराने समय के मूल्य को कॉपी करते हैं ताकि कोड बदलने के बाद भी, यह 0 पर रीसेट किए बिना बढ़ता रहे।

 Water.prototype.swap = function(old) { this.time = old.time; };

अब सब कुछ तैयार है। कोई त्रुटि नहीं है यह सुनिश्चित करने के लिए गेम चलाएँ। अब Water.vert में समय फ़ंक्शन का उपयोग करके अपने विमान को आगे Water.vert :

 pos.y += cos(uTime)

और हमारे विमान को ऊपर और नीचे चलना शुरू करना चाहिए! चूँकि अब हमारे पास एक स्वैप फंक्शन है, हम पुनः आरंभ किए बिना भी Water.js को अपडेट कर सकते हैं। यह सुनिश्चित करने के लिए कि यह काम करता है, समय वृद्धि को बदलने का प्रयास करें।

टास्क 4: क्या आप शीर्ष रेखाओं को स्थानांतरित कर सकते हैं ताकि वे नीचे की आकृति में लहरों की तरह दिखें?

आपको बता दूं कि मैंने यहां तरंगों के निर्माण के विभिन्न तरीकों के विषय में विस्तार से जांच की। लेख 2 डी से संबंधित है, लेकिन गणितीय गणना हमारे मामले पर लागू होती है। यदि आप केवल समाधान देखना चाहते हैं, तो यहाँ सार है ।

पारभासकता

इस खंड का उद्देश्य पारभासी जल की सतह बनाना है।

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

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

मिश्रण करते समय, केवल पिक्सेल या ओवरराइटिंग को अस्वीकार करने के बजाय, हम पिक्सेल के साथ पहले से ही प्रदान किए गए पिक्सेल (लक्ष्य) के रंग को जोड़ सकते हैं जिसे हम (स्रोत) आकर्षित करने जा रहे हैं। WebGL में उपलब्ध सभी मिक्सिंग फ़ंक्शंस की एक सूची यहां पाई जा सकती है ।

अल्फा चैनल के लिए हमारी अपेक्षाओं के अनुसार काम करने के लिए, हम चाहते हैं कि परिणाम का संयुक्त रंग एक अल्फा चैनल और एक लक्ष्य पिक्सेल को एक शून्य से गुणा करके एक स्रोत से गुणा किया जाए। दूसरे शब्दों में, यदि अल्फा = 0.4, तो अंतिम रंग का एक मूल्य होना चाहिए:

 finalColor = source * 0.4 + destination * 0.6;

PlayCanvas में, यह ऑपरेशन pc.BLEND_NORMAL है ।

इसे सक्षम करने के लिए, बस CreateWaterMaterial अंदर भौतिक संपत्ति सेट करें:

 material.blendType = pc.BLEND_NORMAL;

यदि आप अब खेल शुरू करते हैं, तो पानी पारभासी हो जाएगा! हालांकि, यह अभी भी अपूर्ण है। समस्या तब उत्पन्न होती है जब पारभासी सतह स्वयं पर सुपरिम्पोज हो जाती है, जैसा कि नीचे दिखाया गया है।

हम सम्मिश्रण के बजाय अल्फ़ा टू कवरेज , पारदर्शिता के लिए एक मल्टीसमापलिंग तकनीक का उपयोग करके इसे समाप्त कर सकते हैं:

 //material.blendType = pc.BLEND_NORMAL; material.alphaToCoverage = true;

लेकिन यह केवल WebGL 2 में उपलब्ध है। बाकी ट्यूटोरियल में, सरलता के लिए, मैं मिश्रण का उपयोग करूंगा।

संक्षेप में देना

हमने पर्यावरण की स्थापना की और पानी की एक पारभासी सतह का निर्माण किया, जो वर्टेकर शेडर से एनिमेटेड तरंगों के साथ है। ट्यूटोरियल के दूसरे भाग में, हम ऑब्जेक्ट्स की उछाल पर विचार करेंगे, पानी की सतह पर लाइनों को जोड़ेंगे और सतह के साथ इंटरसेक्टिंग ऑब्जेक्ट्स की सीमाओं के साथ फोम लाइनें बनाएंगे।

तीसरे (अंतिम) भाग में, हम पानी के नीचे की विकृतियों के बाद के प्रसंस्करण प्रभाव के आवेदन पर विचार करेंगे और आगे के सुधार के लिए विचारों पर विचार करेंगे।

स्रोत कोड

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

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