2 ডি গেমস / অ্যাপসের জন্য 2 ডি ক্যানভাসের পরিবর্তে ওয়েবজিএল ব্যবহার করার কোনও কারণ আছে কি?


112

2 ডি গেমস / অ্যাপ্লিকেশনের জন্য 2 ডি-ক্যানভাসের পরিবর্তে ওয়েবজিএল ব্যবহার করার জন্য পারফরম্যান্স বাদে কোনও কারণ আছে কি ?

অন্য কথায় 2G- ক্যানভাসের সাহায্যে ওয়েবজিএল দ্বারা 2D কার্যকারিতা কীভাবে দেওয়া সম্ভব হয় না?


5
উপায় দ্বারা: আপনি একই ক্যানভাসে 2 ডি এবং 3 ডি প্রসঙ্গ API ব্যবহার করতে পারবেন না, আপনি এখনও একাধিক ক্যানভ্যাস ব্যবহার করে সেগুলি একত্রিত করতে পারেন। ওয়েবজিএল টেক্সচার হিসাবে 2 ডি ক্যানভ্যাসগুলি ব্যবহার করতে পারে এবং 2 ডি ক্যানভাসগুলি ড্রইমেজের উত্স হিসাবে ওয়েবজিএল ক্যানভ্যাসগুলি ব্যবহার করতে পারে।
ফিলিপ

উত্তর:


83

এই প্রশ্নটি অন্য পক্ষ থেকে দেখছেন:
কীভাবে কোনও বিকাশকারী একটি প্রযুক্তি অন্যের চেয়ে পছন্দ করে?

  • তাদের ইতিমধ্যে নির্মিত সিস্টেমে আরও ভাল সংহত করে
  • ব্যবহার করা সহজ
  • দ্রুততর
  • আরও ক্ষমতা বা আরও ভাল তাদের প্রয়োজন অনুসারে
  • মূল্য
  • আরও প্ল্যাটফর্ম-ইন্ডিপেন্ডেন্ট

সুতরাং আমি এই গুণাবলী সম্পর্কিত ক্যানভাস এবং ওয়েবজিএল এপিআইয়ের মধ্যে পার্থক্য আলোচনা করব।


ক্যানভাস এবং ওয়েবজিএল উভয়ই জাভাস্ক্রিপ্ট এপিআই। ইন্টিগ্রেশন (বাঁধাই) সম্পর্কিত তারা প্রায় একই রকম। এগুলি উভয়ই অনেকগুলি লাইব্রেরি দ্বারা সমর্থিত যা আপনার কোডিংয়ের গতি বাড়িয়ে তুলতে পারে। বিভিন্ন লাইব্রেরি আপনাকে আপনার কোডটি সংগঠিত করার জন্য বিভিন্ন উপায়ে দেয়, সুতরাং লাইব্রেরির পছন্দটি আপনার আঁকার এপিআইগুলি কীভাবে কাঠামোবদ্ধ হয় তা নির্ধারণ করে তবে এটি এখনও একই জিনিস (কীভাবে বাকি কোডগুলি এটির সাথে একত্রে আবদ্ধ হয়)। আপনি যদি গ্রন্থাগার ব্যবহার করেন তবে লেখার কোডের স্বাচ্ছন্দতা লাইব্রেরির উপর নির্ভর করে।

আপনি যদি শূন্য থেকে কোড লিখেন তবে ক্যানভাস এপিআই শিখতে এবং বুঝতে অনেক সহজ। এটির জন্য ন্যূনতম গণিত জ্ঞান প্রয়োজন এবং বিকাশ দ্রুত এবং সোজা।

ওয়েবজিএল এপিআইয়ের সাথে কাজ করার জন্য শক্তিশালী গণিত দক্ষতা এবং রেন্ডারিং পাইপলাইনের একটি সম্পূর্ণ বোঝার প্রয়োজন। এই দক্ষতাযুক্ত ব্যক্তিদের সন্ধান করা আরও শক্ত, উত্পাদন ধীর গতির (এই জাতীয় কোডের আকার এবং জটিলতার কারণে), এবং এজন্য এর জন্য আরও বেশি ব্যয় হয়।

ওয়েবজিএল দ্রুত এবং এটিতে আরও ক্ষমতা রয়েছে। এই ব্যাপারে কোন সন্দেহ নেই. এটি একটি নেটিভ থ্রিডি এপিআই যা আপনাকে রেন্ডারিং পাইপলাইনে সম্পূর্ণ অ্যাক্সেস দেয়, কোড এবং প্রভাবগুলি দ্রুত সম্পাদন করা হয় এবং আরও 'টুইঙ্কেবল' হয়। ওয়েবজিএল দিয়ে আসলেই এর সীমা নেই।

ক্যানভাস এবং ওয়েবজিএল উভয়ই এইচটিএমএল 5 গুডি। সাধারণত যে ডিভাইসগুলির একটি সমর্থন করে সেগুলি অন্যকে সমর্থন করবে।

সুতরাং, সংক্ষেপে:

  • অঙ্কন এপিআই কোড এবং বাকিগুলি (সংহতকরণ): একই জাতীয় similar
  • ব্যবহারে সহজ:
    • (লাইব্রেরি সহ) ক্যানভাস = ওয়েবজিএল
    • (স্ক্র্যাচ থেকে) ওয়েবজিএল << ক্যানভাস
  • গতি: ওয়েবজিএল> ক্যানভাস
  • ক্ষমতা: ওয়েবজিএল> ক্যানভাস
  • ব্যয়: ওয়েবজিএল অনেক বেশি ব্যয়বহুল
  • প্ল্যাটফর্ম: খুব অনুরূপ

আশাকরি এটা সাহায্য করবে.

আলোচনার জন্য পিএস উন্মুক্ত


@ অ্যাবস্ট্রাক্ট, ওয়েব জিএল-এর জন্য ভাল টিউটোরিয়ালগুলি কোথায় এবং এতে কত ঘন্টা সময় লাগবে?
পেসারিয়ার

1
@ পেসারিয়র এটি গুগল করেছেন, প্রথম কয়েকটি হিট সম্ভবত যথেষ্ট ভাল। তবে সাধারণভাবে ওয়েবজিএল এবং গ্রাফিক্স প্রোগ্রামিংয়ে ভাল হতে কয়েক সপ্তাহ এবং মাস সময় লাগবে এবং বছরগুলি সত্যই ভাল হতে পারে। এটি কেবলমাত্র কিছু র্যান্ডম "লাইব্রেরি" নয় যেটির জন্য আপনার এপিআই শিখতে হবে এবং এটিই।
অ্যাবস্ট্রাক্ট অ্যালগরিদম

@ অ্যাবস্ট্রাক্ট অ্যালগোরিদম, আমি বলতে চাইছি আপনি যদি প্রোগ্রামিং ক্যানভাসের সাথে একজন মাস্টার হিসাবে থাকেন তবে ওয়েব জিএল এ স্যুইচ করতে কত ঘন্টা সময় লাগবে?
পেসারিয়ার

@ পেসারিয়ার যা দেবের উপর নির্ভর করে এবং অ্যাবস্ট্রাক্ট ইতিমধ্যে বলেছিলেন যে দেবের গণিত দক্ষতা এতে জড়িত। সত্যিই তৈরি করা যেতে পারে এমন কোন পরিমাণ নেই।
স্ক্র্যাপকোলা

32

সবচেয়ে বড় সুবিধা হ'ল পাইপলাইনের প্রোগ্রামযোগ্যতা এবং কর্মক্ষমতা। উদাহরণস্বরূপ, বলুন যে আপনি একটির উপরে 2 টি বাক্স আঁকছেন এবং একটি লুকিয়ে রয়েছে, কিছু জিএল বাস্তবায়নগুলিতে লুকানো বাক্সটি ফেলে দেওয়ার সুযোগ রয়েছে।

তুলনা হিসাবে, যেহেতু এখানে একটি টেবিল তৈরি করার কোনও দ্রুত উপায় নেই, আমি কেবল নীচের তুলনা টেবিলের একটি ছবি আপলোড করেছি। কেবলমাত্র সম্পূর্ণতার জন্য থ্রি.জে যোগ করা হয়েছে।

টেবিল


পুনরায় "কিছু জিএল বাস্তবায়নের লুকায়িত বাক্সটি ফেলে দেওয়ার সুযোগ রয়েছে" তবে আপনি জেএসের সেই ওভাররাইড অংশটি সনাক্ত করতে পারেন এবং এইভাবে কী প্রয়োজন নেই তা পুনরায় আঁকতে পারেন না?
পেসারিয়ার

16

আমার নিজের অ্যাপ্লিকেশনগুলির অভিজ্ঞতা থেকে বলতে গিয়ে , গ্রাফিক্স শেডারগুলি কেবলমাত্র একমাত্র কারণ যার জন্য আমার ওয়েবজিএল সমর্থন প্রয়োজন support উভয় ফ্রেমওয়ার্ক থ্রি.জেএস দিয়ে বিমূর্ত করা যায় বলে ব্যবহারের সহজতা আমার পক্ষে খুব সামান্য। ধরে নিলাম আমার ছায়ার দরকার নেই, আমি ব্রাউজার / মেশিন সমর্থন সর্বাধিক করে তোলার জন্য কোনও ফ্রেমওয়ার্ক ব্যবহারের অনুমতি দিই।


16

2D ক্যানভাস না করে যে 2D সক্ষমতা ওয়েবজিএল দেয়? বৃহত্তম আইএমএইচও হ'ল গ্রাফিক্স হার্ডওয়্যারে প্রোগ্রামেবল টুকরা শেডার। উদাহরণস্বরূপ, ওয়েবজিএলে, কেউ আপনার 3 ডি হার্ডওয়্যারটিতে শ্যাডারে কনওয়ের গেম অফ লাইফ প্রয়োগ করতে পারে:

http://glslsandbox.com/e#207.3

এই ধরণের 2D ডিসপ্লে কেবল 2 ডি ক্যানভাস সহ জিপিইউ নয়, সিপিইউতে চলবে। সমস্ত গণনা জাভাস্ক্রিপ্টে প্রয়োগ করা হবে এবং এমনকি জিপিইউর মতো সমান্তরাল হবে না এমনকি ওয়েব কর্মীদের সহায়তায়। এটি অবশ্যই একটি উদাহরণ, শ্যাডারগুলির সাথে সমস্ত ধরণের আকর্ষণীয় 2 ডি ইফেক্টগুলি প্রয়োগ করা যেতে পারে।


2
সুতরাং বনাম ক্যানভাস, ওয়েবেজিএল কি কমবেশি ওএসের উপর কর আরোপ করছে?
পেসারিয়ার

আমি কৌতূহল করছি যে সমস্ত ক্যানভাস যাই হোক না কেন ওয়েবগল করা শেষ করে; যদি এটি প্রাকম্পিলিত সাধারণ ব্যবহারের ক্ষেত্রে ওয়েবগেল ব্যবহার করে, যা সরাসরি ওয়েবগেলের চেয়ে বেশি দক্ষ হবে; অথবা যদি আপনি ওয়েবজিএল না ব্যবহার করেন তবে এটি কোনওভাবেই ওপেনগলকে হস্তক্ষেপ করছে না।
দিমিত্রি

1
@ দিমিত্রি দুর্দান্ত প্রশ্ন, এবং বিভিন্ন ব্রাউজারগুলি সেই সমস্যায় বিভিন্ন পন্থা নিতে মুক্ত। তবে, তারা ক্যানভাস 2 ডি এপিআইকে কীভাবে ত্বরান্বিত করে, ক্যানভাস 2 ডি এপিআই নিজেই প্রোগ্রামেবল শেডার বা ভার্টেক্স অ্যারে বাফার সরবরাহ করে না। এটি একটি "চ্যাটি" এপিআই (প্রতি উপাদান অনুসারে একটি জাভাস্ক্রিপ্ট-থেকে-নেটিভ কল), যেখানে ওয়েবজিএল এর এপিআই বাল্ক ডেটা লোডিং এবং জিপিইউ-ভিত্তিক কাস্টম প্রসেসিংয়ের অনুমতি দেয়।
ইমাকিকে

14

ওয়েল, পারফরম্যান্স সবচেয়ে বড় কারণগুলির মধ্যে একটি হবে কারণ আপনি যখন কোনও গেম কোডিং করছেন, এটি দ্রুত হওয়া উচিত। তবে আরও কয়েকটি কারণ রয়েছে যার জন্য আপনি ক্যানভাসের উপর দিয়ে ওয়েবজিএল চয়ন করতে পারেন। এটি শেডারগুলি, আলো এবং জুমিংয়ের কোডিংয়ের সম্ভাবনা সরবরাহ করে, যা আপনি যদি বাণিজ্যিক গেম অ্যাপ্লিকেশন করছেন তবে তা গুরুত্বপূর্ণ। এছাড়াও ক্যানভাস 50 স্প্রাইট বা তারপরে লেগেই যায়।


বিশেষত একটি অ্যান্ড্রয়েড ট্যাবলেট জাতীয় ডিভাইসে যেখানে জাভাস্ক্রিপ্টে সিপিইউ ওভারলোড হয়ে যায়, ওয়েবজিএল ব্যবহারের মূল কারণটি জিপিইউতে রেন্ডারিং লোড স্থানান্তর করা।
কার্টিস

1
@ এক্সকে0এন, পুনরায় "শেডারগুলিকে কোডিং, আলো এবং জুম করার সম্ভাবনাটি আরও বাড়িয়ে তোলে", কিন্তু তারপরে কী এটি জিপিইউ-নির্ভর হয়ে ওঠে না?
পেসারিয়ার

আপনি এখনও 2 ডি ক্যানভাস প্রসঙ্গে সেট ট্রান্সফর্মের সাথে জুম করতে পারেন। স্প্রাইট শিটগুলি থেকে স্কেলিং করার সময় 2 ডি ক্যানভাসে টেক্সচার রক্তপাতের সাথে আমার খুব কষ্ট হয়েছে। তবে, এই কারণেই আমি ওয়েবজিএল-এ ঘুরছি to আমি এমন একটি টিউটোরিয়াল দেখেছি যা নিকটবর্তী প্রতিবেশীর উত্স রেক্টরের বাইরে যাওয়া থেকে স্যাম্পলিং বন্ধ করে দেয়, যা আমার রক্তপাতের প্রান্ত সমস্যার সমাধান করবে।
ফ্র্যাঙ্ক

7

ক্যানভাসের সাথে আপনি যা করতে পারবেন তা তেমন কিছুই নেই যা আপনি ওয়েবজিএল দিয়ে করতে পারবেন না: ক্যানভাসটি get / putImageData দিয়ে বাইটগুলি পিষ্ট করতে দেয় এবং আপনি ওয়েবজএল দিয়ে লাইন, বৃত্ত, ... আঁকতে পারেন।
তবে আপনি যদি কিছু অঙ্কন এবং 60 এফপিএসে কিছু প্রভাব ফেলতে চাইছেন তবে পারফরম্যান্সের ব্যবধানটি এতটাই বেশি যে এটি কেবল ক্যানভাস দিয়ে সম্ভব হবে না, যখন এটি ওয়েবজিএলে ঠিক আছে। পারফরম্যান্স একটি মূল বৈশিষ্ট্য।

তবুও ওয়েবজিএল প্রোগ্রামের জন্য বেশ জটিল: দেখুন ক্যানভাস আপনার পক্ষে যথেষ্ট ভাল কিনা বা এমন কোনও লাইব্রেরি খুঁজছেন যা বেদনা লাঘব করতে পারে ...
অন্যান্য অসুবিধা: এটি আই (তবে কী করে?) এবং কিছু মোবাইলে কাজ করে না।
সামঞ্জস্যতার জন্য এখানে দেখুন: http://caniuse.com/webgl


7

আপনি যেমন কিছু ক্লাসিক 2 ডি জিনিস চান যা ক্যানভাসের সাথে ভালভাবে কাজ করে না:

  • রঙ রূপান্তর (যেমন একটি স্প্রাইট জ্বলজ্বলে)
  • পুনরাবৃত্তি বিটম্যাপ পূরণ করে
  • আবর্তনের অধীনে টাইলিং মানচিত্র (ক্যানভাস অধীনে কিছু বাস্তবায়ন seams তৈরি করবে)
  • গভীর স্তর স্থাপন (খুব কার্যকরভাবে নির্ভরশীল)
  • গুণ বা সংযোজক মিশ্রণ

... তবে অবশ্যই আপনার পিক্সেল অ্যাক্সেস রয়েছে, সুতরাং আপনি নিজে থেকে উপরোক্তগুলি সহ সত্যই কিছু করতে পারেন। তবে তা সত্যই, ধীর হতে পারে। তাত্ত্বিকভাবে ক্যানভাসে রেন্ডার করতে আপনি মেসা ওপেনগলকে এমস্ক্রিপ্ট করতে পারেন।

ওয়েবজিএল ব্যবহারের আর একটি বড় কারণ হ'ল ফলাফলটি অন্য কোথাও পোর্ট করা খুব সহজ। যা দক্ষতা আরও মূল্যবান করে তোলে।

ক্যানভাস ব্যবহার করার কারণগুলি হ'ল এটি এখনও আরও ভাল সমর্থিত এবং যদি আপনি পিক্সেল দ্বারা পিক্সেল জিনিসগুলি শিখেন তবে এটিও একটি অত্যন্ত মূল্যবান পাঠ।


বিটিডব্লিউ কি ওয়েবজিএল মাল্টিথ্রেড হয়? আপনি কি একই সাথে পর্দার দুটি অংশ অঙ্কন করতে পারেন?
পেসারিয়ার

আমি মনে করি যে উত্তরটি "হ্যাঁ এবং না", যেহেতু ওয়েব ব্রাউজারগুলি অন্তর্নিহিতভাবে একক থ্রেডযুক্ত, তাই জিপিইউতে রেন্ডার করার জন্য ডেটা অনুলিপি করা বহু-থ্রেডযুক্ত নয়। তবে শেডাররা রেন্ডারিং শুরু করার পরে আপনি গ্রাফিক্স কার্ডের বিশাল সমান্তরালতাটি ব্যবহার করছেন যা মূলত একবারে স্ক্রিনের একাধিক অংশে আঁকছে। আমি ভুল হলে আমাকে সংশোধন করুন, যে কেউ।
কেন্ট ওয়েইজেল

2

যেহেতু ওয়েবজিএল বিশেষত নতুন প্রযুক্তি এবং HTML5 ক্যানভাসটি আরও বেশি প্রতিষ্ঠিত হয়েছে আপনি কী ব্যবহার করতে চান তা আপনার ব্যবহারকারীদের উপর নির্ভর করে। যদি আপনি মনে করেন যে আপনার ব্যবহারকারীরা মোবাইল ডিভাইস ব্যবহার করবেন তবে আমি এইচটিএমএল 5 ক্যানভাসের পরামর্শ দেব তবে আপনি যদি আরও 2 ডি রেন্ডারিং চান তবে আমি ওয়েবজিএল ব্যবহার করব। সুতরাং আপনি যদি করতে পারেন যে যদি মোবাইলটি HTML5- র সাথে রেন্ডার করা হয় তবে যদি তারা ওয়েবজিএল সমর্থন করে এমন একটি প্ল্যাটফর্মে থাকে।

উদাহরণ স্বরূপ:

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

সূত্র:
ওয়েবজিএল সমর্থন সনাক্ত করার সঠিক উপায়?
JQuery এ কোনও মোবাইল ডিভাইস সনাক্ত করার সর্বোত্তম উপায় কী?


1

ওয়েবজিএল জিপিইউ ব্যতীত অব্যর্থ।
এই হার্ডওয়্যার নির্ভরতা কোনও বড় সমস্যা নয় কারণ বেশিরভাগ সিস্টেমে জিপিইউ রয়েছে তবে জিপিইউ বা সিপিইউ আর্কিটেকচারগুলি যদি কখনও বিকশিত হয় তবে এমুলেশন দ্বারা ওয়েবগেল সামগ্রী সংরক্ষণ করা চ্যালেঞ্জ হতে পারে। এটি পুরানো (ভার্চুয়ালাইজড) কম্পিউটারে চালানো সমস্যাযুক্ত।

তবে "ক্যানভাস বনাম ওয়েবজিএল" বাইনারি পছন্দ হতে হবে না। আমি প্রকৃতপক্ষে প্রভাবগুলির জন্য ওয়েবজিএল ব্যবহার করতে পছন্দ করি তবে বাকী অংশটি ক্যানভাসে করে। আমি যখন এটি কোনও ভিএম-তে চালিত করি, তখনও এটি প্রভাব ছাড়াই দুর্দান্ত এবং দ্রুত কাজ করে।

আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.