🤶🏾 🎯 👩🏿‍🚀 वेब वीआर एप्लिकेशन बनाने के लिए PlayCanvas सुविधाओं का अवलोकन 👕 🤟🏿 🔷

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

PlayCanvas में वर्कफ़्लो

PlayCanvas में सब कुछ एक दृश्य संपादक के साथ शुरू होता है।

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

स्क्रीन के केंद्र में दृश्य संपादक है। यहां आप संस्थाओं की व्यवस्था बदल सकते हैं, संपादन के लिए उनका चयन कर सकते हैं और बस यह देख सकते हैं कि आपका आवेदन दृश्य कैसा दिखेगा।

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

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

PlayCanvas में एप्लिकेशन और गेम विकसित करने की सामान्य प्रक्रिया लगभग इस प्रकार है:

हम आवश्यक संपत्ति जोड़ते हैं। उदाहरण के लिए: मॉडल, सामग्री, ऑडियो, वीडियो।
हम अपने दृश्य का वातावरण बनाते हैं। उदाहरण के लिए: शहर, घर, परिदृश्य।
सहभागी तत्व जोड़ें। उदाहरण के लिए: एक खिलाड़ी और उसके दुश्मन।
स्क्रिप्ट का उपयोग करके एप्लिकेशन लॉजिक जोड़ें।
गेम या एप्लिकेशन ऑनलाइन प्रकाशित करें।

PlayCanvas और जावास्क्रिप्ट

PlayCanvas में हमारे गेम या एप्लिकेशन में तर्क जोड़ने के लिए एक विशेष घटक है: एक स्क्रिप्ट। लिपियां वैश्विक हो सकती हैं, इस मामले में उन्हें दृश्य पदानुक्रम की जड़ इकाई में जोड़ा जाना चाहिए। स्थानीय लिपियों को सीधे पदानुक्रम के भीतर इकाई में जोड़ा जाता है (उदाहरण के लिए, खेल चरित्र के मॉडल के लिए)। सभी स्क्रिप्ट्स को जावास्क्रिप्ट में लिखा जाना चाहिए आखिरकार, हम ब्राउज़र में गेम लिखते हैं। ES6 प्रेमियों, दुर्भाग्य से, क्योंकि निराश हो जाएगा PlayCanvas अभी भी ES5 का उपयोग करता है, और जब आप ES6 से किसी प्रकार का डिज़ाइन लिखने का प्रयास करते हैं, तो अंतर्निहित लिंटर शपथ लेना शुरू कर देगा। सामान्य तौर पर, स्क्रिप्ट की शारीरिक रचना निम्न टेम्पलेट है:

var NewScript = pc.createScript('newScript'); NewScript.attributes.add('someString', { type: 'string', default: 'any', title: 'Some string' }); NewScript.prototype.initialize = function() { this.startPosition = this.entity.getPosition(); }; NewScript.prototype.update = function(dt) { this.entity.setLocalPosition(this.newPosition); }; NewScript.prototype.calcaulateNewPosition = function() { this.newPosition = this.startPosition.dot(pc.Vec3.ZERO) };

यहां हम एक नई स्क्रिप्ट बनाते हैं। उसे दो मुख्य विधियाँ मिलती हैं: इनिशियलाइज़ - तब कहा जाएगा जब इकाई को दृश्य में जोड़ा जाएगा। अद्यतन - प्रत्येक रेंडर फ्रेम कहा जाता है। अद्यतन में dt पैरामीटर डेल्टा समय है - दूसरे का% जिसके लिए अंतिम फ्रेम तैयार किया गया था। यह निम्नलिखित उदाहरण द्वारा अच्छी तरह से चित्रित किया गया है: आपको एक वस्तु को एक दूसरे 360 डिग्री में घुमाने की आवश्यकता है। हम निम्नलिखित कोड लिखते हैं:

 this.entity.rotate(0, 360 * dt, 0);

अंत में, अंतिम calcaulateNewPosition विधि एक कस्टम विधि है और इसका उपयोग संरचना कोड के लिए किया जा सकता है।

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

लिपियों को अंतर्निहित संपादक और आपके स्थानीय मशीन पर आपके लिए सुविधाजनक IDE दोनों में संपादित किया जा सकता है। लेकिन दूसरे मामले में, आपको सेटिंग्स के साथ खेलना होगा, क्योंकि आपको PlayCanvas के साथ जोड़े गए सर्वर को ऊपर उठाने की आवश्यकता है।

खैर, अब जब हमने PlayCanvas की मुख्य विशेषताओं को कवर किया है, तो हम PlayCanvas में आभासी वास्तविकता दृश्यों को बनाने के बारे में बात कर सकते हैं।

बॉक्स से बाहर वी.आर.

PlayCanvas आपको बॉक्स से बाहर एक वीआर दृश्य बनाने की अनुमति देता है। ऐसा करने के लिए, एक नया प्रोजेक्ट बनाते समय उचित विकल्प (वीआर स्टार्टर किट) का चयन करें। तो, चलिए देखते हैं कि PlayCanvas हमें क्या डिफॉल्ट करता है (स्पॉइलर: उतना नहीं जितना हम चाहेंगे)।

दृश्य को चलाने पर, आप अपने सामने तीन क्यूब्स देखेंगे। जब आप उन्हें टकटकी लगाते हैं (टकटकी नियंत्रण), एक प्रगति बार लॉन्च किया जाएगा, जो घन को पारदर्शी बना देगा। पीसी के लिए कोई नियंत्रक या WASD नियंत्रण नहीं है। संक्षेप में, यह प्रबंधन आपको कार्डबोर्ड के लिए एक छोटा अनुप्रयोग बनाने की अनुमति देता है, क्योंकि डिफ़ॉल्ट रूप से स्पर्श घटनाओं के लिए समर्थन है।

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

अब आइए स्टार्टर किट फ़ाइलों के माध्यम से यह जानने की कोशिश करें कि आपके लिए क्या जिम्मेदार है और आप इसे अपने उद्देश्यों के लिए कैसे उपयोग कर सकते हैं।

लुक- camera.js यहां तर्क है कि वीआर डिस्प्ले और कैमरे की जोड़ी के लिए जिम्मेदार है। इसके अलावा, माउस-नियंत्रक.जेएस या टच-कंट्रोलर। जेएस का उपयोग करके हम पीसी या मोबाइल फोन से कैमरे को नियंत्रित करने के लिए पिच और यॉ को संचारित कर सकते हैं।
चयनकर्ता- camera.js इस फ़ाइल में टकटकी नियंत्रण लागू करने के लिए तर्क छिपा है। प्रत्येक तत्व जो बातचीत के लिए उपलब्ध है, चयनकर्ता के माध्यम से जोड़ा जाना चाहिए: घटना जोड़ें। इसके अलावा, इसके एएबीबी को मैन्युअल रूप से गणना की जानी चाहिए। इसके अलावा आप यहां रे लॉजिक (रे \ रेस्कैस्टर) पा सकते हैं। PlayCanvas के पास एक विशेष वस्तु है। यह = new pc.Ray (); जो बाउंडिंगबॉक्स या बाउंडिंगस्फेयर के साथ चौराहों को खोजने के लिए जानता है।
web-vr-ui.js बस एक वीआर लॉगिन इंटरफ़ेस जोड़ता है। सच कहूँ तो, यह बहुत सुरुचिपूर्ण नहीं है। सभी स्क्रिप्ट और HTML सीधे इस स्क्रिप्ट में हैं। जाहिरा तौर पर यह इस तथ्य के कारण है कि इंटरफेस के लिए 2 डी स्क्रीन की अपनी सीमाएं हैं, और बटन को निचले दाएं कोने में कड़ाई से होना चाहिए।
box.js. यहां हमें क्यूब से जुड़े सभी तर्क मिलेंगे - प्रगति पट्टी का प्रबंधन, आदि।

जैसा कि आप ऊपर से देख सकते हैं, शुरुआती वीआर किट पर भरोसा करने के लिए बहुत कुछ नहीं है। यह सब किया जा सकता है एक कार्डबोर्ड अनुप्रयोग है और यह, मेरी राय में, बहुत दिलचस्प नहीं है, क्योंकि कार्डबोर्ड एक तरह का खिलौना है जो वीआर का उपयोग करने के सामान्य अनुभव का एक विचार नहीं देता है। आप वास्तव में Oculus Go, Oculus Rift या HTC Vive के साथ आभासी वास्तविकता में डूब सकते हैं।

अब बात करते हैं कि हम अपने आवेदन में नियंत्रक सहायता कैसे जोड़ सकते हैं।

वीआर नियंत्रक

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

संपादन के लिए VR ट्रैक्ड कंट्रोलर दृश्य खोलें। सबसे पहले हमें नियंत्रक को स्थानांतरित करने की आवश्यकता है:

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

अब हमें सामग्री जोड़ने की आवश्यकता है:

संपत्ति पैनल पर "+" बटन पर क्लिक करके एक नई सामग्री बनाएं। सामग्री नियंत्रक सामग्री का नाम बताएं।
अब हमें स्रोत परियोजना को खोलने और वहां ट्रैक-कंट्रोलर सामग्री खोजने की आवश्यकता है और सभी सामग्री को हमारे सामग्री में कॉपी करें, जिसमें मानक, एमिसिव, स्पेक्युलर और डिफ्यूज़ मैप (नक्शे) शामिल हैं।

अब आप पदानुक्रम पैनल में विशेष डुप्लिकेट बटन का उपयोग करके नियंत्रक को कॉपी कर सकते हैं और दूसरे नियंत्रक को सही नियंत्रक का नाम दे सकते हैं।

यही है, हमारे मंच पर नियंत्रकों। लेकिन अभी तक ये केवल दो मॉडल हैं और काम करने के लिए हमें स्क्रिप्ट को स्थानांतरित करने की आवश्यकता है। आइए अधिक विस्तार से देखें कि वहां क्या आवश्यक है और यह कैसे काम करता है:

vr-gamepad-manager.js - वास्तविक नियंत्रक की स्थिति और घुमाव प्राप्त करने के लिए आपके नियंत्रकों के लिए अनिवार्य रूप से सभी आवश्यक तर्क सम्‍मिलित हैं। यहाँ, 3-डॉल्फ हेलमेट जैसे ओकुलस गो, गियर वीआर या डेड्रीम के लिए नकली कोहनी तर्क लागू किया गया है। _updatePadToHandMappings यहां नियंत्रकों का पता लगाने और उन्हें हमारे नियंत्रकों के लिए मैप करने के लिए जिम्मेदार है। वास्तविक और आभासी नियंत्रक के मिलान के सभी तर्क _poseToWorld फ़ंक्शन में हैं। वास्तव में, यहां डेटा को नियंत्रक के उदाहरण के माध्यम से WebXR API से लिया गया है - padPose.position, padPose.poseRotation। नीचे दिए गए तर्क विभिन्न प्रकार के उपकरणों से जुड़ी बारीकियों के लिए जिम्मेदार हैं। स्क्रिप्ट को स्वयं वैश्विक होना चाहिए (यानी पदानुक्रम की जड़ में जोड़ा गया)।
input-vr.js - हमारे नियंत्रकों को पंजीकृत करने और बटन के साथ काम करने के लिए जिम्मेदार है। वास्तव में, यह केवल बटन प्रेस को निर्धारित करता है और दबाए गए बटन की संख्या भेजता है। यह बहुत सुविधाजनक नहीं है, क्योंकि विभिन्न उपकरणों में अलग-अलग बटन और एक गेमपैड एपीआई हो सकता है, और यह एक तथ्य नहीं है कि ओकुलस गो में पहला बटन एचटीसी विवे नियंत्रक के लिए एक ट्रिगर होगा। इसलिए, आपको मैन्युअल रूप से खोदना होगा। इस लिपि को नियंत्रक तत्व से जोड़ने की आवश्यकता है।

यदि सब कुछ सही ढंग से किया जाता है, तो आप आभासी वास्तविकता में प्रवेश कर सकते हैं और अपने नियंत्रकों को तरंगित कर सकते हैं। बुरा नहीं है, हालांकि आवश्यक कार्यक्षमता को एकीकृत करने की प्रक्रिया काफी असुविधाजनक और थकाऊ है।

कुल मिलाकर

PlayCanvas एक उत्कृष्ट इंजन है जिसका उपयोग आप WebGL गेम्स या एप्लिकेशन बनाने के लिए कर सकते हैं। लेकिन, मुझे यह मानना होगा कि यह WebVR के लिए खराब रूप से अनुकूलित है। ऐसा लगता है कि लक्ष्य यह दिखाना था कि PlayCanvas सार्वजनिक हित को बढ़ावा देने के लिए क्या कर सकता है। लेकिन इस दिशा में, जाहिर है, विकास नहीं हुआ है। इसलिए, आप एक वीआर गेम या एप्लिकेशन बना सकते हैं, लेकिन आपको बहुत कुछ कॉपी करना होगा और उस जटिल कोड को समझना होगा जो केवल प्रदर्शन (वेब वीआर लैब) के लिए बनाया गया था।

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

वेब वीआर एप्लिकेशन बनाने के लिए PlayCanvas सुविधाओं का अवलोकन

PlayCanvas में वर्कफ़्लो

PlayCanvas और जावास्क्रिप्ट

बॉक्स से बाहर वी.आर.

वीआर नियंत्रक

कुल मिलाकर

More articles: