वेब पर 3 डी - प्रौद्योगिकी पसंद

इसके बजाय अग्रदूत

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

वेब पर 3 डी

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

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

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

स्थिति कुछ साल पहले सुधरने लगी जब Apple ने वेब पर 3D के साथ काम करने के लिए एक एपीआई का प्रस्ताव रखा। Apple की शुरुआत Google और मोज़िला द्वारा समर्थित थी, और थोड़ी देर बाद, ओपेरा। इस तरह से WebGL विनिर्देशन का जन्म हुआ।

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

मेरी राय में, WebGL के अधिक दृष्टिकोण हैं। मुझे उम्मीद है कि मैं आपको इसका यकीन दिला सकता हूं।

वेबलॉग अवलोकन

WebGL OpenGL API पर आधारित है, और कुछ हद तक सशर्तता के साथ हम कह सकते हैं कि WebGL जावास्क्रिप्ट के लिए एक OpenGL बाइंडिंग है। WebGL OpenGL ES 2.0 द्वारा प्रदान की गई सुविधाओं के सेट पर केंद्रित है, जो इसे उपकरणों की एक विस्तृत श्रृंखला पर उपयोग करने की अनुमति देता है: डेस्कटॉप और मोबाइल प्लेटफॉर्म पर। बेशक, ज्यादातर मामलों में डेस्कटॉप कंप्यूटर की क्षमता वेबलॉग द्वारा प्रदान की जाने वाली क्षमता से अधिक हो सकती है। लेकिन इस तरह के एक समाधान ने हमें मोबाइल प्लेटफार्मों के साथ कुछ एकरूपता बनाने की अनुमति दी, जहां 3 डी ग्राफिक्स एक्सेलेरेटर अपेक्षाकृत हाल ही में व्यवस्थित हुए हैं और फिलहाल कार्यक्षमता और प्रदर्शन के मामले में डेस्कटॉप कंप्यूटर 5-7 साल पुराने हैं।

OpenGL की तरह, WebGL एक निम्न-स्तरीय API है, और सीधे इसका उपयोग करके प्रोजेक्ट बनाने के लिए, आपको तीन-आयामी ग्राफिक्स के काफी कठिन पहलुओं को समझने की आवश्यकता है। हालांकि, इतिहास से पता चला है कि उच्च-स्तरीय 3 डी एपीआई डेवलपर्स के बीच अच्छी तरह से जड़ नहीं लेते हैं, उदाहरण के लिए, डायरेक्ट 3 डी 7 रिटायर्ड मोड गुम हो गया है, माइक्रोसॉफ्ट ने डायरेक्ट 3 डी के संस्करण 8 के लिए इसे विकसित करना बंद कर दिया है। मेरी राय में, इसका कारण 3 डी डेवलपर्स का सामना करने वाले कार्यों में बहुत मजबूत अंतर है। कई लोगों को सबसे यथार्थवादी ग्राफिक्स बनाने के कार्य का सामना करना पड़ता है जो वास्तविक समय में काम करते हैं, और कोई भी बहुमुखी प्रतिभा या कुछ हद तक अधिक सादगी के लिए प्रदर्शन का एक बड़ा हिस्सा बलिदान नहीं करना चाहता है। निम्न-स्तरीय एपीआई के साथ काम करते समय, अक्सर कम सार्वभौमिक (लेकिन कार्य को हल करने) करने के अवसर होते हैं, लेकिन कई बार तेज और / या सरल समाधान भी। कई लोग मुझे डोनाल्ड नुथ के प्रसिद्ध वाक्यांश की याद दिला सकते हैं: "समय से पहले अनुकूलन सभी मुसीबतों की जड़ है", लेकिन तीन आयामी ग्राफिक्स के मामले में, कम से कम 30 प्रदर्शित करना, और अधिमानतः 60 फ्रेम प्रति सेकंड, यह केवल एक इच्छा नहीं है, यह एक आवश्यकता है। उसी समय, एप्लिकेशन ग्राफिक्स का एक आकर्षक और प्रतिस्पर्धी स्तर प्रदान करना आवश्यक है।

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

WebGL वर्तमान में Google क्रोम और मोज़िला फ़ायरफ़ॉक्स द्वारा विंडोज, लिनक्स और मैकओएस और एंड्रॉइड के लिए फ़ायरफ़ॉक्स द्वारा समर्थित है। 12 वें संस्करण में ओपेरा ने एक वेबजीएल कार्यान्वयन भी प्रस्तुत किया (हालांकि एक बहुत क्रूड एक), सफारी रात में मैकओएस के लिए बनाता है वेबलॉग समर्थन को सक्षम करने की क्षमता है। IOS में, आप WebGL को UIWebView घटक में सक्रिय कर सकते हैं, हालाँकि अभी तक निजी APIs का उपयोग कर रहे हैं (तदनुसार, इस तरह के एप्लिकेशन को AppStore में प्रकाशित नहीं किया जा सकता है)।

IEWebGL ओवरव्यू

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

यह उन लोगों को निराश नहीं कर सकता, जिनके पास पर्याप्त वेब विकास का अनुभव है और यह जानता है कि उन प्रौद्योगिकियों पर अपने समाधान का निर्माण करना कितना कठिन है, जो ब्राउज़र निर्माताओं के बीच एक अलग स्तर का समर्थन है।

हमारी टीम उन लोगों के लिए एक संभावित समाधान की पेशकश करने के लिए प्रसन्न है जो वेबजीएल पर परियोजनाएं बनाना चाहते हैं और साथ ही साथ इंटरनेट एक्सप्लोरर ब्राउज़रों के उपयोगकर्ताओं को याद नहीं करना चाहते हैं। हमारा विकास IEWebGL है। यह IE के लिए एक ActiveX प्लगइन है जो ब्राउज़र के सभी संस्करणों में 6 ठी से 10 वीं तक काम करता है और WebGL API को लागू करता है। IEWebGL बिल्कुल मुफ्त है। आप प्रतिबंधों के बिना अपनी परियोजनाओं को बनाने के लिए इसका उपयोग कर सकते हैं। यह प्लगइन 32-बिट और 64-बिट संस्करणों में इंटरनेट एक्सप्लोरर ब्राउजर के ऑपरेटिंग सिस्टम पर विंडोज एक्सपी से विंडोज 8 तक (मेट्रो-शैली IE और विंडोज 8 के एआरएम संस्करण के अपवाद के साथ) काम करता है, लेकिन अगले में उस पर और अधिक लेख)।

मैं आपको थोड़ा और बताऊंगा कि IEWebGL कैसे काम करता है।

आप जान सकते हैं कि विंडोज में काम करने के लिए सामान्य ओपनगैल के लिए, आपको वीडियो कार्ड के निर्माता से एक ड्राइवर को स्थापित करने की आवश्यकता है, क्योंकि विंडोज के साथ आने वाले ड्राइवर केवल Direct3D हार्डवेयर त्वरण प्रदान करते हैं। इस संबंध में, Google और मोज़िला ने ओपन सोर्स लाइब्रेरी एएनजीएलई विकसित किया, जो डायरेक्ट 3 डी के माध्यम से ओएनजीसीएल एपीआई का अनुकरण करता है और इस तरह यह सिस्टम में ओएनजीसीएल ड्राइवर की उपस्थिति पर निर्भर नहीं करता है। विंडोज पर क्रोम और फ़ायरफ़ॉक्स में डिफ़ॉल्ट रूप से ANGLE रेंडरर का उपयोग किया जाता है। ANGLE में GL3L shader भाषा का अनुवादक (OpenGL / WebGL में प्रयुक्त) Direct3D द्वारा उपयोग की जाने वाली HLSL भाषा भी है। वर्तमान में, ANGLE लाइब्रेरी द्वारा OpenGL ES 2.0 मानक का कार्यान्वयन ES 2.0.3 संगतता के लिए सभी परीक्षण पास करता है।

IEWebGL प्लगइन ANGLE पर आधारित है और इसलिए Google Chrome और मोज़िला फ़ायरफ़ॉक्स में कार्यान्वयन के लिए तुलनीय, WebGL मानक का उच्च-गुणवत्ता वाला कार्यान्वयन प्रदान करता है। इसके अलावा, IE के आधुनिक संस्करण पृष्ठ के हार्डवेयर-त्वरित कंपोज़िटिंग और प्लग-इन की ग्राफिक सामग्री के लिए नए एपीआई का उपयोग करते हैं, इस प्रकार उच्च गति और कम ऊर्जा खपत सुनिश्चित करते हैं, क्योंकि ग्राफिक सामग्री वीडियो एडेप्टर की सीमाओं को नहीं छोड़ती है और केंद्रीय प्रोसेसर द्वारा इसके प्रसंस्करण की आवश्यकता नहीं होती है।

बेशक, प्लगइन ब्राउज़र का हिस्सा नहीं है, और इसलिए कुछ बहुत मामूली अंतर हैं, मुख्य रूप से वेबजीएल संदर्भ प्राप्त करने के बारे में। मानक के अनुसार, कैनवास तत्व के .getContext ("webgl") तत्व को कॉल करके एक WebGL संदर्भ बनाया जाता है, हालांकि, ऑब्जेक्ट तत्व का उपयोग करके पेज पर प्लगइन्स बनाए जाते हैं और इसलिए साइट डेवलपर को IE और अन्य ब्राउज़रों के लिए अलग-अलग HTML कोड उत्पन्न करने की आवश्यकता होती है, या गतिशील रूप से बनाने के लिए जावास्क्रिप्ट का उपयोग करें। तत्व (वस्तु या कैनवास) ब्राउज़र पर निर्भर करता है। सौभाग्य से, मतभेद लगभग समाप्त हो जाते हैं। IE में, आप ऑब्जेक्ट तत्व के लिए .getContext ("webgl") कॉल का उपयोग करते हैं और फिर WebGL API के अनुसार पूर्ण संदर्भ में काम करते हैं।

अंतर्निहित WebGL समर्थन वाले ब्राउज़रों के लिए कोड:

 <! doctype html>
 <Html>
     <Head>
         <script type = "text / javascript">
             फ़ंक्शन initWebGL () {
                 var glCanvas = document.getElementById ("रेंडरएरिया");
                 var glCtx = glCanvas.getContext ("प्रायोगिक-वेबलॉग");
                 अगर (glCtx) अलर्ट ("वेबजीएल संदर्भ मिला");
             }
         </ Script>
     </ Head>
     <body onload = "initWebGL ()">
         <कैनवास आईडी = "रेंडरएरिया"> </ कैनवास>
     </ Body>
 </ Html>

इंटरनेट एक्सप्लोरर ब्राउज़रों के लिए कोड:

 <! doctype html>
 <Html>
     <Head>
         <script type = "text / javascript">
             फ़ंक्शन initWebGL () {
                 var glCanvas = document.getElementById ("रेंडरएरिया");
                 var glCtx = glCanvas.getContext ("प्रायोगिक-वेबलॉग");
                 अगर (glCtx) अलर्ट ("वेबजीएल संदर्भ मिला");
             }
         </ Script>
     </ Head>
     <body onload = "initWebGL ()">
         <ऑब्जेक्ट आईडी = "रेंडरएरिया" प्रकार = "एप्लिकेशन / एक्स-वेबल">
         </ वस्तु>
     </ Body>
 </ Html>

IEWebGL भी IE 9 में और 9 संस्करण सहित IE में TypedArray मानक के पूर्ण समर्थन को लागू करता है। IE10 में, IEWebGL ब्राउज़र में निर्मित टंकणअरे्रे कार्यान्वयन का उपयोग करता है। इस प्रकार, भले ही आपकी साइट 3 डी ग्राफिक्स के साथ काम नहीं करती है, आप IE संस्करण 9 में और मानक एपीआई का उपयोग करके नीचे द्विआधारी डेटा के साथ काम करने की क्षमता जोड़ने के लिए IEWebGL का उपयोग कर सकते हैं।

संक्षेप में, मैं कहना चाहता हूं कि आज जब वेब पर 3 डी प्रदर्शित करने के लिए एक तकनीक का चयन किया जाता है, तो यह वेबजीएल को पुराने दृष्टिकोणों के वास्तविक विकल्प के रूप में विचार करने योग्य है, जो अधिकांश ब्राउज़रों में मज़बूती से काम करता है।

IEWebGL वेबसाइट: iewebgl.com

अगले लेख में, हम अपने जावास्क्रिप्ट इंजन के बारे में सीधे बात करेंगे जो तीन-आयामी दृश्य के लिए WebGL का उपयोग करता है।