वेबलॉग शेडर्स को फ़ायरफ़ॉक्स डेवलपर टूल्स के साथ एडिट करना

फ़ायरफ़ॉक्स 27 ने एक नया टूल पेश किया - शेडर एडिटर - जो उनके विकास को बहुत सरल करता है। संपादक WebGL के संदर्भ में शुरू किए गए सभी कार्यक्रमों को दिखाता है, उन्हें संपादित करना संभव बनाता है और एनिमेशन या राज्य के नुकसान में एक भी ब्रेक के बिना बदलाव तुरंत देख सकता है।




यदि आपने महाकाव्य खेलों से " महाकाव्य गढ़ " का एचटीएमएल 5 संस्करण देखा है, तो आप शायद इसके अविश्वसनीय प्रदर्शन और विस्तार से प्रभावित हैं। स्क्रीन पर जो भी आप देखते हैं उसके लिए जिम्मेदार अधिकांश कोड विशेष shader कार्यक्रमों में इकट्ठे किए गए शेड के रूप में लिखे जाते हैं जो सीधे वीडियो कार्ड पर चलते हैं और उच्च प्रदर्शन दृश्य प्रभाव प्रदान करते हैं।

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

• आपको अपने परिवर्तनों को देखने के लिए एप्लिकेशन को पुनरारंभ करना होगा।
• कुछ शेड्स केवल विशेष परिस्थितियों में काम करते हैं।

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



फ़ायरफ़ॉक्स 27 ने एक नया टूल पेश किया - शेडर एडिटर - जो उनके विकास को बहुत सरल करता है। संपादक वेबजीएल के संदर्भ में शुरू किए गए सभी कार्यक्रमों को दिखाता है, उन्हें संपादित करना संभव बनाता है और एनिमेशन को तोड़ने या राज्य को खोने के बिना तुरंत परिवर्तन देखता है। शेड्स का बार-बार संपादन WebGL प्रदर्शन को प्रभावित नहीं करता है।

शेडर संपादक को कैसे सक्षम करें?

शेडर संपादक डिफ़ॉल्ट रूप से सक्षम नहीं है, क्योंकि सभी पेज WebGL का उपयोग नहीं करते हैं। हालाँकि, इसे चालू करना आसान है

1. F12 या Ctrl / Cmd + Shift + I के साथ टूलबार खोलना,
2. विकल्पों में प्राप्त करने के लिए "गियर" पर क्लिक करते हुए,
3. और अंत में, छायादार संपादक के सामने बाईं ओर एक पक्षी डाल दिया। संपादक टैब तुरंत टूलबार में दिखाई देगा।

शेडर एडिटर का उपयोग कैसे करें?

शेडर संपादक को कार्रवाई में आज़माने के लिए, किसी भी WebGL डेमो पर जाएं और संपादक टैब खोलें। आपको WebGL संदर्भ में संपादक की पहुँच देने के लिए पृष्ठ को फिर से लोड करने की आवश्यकता हो सकती है, जिसके बाद आपको निम्न चित्र (क्लिक करने योग्य) दिखाई देगा:

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

शेडर प्रोग्राम कैसे संपादित करें?

शेडर प्रोग्राम GLSL में लिखे जाते हैं और जावास्क्रिप्ट में नहीं। शेडर कोड के साथ काम करने का तरीका जानने के लिए, आप विभिन्न पाठ पढ़ सकते हैं (या यहाँ कहीं रूसी में)। सबक का एक अच्छा चयन लर्निंग वेबजीएल ब्लॉग पर है। Shader संपादक आपको कोड तक सीधे पहुंच प्रदान करता है, इसलिए आप केवल प्रयोग कर सकते हैं और देख सकते हैं कि यह क्या होता है:

• किसी भी shader के कोड को संपादित करने के कारण इसे संकलित किया जाता है और 3 डी दृश्य पर लागू होता है जैसे ही उपयोगकर्ता बटन दबाता है;
• कोड में एक यादृच्छिक त्रुटि प्रतिपादन को नहीं तोड़ देगी, संपादक बस त्रुटि दिखाएगा और संबंधित पंक्ति को उजागर करेगा; बाईं ओर लाल आइकन पर मँडराते हुए, आप त्रुटि का विवरण देख सकते हैं।

Shader के बारे में अधिक जानकारी मोज़िला वेबसाइट पर देखी जा सकती है।

अंत में, दूसरा स्क्रेंकास्ट एक महाकाव्य गढ़ में मक्खी पर संपादन छाया का प्रदर्शन करता है: