वेबजीएल वीएस कैनवास 2 डी हार्डवेयर त्वरण

Question

इन दिनों, मुझे कैनवास पर कई छवियां खींचने की आवश्यकता है। कैनवास आकार 800x600px है, और मेरे पास 256x256px (कुछ छोटा है) की कई छवियां हैं, इसे आकर्षित करने के लिए, ये छोटी छवियां कैनवास पर एक पूर्ण छवि तैयार करेंगी। मेरे पास इसे लागू करने के दो तरीके हैं।

सबसे पहले, अगर मैं कैनवास 2 डी संदर्भ का उपयोग करता हूं, तो यह context = canvas.getContext('2d') है, तो मैं कैनवास के उचित स्थान पर प्रत्येक छवि को रखने के लिए बस context.drawimage() विधि का उपयोग कर सकता हूं।

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

फिर, मैं इन दो तरीकों के प्रदर्शन की तुलना करता हूं। उनके दोनों एफपीएस 60 तक पहुंच जाएंगे, और एनीमेशन (जब मैं माउस पर क्लिक या स्थानांतरित करता हूं, तो कैनवास कई बार फिर से चला जाएगा) बहुत चिकनी लग रहा है। तो मैं उनके सीपीयू उपयोग की तुलना करता हूं। मुझे उम्मीद है कि जब मैं वेबजीएल का उपयोग करता हूं, तो सीपीयू कम उपयोग करेगा क्योंकि जीपीयू ड्राइंग के कई कामों को आश्वस्त करेगा। लेकिन नतीजा यह है कि, CPU उपयोग लगभग समान दिखता है। मैं अपने वेबजीएल कोड को अनुकूलित करने का प्रयास करता हूं, और मुझे लगता है कि यह काफी अच्छा है। Google द्वारा, मैंने पाया कि क्रोम, फ़ायरफ़ॉक्स जैसे ब्राउज़र डिफ़ॉल्ट रूप से हार्डवेयर त्वरण सक्षम करेगा। तो मैं हार्डवेयर त्वरण को बंद करने की कोशिश करता हूं। फिर पहली विधि का सीपीयू उपयोग बहुत अधिक हो जाता है। तो, मेरा सवाल यह है कि, कैनवास 2 डी जीपीयू का उपयोग करने के लिए उपयोग करता है, क्या मेरे लिए केवल 2 डी प्रतिपादन के लिए वेबजीएल का उपयोग करना आवश्यक है? कैनवास 2 डी जीपीयू त्वरण और वेबजीएल के बीच क्या अंतर है? वे दोनों जीपीयू का उपयोग करते हैं। शायद दूसरी विधि के सीपीयू उपयोग को कम करने के लिए कोई और तरीका है? किसी भी जवाब की सराहना की जाएगी!

Answer 1

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

सैद्धांतिक रूप से वेबजीएल तेजी से हो सकता है क्योंकि कैनवास 2 डी के लिए डिफ़ॉल्ट यह है कि ड्रॉइंगबफर संरक्षित है जबकि वेबजीएल के लिए यह नहीं है। इसका मतलब है कि यदि आप वेबजीएल पर एंटी-एलाइजिंग बंद करते हैं तो ब्राउज़र में डबल बफर करने का विकल्प होता है। ऐसा कुछ कैनवास 2 डी के साथ नहीं कर सकता है। वेबजीएल में एक और अनुकूलन आप अल्फा को बंद कर सकते हैं जिसका अर्थ है कि ब्राउजर के पास पेज के साथ अपने वेबजीएल को कंपोजिट करते समय मिश्रण बंद करने का विकल्प है, फिर कुछ ऐसा नहीं है जिसमें कैनवास 2 डी के साथ विकल्प नहीं है। (कैनवास 2 डी के लिए अल्फा बंद करने में सक्षम होने की योजना है लेकिन 2017/6 तक यह व्यापक रूप से समर्थित नहीं है)

लेकिन विकल्प मेरा मतलब है कि बस। यह तय करने के लिए ब्राउज़र पर निर्भर है कि उन अनुकूलन को बनाना है या नहीं।

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

मुझे लगता है कि अंतिम अंतर लाता है। वेबजीएल निम्न स्तर और प्रसिद्ध है। इसे गड़बड़ करने के लिए ब्राउजर बहुत कुछ नहीं कर सकता है। या इसे एक और तरीका रखने के लिए आप 100% नियंत्रण में हैं।

दूसरी ओर कैनवास 2 डी के साथ यह ब्राउज़र पर निर्भर करता है कि क्या करना है और कौन सा अनुकूलन करना है। वे प्रत्येक रिलीज पर बदल सकते हैं। मैं क्रोम के लिए एक बिंदु पर जानता हूं कि 256x256 के तहत किसी भी कैनवास हार्डवेयर को तेज नहीं किया गया था। एक और उदाहरण होगा जब एक छवि खींचते समय कैनवास करता है।वेबजीएल में आप बनावट बनाते हैं। आप तय करते हैं कि आपका शेडर कितना जटिल है। कैनवास में आपको पता नहीं है कि यह क्या कर रहा है। हो सकता है कि यह एक जटिल शेडर का उपयोग कर रहा है जो सभी विभिन्न कैनवास globalCompositeOperation, मास्किंग और अन्य सुविधाओं का समर्थन करता है। शायद स्मृति प्रबंधन के लिए यह छवियों को चक्स में विभाजित करता है और उन्हें टुकड़ों में प्रस्तुत करता है। प्रत्येक ब्राउज़र के साथ-साथ उसी ब्राउज़र के प्रत्येक संस्करण के लिए जो भी करने का निर्णय लेता है वह उस टीम तक है, जहां वेबजीएल के साथ यह आपके लिए 100% अधिक है। वेबजीएल को गड़बड़ करने के लिए बीच में ज्यादा कुछ नहीं कर सकता है।

एफवाईआई: यहां an article detailing how to write a WebGL version of the canvas2d drawImage function है और इसके बाद an article on how to implement the canvas2d matrix stack है।