क्या 2D गेम्स / एप्स के लिए 2D कैनवस के बजाय WebGL का उपयोग करने का कोई कारण है?

Question

क्या 2D गेम / एप्स के लिए 2D- Canvas के बजाय WebGL का उपयोग करने के अलावा, कोई कारण नहीं है ?

दूसरे शब्दों में, WebGL द्वारा 2 डी फंक्शंस की पेशकश की जाती है जो 2D-कैनवस के साथ आसानी से प्राप्त करना संभव नहीं है?

Comments

वैसे: जब आप एक ही कैनवास पर 2d और 3D संदर्भ API का उपयोग नहीं कर सकते हैं, तब भी आप कई कैनवस का उपयोग करके उन्हें जोड़ सकते हैं। WebGL 2d कैनवस का उपयोग बनावट के रूप में कर सकता है और 2d कैनवस ड्रा के लिए WebGL कैनवस का उपयोग स्रोतों के रूप में कर सकता है।

— फिलिप

Answer 1

इस सवाल को दूसरी तरफ से देखते हुए:
एक डेवलपर दूसरे पर एक तकनीक का चयन कैसे करता है?

• उनके पहले से निर्मित सिस्टम में बेहतर एकीकृत करता है
• उपयोग करने के लिए आसान है
• ज्यादा तेज़ है
• अधिक क्षमताओं या बेहतर उनकी आवश्यकताओं के अनुरूप है
• लागत
• अधिक पठार-स्वतंत्र

तो मैं इन गुणों के बारे में कैनवास और वेबजीएल एपीआई के बीच अंतर पर चर्चा करूँगा।

---

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

यदि आप शून्य से कोड लिखते हैं, तो कैनवास एपीआई सीखना और समझना बहुत आसान है। इसके लिए न्यूनतम गणित ज्ञान की आवश्यकता होती है, और विकास तेज और सीधा होता है।

WebGL API के साथ काम करने के लिए मजबूत गणित कौशल और रेंडरिंग पाइपलाइन की पूरी समझ की आवश्यकता होती है। इन कौशल वाले लोग कठिन हैं, उत्पादन धीमा है (इस तरह के कोड आधार के आकार और जटिलता के कारण), और इसलिए इसकी लागत अधिक है।

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

दोनों कैनवास और वेबजीएल html5 उपहार हैं। आमतौर पर एक का समर्थन करने वाले उपकरण समर्थन करेंगे और दूसरे को।

इसलिए योग करने के लिए:

• ड्राइंग एपीआई कोड और बाकी (एकीकरण) को मिलाना: समान
• उपयोग में आसानी:
  • (लाइब्रेरी के साथ) कैनवास = वेबजीएल
  • (खरोंच से) वेबजीएल << कैनवास
• गति: वेबजीएल> कैनवास
• क्षमताओं: webGL> कैनवास
• लागत: वेबजीएल बहुत अधिक महंगा है
• मंच: बहुत समान

उम्मीद है की यह मदद करेगा।

PS चर्चा के लिए खुला।

Comments

@ एब्सट्रैक्ट, वेब जीएल के लिए अच्छे ट्यूटोरियल कहाँ हैं और इसमें कितने घंटे लगेंगे?

— पचेरियर

@Pacerier बस इसे गूगल, पहले कुछ हिट शायद काफी अच्छे हैं। हालांकि, सामान्य रूप से वेबलॉग और ग्राफिक्स प्रोग्रामिंग में अच्छा होने के लिए हफ्तों और महीनों का समय लगेगा, और वास्तव में अच्छा होने के लिए साल। यह सिर्फ कुछ यादृच्छिक "पुस्तकालय" नहीं है, जिसके लिए आपको एपीआई सीखने की जरूरत है और यही है।

— सार एल्गोरिथम

@AbstractAl एल्गोरिदम, मेरा मतलब है कि यदि आप प्रोग्रामिंग कैनवास के साथ एक मास्टर हैं, तो कितने घंटे वेब GL पर स्विच करेंगे?

— पचेरियर

@Pacerier कि देव पर निर्भर करता है और सार के रूप में पहले से ही शामिल देव के गणित कौशल ने कहा। वास्तव में एक परिमाण नहीं है जिसे बनाया जा सकता है।

— scrappedcola

Answer 2

सबसे बड़ा लाभ पाइपलाइन की कार्यक्रमशीलता, और प्रदर्शन है। उदाहरण के लिए, मान लें कि आप 2 बक्से एक के ऊपर एक खींच रहे हैं और एक छिपा हुआ है, कुछ जीएल कार्यान्वयन में छिपे हुए बॉक्स को छोड़ने की गुंजाइश है।

तुलना के लिए, चूंकि यहां एक तालिका बनाने का कोई त्वरित तरीका नहीं है, मैंने बस तुलना तालिका की एक तस्वीर नीचे अपलोड की है। केवल पूर्णता के लिए तीन.js जोड़े।

Comments

पुन: "कुछ जीएल कार्यान्वयन में छिपे हुए बॉक्स को छोड़ने की गुंजाइश है" लेकिन क्या आप जेएस में उस ओवरराइड भाग का पता नहीं लगा सकते हैं और इस तरह से फिर से तैयार नहीं होते हैं जिसकी आवश्यकता नहीं है?

— पेसियर

Answer 3

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

Answer 4

WebGL क्या 2D क्षमता प्रदान करता है जो 2D कैनवास नहीं करता है? सबसे बड़ा एक IMHO ग्राफिक्स हार्डवेयर पर प्रोग्राम करने योग्य टुकड़ा है। उदाहरण के लिए, WebGL में, कोई भी आपके 3D हार्डवेयर पर एक छायादार में कॉनवे के गेम ऑफ़ लाइफ को लागू कर सकता है:

http://glslsandbox.com/e#207.3

इस तरह का 2D डिस्प्ले केवल CPU पर ही चलेगा, GPU के साथ, 2D कैनवास के साथ नहीं। सभी संगणनाएँ जावास्क्रिप्ट में लागू की जाएंगी, और वेब कर्मचारियों की सहायता से GPU के समान समानांतर नहीं होगी। यह निश्चित रूप से सिर्फ एक उदाहरण है, सभी प्रकार के दिलचस्प 2 डी प्रभाव shaders के साथ लागू किए जा सकते हैं।

Comments

इस प्रकार कैनवस, वेबलॉग ओएस पर कम या ज्यादा कर है?

— पचेरियर

मैं उत्सुक हूँ कि क्या सभी कैनवस वैसे भी वेबलॉग को समाप्त करते हैं; अगर यह पहले से उपयोग किए गए सामान्य उपयोग के मामले वेबलॉग का उपयोग करता है, जो प्रत्यक्ष वेबलॉग से अधिक कुशल होगा; या अगर यह किसी भी तरह से opengl के साथ हस्तक्षेप नहीं कर रहा है जब तक कि आप वेबलॉग का उपयोग नहीं करते हैं।

— दिमित्री

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

— एमके

Answer 5

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

Comments

विशेष रूप से एंड्रॉइड टैबलेट की तरह एक डिवाइस पर जहां सीपीयू जावास्क्रिप्ट में जल्दी से ओवरलोड हो जाता है, वेबजीएल का उपयोग करने का मुख्य कारण जीपीयू पर रेंडरिंग लोड को स्थानांतरित करना है।

— कर्टिस

@ Xk0n, Re "छाया, प्रकाश और ज़ूमिंग कोडिंग की संभावना को बढ़ाता है", लेकिन फिर क्या यह GPU-निर्भर नहीं है?

— पचेरियर

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

— फ्रैंक

Answer 6

ऐसा कुछ भी नहीं है जो आप कैनवस के साथ नहीं कर सकते हैं जो आप webGL के साथ नहीं कर सकते: कैनवास get / putImageData के साथ बाइट्स को कुचलने की अनुमति देता है, और आप वेबजीएल के साथ प्रोग्राम, लाइन, ड्रॉ कर सकते हैं ...।
लेकिन अगर आप काफी कुछ ड्रॉइंग, और 60 एफपीएस पर भी कुछ प्रभाव डालना चाहते हैं, तो प्रदर्शन अंतर इतना अधिक है कि यह कैनवास के साथ संभव नहीं होगा, जब यह वेबजीएल में ठीक चलेगा। प्रदर्शन एक मूल विशेषता है।

फिर भी वेबजीएल कार्यक्रम के लिए काफी जटिल है: देखें कि क्या कैनवास आपके लिए काफी अच्छा है या एक पुस्तकालय की तलाश करें जो दर्द को कम करेगा ...
अन्य दोष: यह आईई पर काम नहीं करता है (लेकिन क्या करता है?), और कुछ मोबाइलों पर।
संगतता के लिए यहां देखें: http://caniuse.com/webgl

Answer 7

जैसा कि आप विशेष रूप से कुछ क्लासिक 2 डी चीजें चाहते हैं जो कैनवास के साथ अच्छी तरह से काम नहीं करते हैं:

• रंग रूपांतरित होता है (जैसे स्प्राइट को ब्लिंक करना)
• बार-बार बिटमैप भरना
• रोटेशन के तहत मानचित्रण (कैनवास के तहत कुछ कार्यान्वयन सीम बनाएंगे)
• गहरी लेयरिंग (बहुत कार्यान्वयन निर्भर)
• गुणक या योगात्मक सम्मिश्रण

... लेकिन निश्चित रूप से आपके पास पिक्सेल एक्सेस है, इसलिए आप उपरोक्त सहित, मैन्युअल रूप से वास्तव में कुछ भी कर सकते हैं। लेकिन यह वास्तव में, वास्तव में धीमा हो सकता है। आप सिद्धांत रूप में कैनवास को प्रस्तुत करने के लिए मेसा ओपनग्लास को emscripten कर सकते हैं।

WebGL का उपयोग करने का एक और बड़ा कारण यह होगा कि इसका परिणाम कहीं और पोर्ट करना बहुत आसान है। जो कौशल को और अधिक मूल्यवान बनाता है।

कैनवास का उपयोग करने के कारणों में यह है कि यह अभी भी बेहतर समर्थित है और यदि आप पिक्सेल द्वारा चीजों को पिक्सेल करना सीखते हैं जो एक बहुत ही मूल्यवान सबक भी है।

Comments

Btw वेबलॉग मल्टीथ्रेडेड है? क्या आपके पास स्क्रीन के दो हिस्सों को समवर्ती रूप से खींचने वाले दो धागे हो सकते हैं?

— पेसियर

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

— केंट वीगेल

Answer 8

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

उदाहरण के लिए:

 if (window.WebGLRenderingContext) {
     webGLcanvasApp()
         } else if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
     html5CanvasAppFMobile()
    } else {
    html5CanvasApp()
    }

स्रोत:
WebGL समर्थन का पता लगाने का उचित तरीका?
JQuery में मोबाइल डिवाइस का पता लगाने का सबसे अच्छा तरीका क्या है?

Answer 9

GPU के बिना WebGL बेकार है।
यह हार्डवेयर निर्भरता एक बड़ी समस्या नहीं है क्योंकि अधिकांश सिस्टम में GPU हैं, लेकिन यदि GPU या CPU आर्किटेक्चर कभी विकसित होते हैं, तो अनुकरण द्वारा वेबलॉग सामग्री को संरक्षित करना चुनौतीपूर्ण हो सकता है। पुराने (वर्चुअलाइज्ड) कंप्यूटरों पर इसे चलाना समस्याग्रस्त है।

लेकिन "कैनवस बनाम वेबजीएल" को एक द्विआधारी विकल्प नहीं होना चाहिए। मैं वास्तव में प्रभाव के लिए वेबलॉग का उपयोग करना पसंद करता हूं, लेकिन बाकी को कैनवास में करना। जब मैं इसे एक वीएम में चलाता हूं, यह अभी भी अच्छी तरह से और तेजी से काम करता है, बस प्रभाव के बिना।