तीन.जेएस और वेबगेल प्रयोग मंच

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

मैं अपने सप्ताहांत परियोजना के परिणामों को आपके साथ साझा करना चाहता हूं। यह एक विशुद्ध रूप से जावास्क्रिप्ट / html क्लाइंट अनुप्रयोग है, जिसमें एक जावास्क्रिप्ट स्रोत कोड संपादक और GLSL शेड्स, एक मिनी-लिंकर, तीन.जेएस / वेबजीएल के साथ एक विंडो और एक छोटा रनटाइम इंटरफ़ेस शामिल है। यह सब jquery से चिपका हुआ है, और एक वीडियो गैलरी शीर्ष पर खराब हो गई है। गैलरी में कई प्रदर्शन हैं। आप अपने पसंदीदा डेमो का चयन कर सकते हैं और इसके कोड के साथ खेल सकते हैं, साथ ही JSON के माध्यम से कई फाइलों से संपूर्ण परियोजनाओं को निर्यात और आयात कर सकते हैं।

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

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

सभी स्रोत मर्क्यूरियल सिस्टम में बिटबकेट पर उपलब्ध हैं: https://bitbucket.org/Bangybug/treejsplayground , ज़िप संग्रह डाउनलोड करने का विकल्प भी है।

आपकी रुचि के लिए अभी भी एक छोटा सा वीडियो है:

यदि आप रुचि रखते हैं और स्रोत को डाउनलोड करने का निर्णय लेते हैं, तो मैं इसे चेतावनी देना कर्तव्य मानता हूं कि यह केवल क्रोम पर सामान्य रूप से काम करता है (मेरे पास 21.0.1180.60 है)। फ़ायरफ़ॉक्स (मेरे पास 14.0.1 है) में, WebGL अब अक्षम हो गया है, और इसे सक्षम करने के लिए, आपको इसके बारे में टाइप करना होगा: एड्रेस बार में कॉन्फिगर करें, फिर फ़िल्टर को वेबल पर सेट करें, फ़ोर्स-इनेबल = ट्रू और डिसएबल = असत्य सेट करें । लेकिन फ़ायरफ़ॉक्स के दुखों का अंत नहीं है - गैलरी के बारे में नीचे पढ़ें।

यह सब कैसे शुरू हुआ और यह किस चीज में बदल गया

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

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

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

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

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

अंतिम चरण shader कोड को एक अलग प्रकार के स्रोत में अलग करना था। शेड्स का संपादन करते समय, संपादक ने सी व्याकरण पर स्विच किया। यह सुविधाजनक हो गया, क्योंकि अन्यथा शेव कोड को या तो जावास्क्रिप्ट के अंदर या एचटीएमएल के अंदर स्टोर करना आवश्यक होगा।

प्रोजेक्ट फाइलों का संकलन और न्यूनतम रनटाइम इंटरफ़ेस

जैसा कि पहले ही उल्लेख किया गया है, एक प्राथमिक लिंकर है। यह एप्लिकेशन / linker.js फ़ाइल में स्थित है। इसके लिए एक आवश्यक फ़ंक्शन है, जो स्रोत से APP.require के रूप में उपलब्ध है। संकलित स्रोतों के सही कनेक्शन क्रम को सुनिश्चित करने के लिए इस फ़ंक्शन को बुलाया जाना चाहिए। हथियारों के प्रदर्शन में ब्रदर्स का एक उदाहरण है (गैलरी देखें)।

एक न्यूनतम रनटाइम इंटरफ़ेस भी है, जिसमें निम्नलिखित वस्तुएं शामिल हैं:

• APP.page.webgl.renderer - थ्री.जेएस से एक रेडी-टू-यूज़ रेंडरर ऑब्जेक्ट;
• APP.page.webgl.viewport - वेबलॉग विंडो आरंभीकृत होने पर, स्वचालित रूप से सेट की गई चौड़ाई और ऊंचाई गुणों के साथ एक ऑब्जेक्ट, मान webgl.css से लिए गए हैं ;
• APP.page.webgl.viewportMouse - getX () और getY () फ़ंक्शन के साथ एक ऑब्जेक्ट जो पॉइंटर के अंतिम निर्देशांक को वापस करता है जब यह WebGL विंडो के ऊपर था;
• APP.shader (vertexShaderFileName, fragmentShaderFileName, वर्दी) - एक नया THREE.ShaderMaterial वस्तु निर्दिष्ट रूटीन और वर्दी स्थिरांक से इकट्ठा किया जाता है। भविष्य में, आप वर्दी वस्तु के गुणों के मूल्यों को बदल सकते हैं, और shader प्रदान करने से पहले स्वचालित रूप से उन्हें उठाएगा।

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

वीडियो गैलरी प्रयोग

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

फ़ायरफ़ॉक्स लेआउट मुद्दों के साथ आया, और, दुख की बात है, एक वीडियो गैलरी के बहुत विचार के साथ। आप केवल 4-5 वीडियो तत्वों को भी नहीं ले सकते और चिपका सकते हैं, भले ही उनमें से केवल एक ही जब आप पर मंडराते हैं। फ़ायरफ़ॉक्स बहुत सारे अनुरोध भेजता है, यह पृष्ठ समाप्त होता है और यहां तक ​​कि मेरे स्थानीय अपाचे httpd। मुझे ब्राउजर बंद करना है।

क्रोम में, निलंबन की कोई समस्या नहीं है, हालाँकि मेमोरी खपत को देखते हुए ध्यान करने के लिए अभी भी कुछ है।

अंत में, मैंने सिर्फ फ़ाइल ऐप / गैलरी के लिए एक पैरामीटर जोड़ा। js / initialize - useImages । जब यह सच हो जाएगा, तो वीडियो के बजाय चित्र होंगे।

छायांकन संकलन

शेड्स संकलित करने के लिए, मैंने APP.shader फ़ंक्शन को जोड़ा, यह ऊपर वर्णित है। मैं सिर्फ यह स्पष्ट करूंगा कि यहां पर तीन.जेएस कोड का उपयोग किया गया है। यह कोड स्वचालित रूप से "स्थिति" नामक एक विशेषता को आपके शीर्ष shader में सेट करेगा। इसे ध्यान में रखें, इस विशेषता के लिए एक अलग नाम के साथ एक shader लिखने की कोशिश न करें। एक विकल्प है - फ़ंक्शन ऐप / webgl.js / shader को फिर से लिखना, लेकिन एक ही समय में, आप तीन.जेएस से दराज का उपयोग करने की क्षमता खो देंगे।

शुद्ध WebGL नमूना कोड के साथ तुलना

यह बिना कहे चला जाता है कि थ्री.जेएस पर बहुत कम कोड होंगे। और यदि आप मेरे खेल के मैदान का उपयोग करते हैं, तो कोड अभी भी घट जाएगा। एकमात्र बाधा यह समझने की आवश्यकता है कि वेब.एल.आई. लाइब्रेरी में कुछ निश्चित कार्य कैसे लिपटे हैं। उदाहरण के लिए, TRIANGLE_STRIP शीर्ष तीन में डेटा जमा मोड। JS एक THREE.Ribbon ऑब्जेक्ट से मेल खाती है।

तुलना के लिए, एक समान परियोजना के साथ खुली निर्देशिका: / चूक / स्रोत / पानी और / चूक / स्रोत / water_webgl । तो आप शुद्ध वेबजीएल और थ्री.जेएस का उपयोग करते समय अंतर का अंदाजा लगा सकते हैं।

एक नया प्रदर्शन तैयार करना और परियोजना में सम्मिलित करना

सभी डेमो ऐप / गैलरी.जेएस / प्रोजेक्ट्स में वर्णित हैं। एक विशिष्ट विवरण इस तरह दिखता है:

'spheres' : { files : [{type:'source', path:'defaults/sources/spheres/main.js', content:null}], category : 'Basic', title : 'Many ballz', image : 'defaults/sources/spheres/img.png', video : 'defaults/sources/spheres/video.ogv', description: 'Basic demo from Three.JS package, creates 50k spheres with different materials. Demonstrates on-the-fly texture generation.' } 

वीडियो रिकॉर्ड करने के लिए, मैंने मुफ्त कैमस्टडियो प्रोग्राम का इस्तेमाल किया। इसमें से आपको 320x200 के आकार में एक वीडियो प्राप्त करने की आवश्यकता है। ऐसा करने के लिए, आप webgl.css में विंडो का आकार 320x200 पर प्री-सेट कर सकते हैं , और कैमस्टडियो में ही इस क्षेत्र से वीडियो कैप्चर कॉन्फ़िगर कर सकते हैं। हॉटकीज़ भी मदद करते हैं, वे वीडियो को संपादित करने की आवश्यकता को समाप्त करते हैं। मैं तुरंत उस निर्देशिका को चुनने की सलाह देता हूं जहां वीडियो फ़ाइलों को जोड़ा जाएगा। अधिमानतः जड़ नहीं।

वीडियो को वीडियो तत्व में एम्बेड करने के लिए, आपको इसे OGG थियोरा में बदलना होगा। मैंने FFMpeg2Theora का उपयोग किया।

Url में Parameters का उपयोग करना

सुविधा के लिए, यूआरएल में मापदंडों का उपयोग करना संभव है। उदाहरण के लिए, गैलरी दिखाने के लिए, यह निम्नलिखित पते पर जोड़ने के लिए पर्याप्त है : गैलरी = श्रेणी , जहां श्रेणी प्रदर्शनों की श्रेणी है (प्रदर्शन का विवरण देखें)।

आप तुरंत जोड़कर इच्छित प्रोजेक्ट पर पुनर्निर्देशित कर सकते हैं ? प्रोजेक्ट = प्रोजेक्ट_आईडी , जहां प्रोजेक्ट_आईडी ऐप / गैलरी में महत्वपूर्ण है। जेएस / प्रोजेक्ट्स , उदाहरण के लिए क्षेत्र ।