WebGL बिगिनर गाइड अध्याय 1: WebGL के साथ शुरुआत करना

सभी को नमस्कार!

मैं उत्कृष्ट पुस्तक "WebGL Beginner's Guide" का मुफ्त अनुवाद शुरू करना चाहता हूं, जो, मेरी राय में, न केवल शुरुआती लोगों के लिए, बल्कि अधिक उन्नत डेवलपर्स के लिए भी दिलचस्प होगा।

सामग्री:

• अध्याय 1: वेबजीएल के साथ शुरुआत करना
• अध्याय 2: ज्यामिति का प्रतिपादन
• अध्याय 3: प्रकाश व्यवस्था
• अध्याय 4: कैमरा
• अध्याय 5: आंदोलन
• अध्याय 6: रंग, गहराई और अल्फा सम्मिश्रण
• अध्याय 7: बनावट
• अध्याय 8: विकल्प
• अध्याय 9: यह सब एक साथ रखना
• अध्याय 10: उन्नत तरीके

WebGL मूल रूप से OpenGL ES 2.0 (ES का अर्थ एंबेडेड सिस्टम के लिए) पर आधारित था, जो Apple के iPhone और iPad जैसे उपकरणों के लिए OpenGL विनिर्देश का एक संस्करण है। लेकिन विनिर्देश विकसित हुआ, स्वतंत्र हो गया, इसका मुख्य लक्ष्य विभिन्न ऑपरेटिंग सिस्टम और उपकरणों के बीच पोर्टेबिलिटी सुनिश्चित करना है। एक वेब इंटरफेस, वास्तविक समय प्रतिपादन के विचार ने वीडियो गेम, वैज्ञानिक और चिकित्सा इमेजिंग जैसे वेब 3 डी वातावरण के लिए संभावनाओं का एक नया ब्रह्मांड खोल दिया है। इसके अलावा, वेब ब्राउज़रों के व्यापक उपयोग के कारण, इन और अन्य प्रकार के 3 डी अनुप्रयोगों को स्मार्टफोन और टैबलेट जैसे मोबाइल उपकरणों पर चलाया जा सकता है। यदि आप अपना पहला वेब वीडियो गेम बनाना चाहते हैं, तो वर्चुअल गैलरी के लिए एक 3D आर्ट प्रोजेक्ट, अपने प्रयोगों या किसी अन्य 3D एप्लिकेशन के डेटा की कल्पना करते हुए, आपको यह ध्यान रखना चाहिए कि पहला कदम यह सुनिश्चित करने के लिए होना चाहिए कि आपके पास है उपयुक्त वातावरण।
इस अध्याय में आप कर सकते हैं:

• WebGL एप्लिकेशन की संरचना को समझें
• अपने खुद के ड्राइंग क्षेत्र (कैनवास) बनाएं
• अपने ब्राउज़र की WebGL क्षमताओं की जाँच करें
• WebGL स्टेट मशीन को समझें
• वेबजीएल चर बदलें जो आपके दृश्य को प्रभावित करते हैं
• डाउनलोड करें और पूर्ण विशेषताओं वाले दृश्यों को देखें

सिस्टम आवश्यकताओं

WebGL वेब-आधारित 3D ग्राफ़िक्स API है। जैसे, इसे स्थापना की आवश्यकता नहीं है। जिस समय यह पुस्तक लिखी गई थी, यदि आप निम्नलिखित इंटरनेट ब्राउज़र स्थापित कर चुके हैं, तो आप स्वतः WebGL के साथ काम कर सकते हैं:

• फ़ायरफ़ॉक्स 4.0 या बाद में
• Google Chrome 11 या बाद का
• सफारी (OSX 10.6 या बाद में)। WebGL डिफ़ॉल्ट रूप से अक्षम है, लेकिन आप डेवलपर मेनू पर वेबलॉग विकल्प को सक्षम करके इसे सक्षम कर सकते हैं
• ओपेरा 12 या बाद का

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

WebGL क्या है?

WebGL एक 3D ग्राफिक्स लाइब्रेरी है जो आधुनिक इंटरनेट ब्राउज़रों को एक मानक और कुशल तरीके से 3D दृश्यों को प्रस्तुत करने की अनुमति देता है। विकिपीडिया के अनुसार, प्रतिपादन एक कंप्यूटर प्रोग्राम का उपयोग करके एक मॉडल से एक छवि बनाने की प्रक्रिया का एक दृश्य है। चूंकि यह प्रक्रिया कंप्यूटर पर की जाती है, ऐसे चित्र प्राप्त करने के विभिन्न तरीके हैं।
पहला अंतर हमें यह बताना होगा कि क्या हम किसी विशेष ग्राफिक्स हार्डवेयर का उपयोग करते हैं या नहीं। हम सॉफ्टवेयर रेंडरिंग के बारे में बात कर सकते हैं, ऐसे मामलों में जहां 3 डी दृश्यों को प्रस्तुत करने के लिए आवश्यक सभी गणनाएं कंप्यूटर के मुख्य प्रोसेसर का उपयोग करके की जाती हैं; दूसरी ओर, हम उन मामलों में हार्डवेयर प्रतिपादन का उपयोग करते हैं जहां वास्तविक समय में 3 डी ग्राफिक्स की गणना के लिए एक ग्राफिक प्रोसेसर (जीपीयू) होता है। एक तकनीकी दृष्टिकोण से, हार्डवेयर रेंडरिंग सॉफ्टवेयर रेंडरिंग की तुलना में बहुत अधिक कुशल है, क्योंकि विशेष हार्डवेयर कंपोनेंट्स हैं जो ऑपरेशंस को हैंडल करते हैं। लेकिन, दूसरी ओर, सॉफ़्टवेयर निर्भरता आमतौर पर हार्डवेयर निर्भरता की कमी के कारण अधिक सामान्य होती है।
दूसरा अंतर हम बना सकते हैं कि क्या प्रतिपादन की प्रक्रिया स्थानीय या दूरस्थ रूप से होती है। जब प्रदर्शित होने वाली छवि जटिल है, तो रेंडरिंग दूरस्थ रूप से होने की संभावना है। यह 3 डी एनिमेटेड फिल्मों का मामला है, जब बड़ी मात्रा में हार्डवेयर संसाधनों के साथ समर्पित सर्वर जटिल दृश्यों को प्रस्तुत करने की अनुमति देते हैं। हम इस सर्वर-साइड रेंडरिंग को कहेंगे। इसके विपरीत स्थानीय प्रतिपादन है। हम इस क्लाइंट को रेंडरिंग कहेंगे।
WebGL का ग्राहक-केंद्रित दृष्टिकोण है; तत्व जो एक 3D दृश्य के कुछ हिस्सों को बनाते हैं, वे आमतौर पर सर्वर से डाउनलोड किए जाते हैं। हालाँकि, छवि प्राप्त करने के लिए आवश्यक सभी आगे की प्रक्रिया स्थानीय रूप से क्लाइंट के ग्राफिक उपकरण का उपयोग करके की जाती है।
अन्य तकनीकों की तुलना में (उदाहरण के लिए, जावा 3 डी, फ्लैश और यूनिटी वेब प्लेयर प्लगइन) WebGL के कई फायदे हैं:

• जावास्क्रिप्ट प्रोग्रामिंग: वेब डेवलपर्स और वेब ब्राउज़र के लिए जावास्क्रिप्ट "मूल" भाषा है। जावास्क्रिप्ट के साथ काम करने से आप सभी DOM तत्वों का उपयोग कर सकते हैं और एप्लेट्स के साथ संचार करने के विपरीत, संभालना भी आसान है। चूंकि WebGL को जावास्क्रिप्ट में क्रमादेशित किया जाता है, इसलिए यह अन्य जावास्क्रिप्ट पुस्तकालयों जैसे jQuery और अन्य HTML5 प्रौद्योगिकियों के साथ WebGL अनुप्रयोगों के एकीकरण की सुविधा प्रदान करता है।
• स्वचालित मेमोरी प्रबंधन: अपने साथी ओपनजीएल और अन्य प्रौद्योगिकियों के विपरीत, जहां मेमोरी को मैन्युअल रूप से आवंटित करने और मुक्त करने के लिए विशिष्ट संचालन हैं, वेबगेल को ऐसी आवश्यकता नहीं है। यह निम्नानुसार है कि जब एक जावास्क्रिप्ट चर अपने दायरे से बाहर निकलता है, तो इसके द्वारा कब्जा की गई मेमोरी स्वचालित रूप से मुक्त हो जाती है। यह प्रोग्रामिंग को बहुत आसान बनाता है, कोड की मात्रा को कम करता है, इसे अधिक स्पष्ट और समझने योग्य बनाता है।
• पारगम्यता: आधुनिक तकनीकी विकास के लिए धन्यवाद, स्मार्टफोन और टैबलेट उपकरणों पर जावास्क्रिप्ट-सक्षम वेब ब्राउज़र स्थापित किए जाते हैं। लेखन के समय, मोज़िला फाउंडेशन मोटोरोला और सैमसंग फोन पर WebGL सुविधाओं के परीक्षण के लिए एक कार्यक्रम है। एंड्रॉइड प्लेटफॉर्म के लिए वेबलॉग समर्थन विकास समान हैं।
• प्रदर्शन: वेबजीएल आवेदन प्रदर्शन समकक्ष स्टैंड-अलोन अनुप्रयोगों (कुछ अपवादों के साथ) के बराबर है। यह WebGL के स्थानीय हार्डवेयर ग्राफिक्स एक्सेलेरेटर तक पहुंचने की क्षमता के कारण है। अब तक, 3 डी रेंडरिंग के लिए कई वेब प्रौद्योगिकियां सॉफ्टवेयर रेंडरिंग का उपयोग करती हैं।
• शून्य संकलन: यह देखते हुए कि WebGL जावास्क्रिप्ट में लिखा गया है, वेब ब्राउज़र में निष्पादन से पहले कोड के प्रारंभिक संकलन की कोई आवश्यकता नहीं है। इससे आप मक्खी पर बदलाव कर सकते हैं और देख सकते हैं कि ये परिवर्तन आपके 3D वेब अनुप्रयोग को कैसे प्रभावित करते हैं। हालांकि, जब हम शेडर्स के विषय पर स्पर्श करते हैं, तो हम महसूस करेंगे कि हमें कुछ संकलन की आवश्यकता है। हालांकि, यह हमारे ब्राउज़र में नहीं बल्कि हमारे ग्राफिक्स हार्डवेयर का उपयोग करते हुए होता है।

WebGL एप्लिकेशन संरचना

किसी भी 3D ग्राफिक्स लाइब्रेरी की तरह, WebGL को 3D दृश्यों को बनाने के लिए कुछ घटकों की उपस्थिति की आवश्यकता होती है। इन मूल तत्वों पर पुस्तक के पहले चार अध्यायों में चर्चा की जाएगी। अध्याय 5 से शुरू, हम उन तत्वों पर विचार करेंगे जो 3 डी दृश्य के साथ काम करने से संबंधित नहीं हैं, जैसे कि रंग और बनावट, और फिर, बाद में, हम अधिक जटिल विषयों पर आगे बढ़ेंगे।
हम जिन तत्वों को संबोधित कर रहे हैं वे इस प्रकार हैं:

• कैनवास: यह प्लेसहोल्डर है जहां दृश्य प्रदर्शित किया जाएगा। यह एक मानक एचटीएमएल 5 तत्व है जिसे जावास्क्रिप्ट के माध्यम से दस्तावेज़ ऑब्जेक्ट मॉडल (डोम) का उपयोग करके एक्सेस किया जा सकता है।
• ऑब्जेक्ट: ये 3D इकाइयाँ हैं जो दृश्य का हिस्सा बनती हैं। ये संस्थाएँ त्रिभुजों से बनी हैं। दूसरे अध्याय में, हम देखेंगे कि WebGL ज्यामिति को कैसे संभालता है। हम पॉलीगॉन को स्टोर करने के लिए WebGL बफ़र्स का उपयोग करेंगे और देखें कि WebGL बफ़र्स को स्टेज पर ऑब्जेक्ट्स रेंडर करने के लिए कैसे उपयोग करता है।
• प्रकाश: 3 डी दुनिया में कुछ भी नहीं देखा जा सकता है अगर कोई प्रकाश स्रोत नहीं हैं। किसी भी WebGL एप्लिकेशन के इस तत्व पर अध्याय 3 में चर्चा की जाएगी। हम सीखते हैं कि WebGL स्टेज पर प्रकाश को मॉडल करने के लिए शेड्स का उपयोग करता है। हम यह भी देखेंगे कि 3 डी ऑब्जेक्ट भौतिकी के नियमों के अनुसार प्रकाश को कैसे प्रतिबिंबित और अवशोषित करते हैं, और प्रकाश के अन्य मॉडलों पर भी चर्चा करते हैं जो हम अपनी वस्तुओं की कल्पना करने के लिए वेबजीएल में बना सकते हैं।
• कैमरा: एक 3D दुनिया को देखने के लिए एक कैनवास के रूप में कार्य करता है। आइए देखें कि आप 3D दृश्य का पता लगाने के लिए इसका उपयोग कैसे कर सकते हैं। अध्याय 4 में, विभिन्न मैट्रिक्स ऑपरेशन जो एक परिप्रेक्ष्य दृश्य प्राप्त करने के लिए आवश्यक हैं, पर विचार किया जाएगा। हम यह भी समझेंगे कि ये ऑपरेशन कैमरा व्यवहार को कैसे अनुकरण कर सकते हैं।

यह अध्याय हमारी सूची के पहले तत्व पर केंद्रित है - कैनवास। अगले खंडों में, हम देखेंगे कि एक कैनवास (कैनवास) कैसे बनाया जाए और वेबजीएल संदर्भ कैसे सेट किया जाए।

एचटीएमएल 5 कैनवास निर्माण

आइए एक वेबपेज बनाएं और HTML5 कैनवास जोड़ें। कैनवास एक वेब पेज पर एक आयताकार तत्व है जहां एक 3 डी दृश्य प्रदर्शित किया जाएगा।

1. अपने पसंदीदा संपादक का उपयोग करते हुए, निम्नलिखित सामग्री के साथ एक वेब पेज बनाएं:
   
   

   <!DOCTYPE html> <html> <head> <title> WebGL Beginner's Guide - Setting up the canvas </title> <style type="text/css"> canvas {border: 2px dotted blue;} </style> </head> <body> <canvas id="canvas-element-id" width="800" height="600"> Your browser does not support HTML5 </canvas> </body> </html> 

   
   
2. फ़ाइल को ch1_Canvas.html रूप में ch1_Canvas.html ।
3. एक समर्थित ब्राउज़र के माध्यम से इस फ़ाइल को खोलें।
4. आपको इसके समान कुछ देखना चाहिए:
   
   
   
   

बस क्या हुआ?
हमने अभी एक सरल वेब पेज बनाया है जिसमें कैनवास शामिल है। इस कैनवास में हमारे 3D एप्लिकेशन शामिल होंगे। आइए इस उदाहरण में प्रस्तुत कुछ महत्वपूर्ण तत्वों को देखें।
सीमा के लिए सीएसएस शैली को परिभाषित करना
यह एक ऐसा कोड है जो कैनवास की शैली को परिभाषित करता है:

 <style type="text/css"> canvas {border: 2px dotted blue;} </style> 

जैसा कि आप कल्पना कर सकते हैं, यह कोड वेबजीएल एप्लिकेशन बनाने के लिए मौलिक नहीं है। हालांकि, नीले धराशायी लाइन यह जांचने का एक अच्छा तरीका है कि कैनवास कहां है, यह देखते हुए कि कैनवास शुरू में खाली होगा।
कैनवास के गुणों को समझना
पिछले उदाहरण में, 3 विशेषताएँ हैं:

• Id: यह दस्तावेज़ ऑब्जेक्ट मॉडल (DOM) में कैनवास का पहचानकर्ता है
• चौड़ाई और ऊँचाई: ये दो विशेषताएँ हमारे कैनवास के आकार को निर्धारित करती हैं। जब ये दोनों विशेषताएँ गायब हैं, फ़ायरफ़ॉक्स, क्रोम, और WebKit डिफ़ॉल्ट रूप से 300x150 कैनवास का उपयोग करेंगे।

यदि कैनवास समर्थित नहीं है तो क्या होगा?
यदि आपको स्क्रीन पर एक संदेश दिखाई देता है: Your browser does not support HTML5 (जो कि टैग्स के बीच लिखा गया था) का Your browser does not support HTML5 , तो आपको यह सुनिश्चित करना होगा कि आप एक ब्राउज़र का उपयोग कर रहे हैं जो WebGL का समर्थन करता है।
यदि आप फ़ायरफ़ॉक्स का उपयोग कर रहे हैं और फिर भी HTML5 समर्थित संदेश नहीं देखते हैं, तो सत्यापित करें कि WebGL समर्थन सक्षम है। ऐसा करने के लिए, पता बार में about:config और फिर webgl.disabled संपत्ति देखें। अगर true करने के लिए तैयार true तो जाओ और बदलो। जब आप फ़ायरफ़ॉक्स को पुनः आरंभ करते हैं और ch1_Canvas.html लोड करते हैं, तो आपको कैनवास पर धराशायी लाइनों को देखना चाहिए, अर्थात सब कुछ क्रम में है।
यदि आप दूरस्थ रूप से कनेक्ट करते हैं, यदि आप कैनवास नहीं देखते हैं, तो यह इस तथ्य के कारण हो सकता है कि फ़ायरफ़ॉक्स ने कुछ ग्राफिक्स कार्ड ड्राइवरों को ब्लैकलिस्ट किया। इस मामले में, दूसरे कंप्यूटर का उपयोग करने के अलावा कुछ नहीं बचा है।

WebGL संदर्भ

WebGL संदर्भ एक हैंडल (अधिक सटीक, एक जावास्क्रिप्ट ऑब्जेक्ट) है जिसके माध्यम से हम WebGL के सभी कार्यों और विशेषताओं तक पहुंच सकते हैं। वे WebGL एप्लिकेशन प्रोग्राम इंटरफ़ेस (API) बनाते हैं।
हम एक जावास्क्रिप्ट फ़ंक्शन बनाने जा रहे हैं जो यह जांच करेगा कि वेबलॉग संदर्भ को कैनवास पर प्राप्त किया जा सकता है या नहीं। अन्य जावास्क्रिप्ट पुस्तकालयों के विपरीत, जिन्हें लोड करने और एक कार्यशील प्रोजेक्ट में प्लग करने की आवश्यकता है, वेबजीएल पहले से ही आपके ब्राउज़र में है। दूसरे शब्दों में, यदि आप समर्थित ब्राउज़र में से एक का उपयोग करते हैं, तो आपको किसी भी लाइब्रेरी को स्थापित और सक्षम करने की आवश्यकता नहीं है।
हम एक जावास्क्रिप्ट फ़ंक्शन जोड़कर पिछले उदाहरण को संशोधित करने जा रहे हैं जो आपके ब्राउज़र में WebGL समर्थन की जांच करेगा (हैंडल प्राप्त करने का प्रयास करें)। पृष्ठ लोड होने पर यह फ़ंक्शन कहा जाएगा। ऐसा करने के लिए, हम मानक onLoad DOM इवेंट का उपयोग करेंगे।

1. अपने पसंदीदा टेक्स्ट एडिटर में ch1_Canvas.html फ़ाइल खोलें (आदर्श रूप से, आप HTML / जावास्क्रिप्ट के लिए वाक्यविन्यास चुन सकते हैं)।
2. टैग के ठीक नीचे निम्न कोड जोड़ें

हमें इस फ़ंक्शन को onLoad इवेंट पर कॉल करना होगा। body टैग की सामग्री को निम्न में बदलें:

  <body onLoad ="getGLContext()"> 

ch1_GL_Context.html फ़ाइल सहेजें।
ch1_GL_Context.html का समर्थन करने वाले ब्राउज़रों में से एक का उपयोग करके ch1_GL_Context.html फ़ाइल खोलें।
यदि आप WebGL शुरू नहीं कर सकते हैं, तो आपको निम्नलिखित संवाद बॉक्स जैसा कुछ दिखाई देगा:





बस क्या हुआ?
जावास्क्रिप्ट चर (gl) का उपयोग करते हुए, हमें WebGL संदर्भ का लिंक मिला। आइए वापस जाएं और उस कोड को देखें जो आपको WebGL तक पहुंचने की अनुमति देता है:

  var names = ["webgl", "experimental-webgl", "webkit-3d", "moz-webgl"]; for (var i = 0; i < names.length; ++i) { try { gl = canvas.getContext(names[i]); } catch(e) {} if (gl) break; } 

getContext कैनवास getContext हमें WebGL तक पहुँच प्रदान करती है। हमें केवल एक संदर्भ नाम निर्दिष्ट करना होगा, जो विभिन्न निर्माताओं के लिए अलग हो सकता है। इसलिए, हमने सभी संभावित संदर्भ नामों को एक नाम सरणी में समूहीकृत किया। नामकरण सम्मेलन में किसी भी बदलाव के लिए वेबजीएल विनिर्देश (आप इसे इंटरनेट पर पा सकते हैं) की जाँच करना अनिवार्य है।
getContext संदर्भ नाम के आधार पर, 2D लाइब्रेरी का उपयोग करके HTML5 2D ग्राफिक्स तक पहुंच प्रदान कर सकता है। WebGL के विपरीत, यह नामकरण सम्मेलन मानक है। HTML5 2D ग्राफिक्स API पूरी तरह से WebGL से स्वतंत्र है और इस पुस्तक के दायरे से परे है।

WebGL स्टेट मशीन

WebGL संदर्भ को एक राज्य मशीन के रूप में समझा जा सकता है: जैसे ही आप इसकी किसी भी विशेषता को बदलते हैं, संशोधन तब तक अपनी स्थिति को बनाए रखेगा जब तक आप फिर से विशेषता के मूल्य को नहीं बदलते। आप किसी भी समय इन विशेषताओं की स्थिति का अनुरोध कर सकते हैं, इसलिए आप अपने WebGL संदर्भ की वर्तमान स्थिति निर्धारित कर सकते हैं। आइए एक उदाहरण का उपयोग करके इस व्यवहार का विश्लेषण करें।
इस उदाहरण में, हम यह जानने जा रहे हैं कि कैनवास को साफ करने के लिए हम किस रंग का उपयोग कर सकते हैं:

1. अपने पसंदीदा पाठ संपादक का उपयोग करके, ch1_GL_Attributes.html फ़ाइल खोलें:
   
   

     <html> <head> <title> WebGL Beginner's Guide - Setting WebGL context attributes </title> <style type="text/css"> canvas {border: 2px dotted blue;} </style> <script> var gl = null; var c_width = 0; var c_height = 0; window.onkeydown = checkKey; function checkKey(ev) { switch(ev.keyCode) { case 49: { // 1 gl.clearColor(0.3,0.7,0.2,1.0); clear(gl); break; } case 50: { // 2 gl.clearColor(0.3,0.2,0.7,1.0); clear(gl); break; } case 51: { // 3 var color = gl.getParameter(gl.COLOR_CLEAR_VALUE); // Don't get confused with the following line. It // basically rounds up the numbers to one decimal cipher //just for visualization purposes alert('clearColor = (' + Math.round(color[0]*10)/10 + ',' + Math.round(color[1]*10)/10+ ',' + Math.round(color[2]*10)/10+')'); window.focus(); break; } } } function getGLContext() { var canvas = document.getElementById("canvas-element-id"); if (canvas == null) { alert("there is no canvas on this page"); return; } var names = ["webgl", "experimental-webgl", "webkit-3d", "moz-webgl"]; var ctx = null; for (var i = 0; i < names.length; ++i) { try { ctx = canvas.getContext(names[i]); } catch(e) {} if (ctx) break; } if (ctx == null) { alert("WebGL is not available"); } else { return ctx; } } function clear(ctx) { ctx.clear(ctx.COLOR_BUFFER_BIT); ctx.viewport(0, 0, c_width, c_height); } function initWebGL() { gl = getGLContext(); } </script> </head> <body onLoad="initWebGL()"> <canvas id="canvas-element-id" width="800" height="600"> Your browser does not support the HTML5 canvas element. </canvas> </body> </html> 

   
   
2. आप देखते हैं कि यह फ़ाइल हमारे पिछले उदाहरण के समान है। हालांकि, नए डिजाइन दिखाई देते हैं कि हम संक्षेप में समझाएंगे। इस फ़ाइल में 4 जावास्क्रिप्ट फ़ंक्शंस हैं:
   
   • checkKey : यह एक सहायक कार्य है। यह कीबोर्ड इनपुट को कैप्चर करता है और दर्ज किए गए कमांड के आधार पर कोड निष्पादित करता है।
   • getGLContext : हम पहले ही समीक्षा कर चुके हैं
   • clear : कैनवास को वर्तमान रंग से साफ़ करता है, जो WebGL संदर्भ की विशेषताओं में से एक है। जैसा कि पहले उल्लेख किया गया है, WebGL एक स्टेट मशीन की तरह काम करता है, इसलिए यह कैनवास को साफ़ करने के लिए चयनित रंग का समर्थन करेगा, इससे पहले कि gl.clearColor फ़ंक्शन का उपयोग करके रंग बदल दिया gl.clearColor ।
   • initWebGL : यह फ़ंक्शन getGLContext फ़ंक्शन को दस्तावेज़ के getGLContext इवेंट पर कॉल किए गए फ़ंक्शन के रूप में बदल सकता है। यह फ़ंक्शन getGLContext बेहतर संस्करण को कॉल करता है, जो ctx वेरिएबल के संदर्भ को लौटाता है। यह संदर्भ तब वैश्विक चर gl को सौंपा गया है।
   
   
3. एक समर्थित ब्राउज़र का उपयोग करके test_gl_attributes.html खोलें।
4. प्रेस 1. आप देखेंगे कि कैसे कैनवास अपने रंग को हरे रंग में बदलता है। यदि आप उपयोग किए गए रंग को जानना चाहते हैं, तो 3 दबाएं।
5. जब तक हम gl.clearColor फ़ंक्शन को कॉल करके सफाई का रंग बदलने का निर्णय नहीं लेते, तब तक कैनवास हरे रंग का gl.clearColor है। 2. इसे दबाकर बदलें। यदि आप कोड को देखते हैं, तो आप देख सकते हैं कि रंग नीले में बदल जाता है। यदि आप वास्तव में जानना चाहते हैं कि यह किस रंग का है, तो 3 दबाएं।

बस क्या हुआ?
इस उदाहरण में, हमने देखा कि किस तरह से हम उस रंग को बदल सकते हैं और सेट कर सकते हैं जिसे WebGL कैनवास को clearColor फ़ंक्शन कहकर clearColor करता है। तदनुसार, हमने कैनवास फिल के वर्तमान रंग मान को प्राप्त करने के लिए getParameter (gl.COLOR_CLEAR_VALUE) फ़ंक्शन getParameter (gl.COLOR_CLEAR_VALUE) का उपयोग किया।
संपूर्ण पुस्तक में, हम समान निर्माण देखेंगे जब विशिष्ट फ़ंक्शन संदर्भ विशेषताएँ निर्धारित करते हैं, और getParameter WebGL फ़ंक्शन पास किए गए तर्क के आधार पर विशेषताओं का वर्तमान मान प्राप्त करता है (हमारे उदाहरण में, यह COLOR_CLEAR_VALUE )।
संदर्भ का उपयोग करके WebGL API तक पहुँचें
यह भी ध्यान रखना महत्वपूर्ण है कि सभी WebGL सुविधाएँ WebGL संदर्भ के माध्यम से सुलभ हैं। हमारे उदाहरणों में, संदर्भ चर gl । इस प्रकार, इस वैरिएबल का उपयोग करके WebGL API के लिए कोई भी कॉल किया जाएगा।

3 डी दृश्य लोड हो रहा है

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

वर्चुअल कार डीलरशिप

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

1. किसी भी समर्थित ब्राउज़र में ch1_Car.html फ़ाइल खोलें
2. आपको एक वेबलॉग दृश्य एक कार के साथ दिखाई देगा जैसा कि नीचे दिखाया गया है:
   
   
   
   
3. स्लाइडर का उपयोग करके, आप इस दृश्य के लिए परिभाषित चार प्रकाश स्रोतों को इंटरैक्टिव रूप से अपडेट कर सकते हैं। प्रत्येक प्रकाश स्रोत में तीन तत्व होते हैं: पर्यावरण, फैलाना और दर्पण तत्व। अधिक विस्तार से हम अध्याय 3 में प्रकाश व्यवस्था के विषय पर विचार करेंगे।
4. कार को घुमाने और विभिन्न पक्षों से कल्पना करने के लिए कैनवास पर क्लिक करें और खींचें। आप कैनवास पर माउस को खींचते समय Alt कुंजी दबाकर इसे बड़ा कर सकते हैं। आप कार के चारों ओर कैमरा घुमाने के लिए तीर कुंजियों का भी उपयोग कर सकते हैं। सुनिश्चित करें कि तीर कुंजियों का उपयोग करने से पहले उस पर क्लिक करके कैनवास फोकस में है। अध्याय 4 में हम वेबगेल में एक कैमरे के साथ बनाने और काम करने का तरीका देखेंगे।
5. तीर कुंजियों को दबाने पर होने वाले प्रभाव को प्राप्त करने के लिए, हम जावास्क्रिप्ट-टाइमर का उपयोग करते हैं। हम अध्याय 5 में एनीमेशन के बारे में बात करेंगे।
6. कार के रंग को बदलने के लिए पिछले स्क्रीनशॉट में दिखाए गए रंग पिकर विजेट का उपयोग करें। रंगों के उपयोग पर अध्याय 6 में चर्चा की जाएगी। अध्याय 7-10 में बनावट के उपयोग, मंच पर वस्तुओं के चयन, क्रमशः आभासी कार डीलरशिप और उन्नत वेबजीएल तरीकों का निर्माण करने का वर्णन किया जाएगा।

बस क्या हुआ?
हमने वेबजीएल का उपयोग करके एक सरल दृश्य इंटरनेट ब्राउज़र पर अपलोड किया है।
इस दृश्य में निम्न शामिल हैं:

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

ऐसे अन्य तत्व हैं जो इस उदाहरण में शामिल नहीं हैं, जैसे कि बनावट, रंग और विशेष प्रकाश प्रभाव (मिररिंग)। घबराओ मत! बाद में, सभी तत्वों को अधिक विस्तार से माना जाएगा।

सारांश

इस अध्याय में, हमने चार मूल तत्वों की जांच की जो हमेशा किसी भी WebGL एप्लिकेशन में मौजूद होते हैं: कैनवास, ऑब्जेक्ट, लाइट और कैमरा।
हमने एक HTML5 वेबपेज में कैनवास को जोड़ने का तरीका सीखा, इसकी आईडी, चौड़ाई और ऊंचाई कैसे सेट करें। उसके बाद, हमने उस कोड को लिखा जिसने वेबजीएल संदर्भ बनाया। हमने देखा कि WebGL एक स्टेट मशीन के रूप में काम करता है, जैसे, हम getParameter फ़ंक्शन का उपयोग करके अपने किसी भी वैरिएबल को क्वेरी कर सकते हैं।
अगले अध्याय में, हम सीखेंगे कि वेबलॉग दृश्य में 3D मॉडल को कैसे परिभाषित करें, लोड करें और रेंडर करें।

आप इस लेख के लिए संसाधन लिंक से डाउनलोड कर सकते हैं ।

आपका ध्यान देने के लिए आप सभी का धन्यवाद!