WebGL থেকে WebGPU

François Beaufort

একজন WebGL ডেভেলপার হিসেবে, আপনি WebGPU ব্যবহার শুরু করার জন্য ভয় ও উত্তেজিত হতে পারেন, WebGL-এর উত্তরসূরি যা ওয়েবে আধুনিক গ্রাফিক্স API-এর অগ্রগতি নিয়ে আসে।

এটা জেনে আশ্বস্ত হয় যে WebGL এবং WebGPU অনেকগুলি মূল ধারণা শেয়ার করে৷ উভয় APIই আপনাকে GPU-তে শেডার নামে ছোট প্রোগ্রাম চালানোর অনুমতি দেয়। WebGL ভার্টেক্স এবং ফ্র্যাগমেন্ট শেডার সমর্থন করে, WebGPU এছাড়াও কম্পিউট শেডার সমর্থন করে। WebGL ওপেনজিএল শেডিং ল্যাঙ্গুয়েজ (GLSL) ব্যবহার করে যখন WebGPU ব্যবহার করে WebGPU শেডিং ল্যাঙ্গুয়েজ (WGSL)। যদিও দুটি ভাষা ভিন্ন, অন্তর্নিহিত ধারণাগুলি বেশিরভাগই একই।

সেই কথা মাথায় রেখে, আপনাকে শুরু করতে সাহায্য করতে এই নিবন্ধটি WebGL এবং WebGPU-এর মধ্যে কিছু পার্থক্য তুলে ধরে।

বৈশ্বিক রাষ্ট্র

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

WebGPU একটি রাষ্ট্রহীন API, এবং এটি একটি বিশ্বব্যাপী অবস্থা বজায় রাখে না। পরিবর্তে, এটি একটি পাইপলাইনের ধারণা ব্যবহার করে সমস্ত রেন্ডারিং স্টেটকে এনক্যাপসুলেট করে যা WebGL-এ বিশ্বব্যাপী ছিল। একটি পাইপলাইনে কোন ব্লেন্ডিং, টপোলজি এবং অ্যাট্রিবিউটগুলি ব্যবহার করার মতো তথ্য থাকে৷ একটি পাইপলাইন অপরিবর্তনীয়। আপনি যদি কিছু সেটিংস পরিবর্তন করতে চান তবে আপনাকে আরেকটি পাইপলাইন তৈরি করতে হবে। WebGPU কমান্ড এনকোডারগুলিকে একত্রে ব্যাচ করতে এবং সেগুলি যে ক্রমে রেকর্ড করা হয়েছিল সেই ক্রমে চালায়। এটি শ্যাডো ম্যাপিং-এর ক্ষেত্রে উপযোগী, উদাহরণস্বরূপ, যেখানে, বস্তুর উপর একক পাসে, অ্যাপ্লিকেশন একাধিক কমান্ড স্ট্রিম রেকর্ড করতে পারে, প্রতিটি আলোর ছায়া মানচিত্রের জন্য একটি।

সংক্ষেপে বলতে গেলে, WebGL-এর গ্লোবাল স্টেট মডেল যেমন শক্তিশালী, কম্পোজেবল লাইব্রেরি এবং অ্যাপ্লিকেশনগুলিকে কঠিন এবং ভঙ্গুর করে তুলেছে, WebGPU উল্লেখযোগ্যভাবে সেই পরিমাণ হ্রাস করেছে যা ডেভেলপারদের GPU-তে কমান্ড পাঠানোর সময় ট্র্যাক রাখতে হবে।

আর সিঙ্ক করবেন না

GPU-তে, কমান্ড পাঠানো এবং সিঙ্ক্রোনাসভাবে তাদের জন্য অপেক্ষা করা সাধারণত অদক্ষ, কারণ এটি পাইপলাইন ফ্লাশ করতে পারে এবং বুদবুদ সৃষ্টি করতে পারে। এটি বিশেষ করে WebGPU এবং WebGL-এর ক্ষেত্রে সত্য, যেগুলি জাভাস্ক্রিপ্ট থেকে একটি পৃথক প্রক্রিয়ায় চলমান GPU ড্রাইভার সহ একটি মাল্টি-প্রসেস আর্কিটেকচার ব্যবহার করে।

WebGL-এ, উদাহরণস্বরূপ, gl.getError() কল করার জন্য JavaScript প্রক্রিয়া থেকে GPU প্রক্রিয়া এবং পিছনে একটি সিঙ্ক্রোনাস আইপিসি প্রয়োজন। দুটি প্রক্রিয়া যোগাযোগের ফলে এটি CPU পাশে একটি বুদবুদ সৃষ্টি করতে পারে।

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

শেডার গণনা করুন

কম্পিউট শেডার হল এমন প্রোগ্রাম যা সাধারণ-উদ্দেশ্য কম্পিউটেশন করতে GPU-তে চলে। এগুলি শুধুমাত্র WebGPU-তে উপলব্ধ, WebGL নয়৷

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

ভিডিও ফ্রেম প্রক্রিয়াকরণ

JavaScript এবং WebAssembly ব্যবহার করে ভিডিও ফ্রেম প্রক্রিয়াকরণের কিছু ত্রুটি রয়েছে: GPU মেমরি থেকে CPU মেমরিতে ডেটা অনুলিপি করার খরচ, এবং সীমিত সমান্তরালতা যা কর্মীদের এবং CPU থ্রেডগুলির সাথে অর্জন করা যেতে পারে। ওয়েবজিপিইউ-এর সেই সীমাবদ্ধতা নেই, এটি ওয়েবকোডেক্স API-এর সাথে শক্ত একীকরণের জন্য ভিডিও ফ্রেম প্রক্রিয়াকরণের জন্য এটিকে একটি দুর্দান্ত উপযুক্ত করে তুলেছে।

নিম্নলিখিত কোড স্নিপেট দেখায় কিভাবে WebGPU-তে একটি বাহ্যিক টেক্সচার হিসাবে একটি VideoFrame আমদানি করতে হয় এবং এটি প্রক্রিয়া করতে হয়। আপনি এই ডেমো চেষ্টা করে দেখতে পারেন.

// Init WebGPU device and pipeline...
// Configure canvas context...
// Feed camera stream to video...

(function render() {
  const videoFrame = new VideoFrame(video);
  applyFilter(videoFrame);
  requestAnimationFrame(render);
})();

function applyFilter(videoFrame) {
  const texture = device.importExternalTexture({ source: videoFrame });
  const bindgroup = device.createBindGroup({
    layout: pipeline.getBindGroupLayout(0),
    entries: [{ binding: 0, resource: texture }],
  });
  // Finally, submit commands to GPU
}

ডিফল্টরূপে অ্যাপ্লিকেশন বহনযোগ্যতা

WebGPU আপনাকে limits অনুরোধ করতে বাধ্য করে। ডিফল্টরূপে, requestDevice() একটি GPUDevice ফেরত দেয় যা শারীরিক ডিভাইসের হার্ডওয়্যার ক্ষমতার সাথে মেলে না, বরং একটি যুক্তিসঙ্গত এবং সব GPU-এর সর্বনিম্ন সাধারণ ডিনোমিনেটর। ডেভেলপারদের ডিভাইস সীমার অনুরোধ করার জন্য, WebGPU নিশ্চিত করে যে অ্যাপ্লিকেশনগুলি যতটা সম্ভব ডিভাইসে চলবে।

ক্যানভাস হ্যান্ডলিং

আপনি একটি WebGL প্রসঙ্গ তৈরি করার পরে WebGL স্বয়ংক্রিয়ভাবে ক্যানভাস পরিচালনা করে এবং আলফা, অ্যান্টিলিয়াস, কালারস্পেস, গভীরতা, সংরক্ষণ ড্রয়িংবাফার বা স্টেনসিলের মতো প্রসঙ্গ বৈশিষ্ট্যগুলি সরবরাহ করে।

অন্যদিকে, WebGPU-এর জন্য আপনাকে ক্যানভাস নিজেই পরিচালনা করতে হবে। উদাহরণস্বরূপ, WebGPU-তে অ্যান্টিলিয়াসিং অর্জন করতে, আপনি একটি বহু নমুনা টেক্সচার তৈরি করবেন এবং এটিতে রেন্ডার করবেন। তারপর, আপনি একটি নিয়মিত টেক্সচারে মাল্টিস্যাম্পল টেক্সচার সমাধান করবেন এবং সেই টেক্সচারটিকে ক্যানভাসে আঁকবেন। এই ম্যানুয়াল ম্যানেজমেন্ট আপনাকে একটি একক GPUDevice অবজেক্ট থেকে যতগুলি চান ততগুলি ক্যানভাসে আউটপুট করতে দেয়। বিপরীতে, WebGL প্রতি ক্যানভাসে শুধুমাত্র একটি প্রসঙ্গ তৈরি করতে পারে।

WebGPU একাধিক ক্যানভাসেস ডেমো দেখুন।

একটি পার্শ্ব নোটে, ব্রাউজারগুলির বর্তমানে প্রতি পৃষ্ঠায় WebGL ক্যানভাসের সংখ্যার একটি সীমা রয়েছে৷ লেখার সময়, Chrome এবং Safari একসাথে 16টি পর্যন্ত WebGL ক্যানভাস ব্যবহার করতে পারে; Firefox তাদের মধ্যে 200টি পর্যন্ত তৈরি করতে পারে। অন্যদিকে, প্রতি পৃষ্ঠায় WebGPU ক্যানভাসের সংখ্যার কোনো সীমা নেই।

সাফারি, ক্রোম এবং ফায়ারফক্সে সর্বাধিক সংখ্যক WebGL ক্যানভাস (বাম থেকে ডানে) - ডেমো ।

সহায়ক ত্রুটি বার্তা

WebGPU API থেকে ফেরত আসা প্রতিটি বার্তার জন্য একটি কল স্ট্যাক প্রদান করে। এর মানে হল যে আপনার কোডে কোথায় ত্রুটি ঘটেছে তা আপনি দ্রুত দেখতে পারবেন, যা ত্রুটিগুলি ডিবাগিং এবং ঠিক করার জন্য সহায়ক ৷

একটি কল স্ট্যাক প্রদানের পাশাপাশি, WebGPU ত্রুটি বার্তাগুলিও বোঝা সহজ এবং পদক্ষেপযোগ্য। ত্রুটির বার্তাগুলিতে সাধারণত ত্রুটির বিবরণ এবং ত্রুটিটি কীভাবে ঠিক করা যায় তার পরামর্শ অন্তর্ভুক্ত থাকে।

WebGPU আপনাকে প্রতিটি WebGPU অবজেক্টের জন্য একটি কাস্টম label প্রদান করার অনুমতি দেয়। এই লেবেলটি ব্রাউজার দ্বারা GPUError বার্তা, কনসোল সতর্কতা এবং ব্রাউজার বিকাশকারী সরঞ্জামগুলিতে ব্যবহার করা হয়।

নাম থেকে সূচী পর্যন্ত

WebGL-এ, অনেক কিছু নাম দ্বারা সংযুক্ত থাকে। উদাহরণস্বরূপ, আপনি GLSL-এ myUniform নামে একটি অভিন্ন পরিবর্তনশীল ঘোষণা করতে পারেন এবং gl.getUniformLocation(program, 'myUniform') ব্যবহার করে এর অবস্থান পেতে পারেন। আপনি যদি ইউনিফর্ম ভেরিয়েবলের নাম ভুল টাইপ করেন তবে আপনি একটি ত্রুটি পেতে এটি কার্যকর হয়।

অন্যদিকে, WebGPU-তে, সবকিছু সম্পূর্ণরূপে বাইট অফসেট বা সূচক দ্বারা সংযুক্ত থাকে (প্রায়ই লোকেশন বলা হয়)। WGSL এবং JavaScript-এ কোডের অবস্থানগুলিকে সিঙ্কে রাখা আপনার দায়িত্ব৷

মিপম্যাপ প্রজন্ম

WebGL-এ, আপনি একটি টেক্সচারের স্তর 0 mip তৈরি করতে পারেন এবং তারপরে কল করতে পারেন gl.generateMipmap() । WebGL তারপর আপনার জন্য অন্য সব মিপ লেভেল তৈরি করবে।

WebGPU-তে, আপনাকে অবশ্যই মিপম্যাপ তৈরি করতে হবে। এটি করার জন্য কোন বিল্ট-ইন ফাংশন নেই। সিদ্ধান্ত সম্পর্কে আরও জানতে বিশেষ আলোচনা দেখুন। আপনি সহজ লাইব্রেরি যেমন webgpu-utils ব্যবহার করতে পারেন মিপম্যাপ তৈরি করতে বা নিজে কীভাবে করবেন তা শিখতে পারেন।

স্টোরেজ বাফার এবং স্টোরেজ টেক্সচার

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

• শেডারের কাছে পাঠানো স্টোরেজ বাফার ডেটা ইউনিফর্ম বাফারের চেয়ে অনেক বড় হতে পারে। যদিও স্পেক বলছে ইউনিফর্ম বাফার বাইন্ডিং এর সাইজ 64KB পর্যন্ত হতে পারে ( maxUniformBufferBindingSize দেখুন), একটি স্টোরেজ বাফার বাইন্ডিং এর সর্বোচ্চ সাইজ WebGPU তে কমপক্ষে 128MB ( maxStorageBufferBindingSize দেখুন)।

• স্টোরেজ বাফারগুলি লেখার যোগ্য, এবং কিছু পারমাণবিক ক্রিয়াকলাপ সমর্থন করে যখন ইউনিফর্ম বাফারগুলি কেবলমাত্র পঠনযোগ্য। এটি অ্যালগরিদমের নতুন ক্লাস বাস্তবায়নের অনুমতি দেয়।

• স্টোরেজ বাফার বাইন্ডিংগুলি আরও নমনীয় অ্যালগরিদমের জন্য রানটাইম-আকারের অ্যারে সমর্থন করে, যখন ইউনিফর্ম বাফার অ্যারে আকারগুলি শেডারে সরবরাহ করতে হবে।

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

বাফার এবং টেক্সচার পরিবর্তন

WebGL-এ, আপনি একটি বাফার বা টেক্সচার তৈরি করতে পারেন এবং তারপরে উদাহরণের জন্য যথাক্রমে gl.bufferData() এবং gl.texImage2D() দিয়ে যে কোনো সময় এর আকার পরিবর্তন করতে পারেন।

WebGPU-তে, বাফার এবং টেক্সচার অপরিবর্তনীয়। এর মানে হল যে আপনি তাদের আকার, ব্যবহার বা বিন্যাস তৈরি করার পরে পরিবর্তন করতে পারবেন না। আপনি শুধুমাত্র তাদের বিষয়বস্তু পরিবর্তন করতে পারেন.

স্পেস কনভেনশন পার্থক্য

WebGL-এ, Z ক্লিপ স্পেস রেঞ্জ হল -1 থেকে 1। WebGPU-তে, Z ক্লিপ স্পেস রেঞ্জ হল 0 থেকে 1। এর মানে হল যে 0 এর az মান সহ বস্তুগুলি ক্যামেরার সবচেয়ে কাছের, যখন 1 এর az মান সহ বস্তুগুলি সবচেয়ে দূরে।

WebGL এবং WebGPU-তে Z ক্লিপ স্পেস রেঞ্জ।

WebGL OpenGL কনভেনশন ব্যবহার করে, যেখানে Y অক্ষ উপরে থাকে এবং Z অক্ষ দর্শকের দিকে থাকে। WebGPU মেটাল কনভেনশন ব্যবহার করে, যেখানে Y অক্ষ নিচে থাকে এবং Z অক্ষ স্ক্রীনের বাইরে থাকে। মনে রাখবেন যে ফ্রেমবাফার কোঅর্ডিনেট, ভিউপোর্ট কোঅর্ডিনেট এবং ফ্র্যাগমেন্ট/পিক্সেল কোঅর্ডিনেটে Y অক্ষের দিক নিচে রয়েছে। ক্লিপ স্পেসে, Y অক্ষের দিক এখনও WebGL-এর মতোই উপরে রয়েছে।

স্বীকৃতি

এই নিবন্ধটি পর্যালোচনা করার জন্য Corentin Wallez, Gregg Tavares, Stephen White, Ken Russell, এবং Rachel Andrew কে ধন্যবাদ।

আমি WebGPU এবং WebGL-এর মধ্যে পার্থক্যগুলি গভীরভাবে দেখার জন্য WebGPUFundamentals.org সুপারিশ করছি৷