WebGPU তে নতুন কি আছে (Chrome 129)

ফ্রাঁসোয়া বোফোর্ট
François Beaufort
GitHub

ক্যানভাস টোন ম্যাপিং মোডের সাথে HDR সমর্থন

HDR কন্টেন্ট প্রদর্শনের জন্য ওয়েব ডেভেলপারদের কাছে সীমিত বিকল্প রয়েছে, যা মূলত <img> এবং <video> এলিমেন্টের উপর নির্ভরশীল। তবে, <canvas> এলিমেন্টটি SDR-এর মধ্যেই সীমাবদ্ধ থাকে। একটি ক্যানভাসের মধ্যে ডাইনামিক HDR কন্টেন্ট তৈরি করতে হলে, তা প্রদর্শনের আগে ক্যানভাসের বিষয়বস্তুকে একটি HDR ইমেজ হিসেবে এনকোড করতে হয় (উদাহরণস্বরূপ এই ডেমোটি দেখুন)।

WebGPU ক্যানভাস কনফিগারেশনের নতুন GPUCanvasToneMappingMode প্যারামিটারটি এখন WebGPU-কে সাদার ( #FFFFFF ) চেয়ে উজ্জ্বল রং আঁকতে দেয়। এটি নিম্নলিখিত মোডগুলির মাধ্যমে তা করে থাকে:

  • "standard" : ডিফল্ট আচরণ স্ক্রিনের SDR রেঞ্জের মধ্যে কন্টেন্টকে সীমাবদ্ধ রাখে। এই মোডটি স্ক্রিনের কালার স্পেসের সমস্ত রঙের মানকে [0, 1] ব্যবধিতে ক্ল্যাম্প করার মাধ্যমে সম্পন্ন করা হয়।

  • "extended" : স্ক্রিনের সম্পূর্ণ HDR রেঞ্জ আনলক করে। এই মোডটি স্ক্রিনের [0, 1] রেঞ্জে "standard" মোডের অনুরূপ। ক্ল্যাম্পিং বা প্রজেকশন স্ক্রিনের এক্সটেন্ডেড ডাইনামিক রেঞ্জে করা হয়, কিন্তু [0, 1] রেঞ্জে নয়।

নিম্নলিখিত কোড স্নিপেটটি আপনাকে হাই ডাইনামিক রেঞ্জের জন্য একটি ক্যানভাস কনফিগার করার পদ্ধতি দেখাবে।

const adapter = await navigator.gpu.requestAdapter();
const device = await adapter.requestDevice();

const canvas = document.querySelector("canvas");
const context = canvas.getContext("webgpu");

context.configure({
  device,
  format: "rgba16float",
  toneMapping: { mode: "extended" },
});

Particles (HDR) স্যাম্পল এবং WebGPU HDR উদাহরণটি দেখে WebGPU-এর সাহায্যে HDR সম্পর্কে জানুন, এবং chromestatus এন্ট্রিটি দেখুন।

এইচডিআর স্ক্রিনযুক্ত একটি ল্যাপটপ, যা প্রাণবন্ত ছবি প্রদর্শন করে।
HDR স্ক্রিনে পার্টিকলস (HDR) নমুনাটি প্রদর্শিত হয়েছে।

সম্প্রসারিত উপগোষ্ঠী সমর্থন

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

উল্লেখ্য যে, ফ্র্যাগমেন্ট শেডারগুলিতে subgroup_size বিল্ট-ইন ভ্যালুটি বর্তমানে ত্রুটিপূর্ণ । আপাতত এটি ব্যবহার করা থেকে বিরত থাকুন।

এছাড়াও, নিম্নলিখিত সাবগ্রুপ বিল্ট-ইন ফাংশনগুলো যোগ করা হয়েছে:

  • subgroupAdd(value) : সাবগ্রুপ জুড়ে থাকা সমস্ত সক্রিয় value ইনভোকেশনের যোগফল ফেরত দেয়।
  • subgroupExclusiveAdd(value) : সাবগ্রুপ জুড়ে সমস্ত সক্রিয় value ইনভোকেশনের এক্সক্লুসিভ স্ক্যান সামেশন রিটার্ন করে।
  • subgroupMul(value) : সাবগ্রুপ জুড়ে থাকা সমস্ত সক্রিয় value এর গুণফল ফেরত দেয়।
  • subgroupExclusiveMul(value) : সাবগ্রুপ জুড়ে সমস্ত সক্রিয় ইনভোকেশনের value গুলির এক্সক্লুসিভ স্ক্যান গুণফল ফেরত দেয়।

  • subgroupAnd(value) : সাবগ্রুপ জুড়ে থাকা সমস্ত সক্রিয় value ইনভোকেশনের বাইনারি AND ফলাফল ফেরত দেয়।
  • subgroupOr(value) : সাবগ্রুপ জুড়ে থাকা সমস্ত সক্রিয় value এর বাইনারি OR রিটার্ন করে।
  • subgroupXor(value) : সাবগ্রুপ জুড়ে থাকা সমস্ত সক্রিয় ইনভোকেশনের value গুলোর বাইনারি XOR ফলাফল ফেরত দেয়।

  • subgroupMin(value) : সাবগ্রুপ জুড়ে সমস্ত সক্রিয় value ইনভোকেশনের সর্বনিম্ন মান রিটার্ন করে।
  • subgroupMax(value) : সাবগ্রুপ জুড়ে সমস্ত সক্রিয় value সর্বোচ্চ মান ফেরত দেয়।

  • subgroupAll(value) : সাবগ্রুপের সমস্ত সক্রিয় ইনভোকেশনের জন্য value সত্য হলে true রিটার্ন করে।
  • subgroupAny(value) : সাবগ্রুপের যেকোনো সক্রিয় আহ্বানের জন্য value true হলে, এটি true রিটার্ন করে।

  • subgroupElect() : সাবগ্রুপের সক্রিয় ইনভোকেশনগুলোর মধ্যে এই ইনভোকেশনটির subgroup_invocation_id সর্বনিম্ন হলে true রিটার্ন করে।
  • subgroupBroadcastFirst(value) : সাবগ্রুপের মধ্যে সর্বনিম্ন subgroup_invocation_id যুক্ত সক্রিয় ইনভোকেশন থেকে প্রাপ্ত value অন্য সকল সক্রিয় ইনভোকেশনে সম্প্রচার করে।

  • subgroupShuffle(value, id) : সক্রিয় আহ্বান থেকে value ফেরত দেয়, যার subgroup_invocation_id id সাথে মেলে।
  • subgroupShuffleXor(value, mask) : সক্রিয় ইনভোকেশন থেকে value রিটার্ন করে, যার subgroup_invocation_id subgroup_invocation_id ^ mask সাথে মেলে। mask অবশ্যই ডাইনামিকভাবে ইউনিফর্ম হতে হবে।
  • subgroupShuffleUp(value, delta) : সেই সক্রিয় ইনভোকেশন থেকে value ফেরত দেয় যার subgroup_invocation_id subgroup_invocation_id - delta সাথে মেলে।
  • subgroupShuffleDown(value, delta) : সক্রিয় ইনভোকেশন থেকে value ফেরত দেয়, যার subgroup_invocation_id subgroup_invocation_id + delta সাথে মেলে।

  • quadBroadcast(value, id) : যে quad আহ্বানের id-এর value id , সেখান থেকে value-কে সম্প্রচার করে। id অবশ্যই একটি ধ্রুবক-এক্সপ্রেশন হতে হবে।
  • quadSwapX(value) : কোয়াডের মধ্যে X দিকে value অদলবদল করে।
  • quadSwapY(value) : কোয়াডের মধ্যে Y দিকে value অদলবদল করে।
  • quadSwapDiagonal(value) : কোয়াডের মধ্যে তির্যকভাবে value অদলবদল করে।

ভোরের আপডেট

wgpu::PrimitiveState স্ট্রাকচারটিতে এখন সরাসরি ডেপথ ক্লিপ কন্ট্রোল সেটিং অন্তর্ভুক্ত করা হয়েছে, ফলে আলাদা wgpu::PrimitiveDepthClipControl স্ট্রাকচারের প্রয়োজন নেই। আরও জানতে, নিম্নলিখিত কোড স্নিপেট এবং webgpu-headers PR-টি দেখুন।

// Before
wgpu::PrimitiveState primitive = {};
wgpu::PrimitiveDepthClipControl depthClipControl;
depthClipControl.unclippedDepth = true;
primitive.nextInChain = &depthClipControl;

// Now
wgpu::PrimitiveState primitive = {};
primitive.unclippedDepth = true;

এখানে কেবল কয়েকটি মূল বিষয় তুলে ধরা হয়েছে। কমিটগুলোর বিস্তারিত তালিকাটি দেখুন।

WebGPU-তে নতুন কী আছে

'What's New in WebGPU' সিরিজে যা যা আলোচনা করা হয়েছে, তার একটি তালিকা।

ক্রোম ১৪৭-১৪৮

ক্রোম ১৪৬

ক্রোম ১৪৫

ক্রোম ১৪৪

ক্রোম ১৪৩

ক্রোম ১৪২

ক্রোম ১৪১

ক্রোম ১৪০

ক্রোম ১৩৯

ক্রোম ১৩৮

ক্রোম ১৩৭

ক্রোম ১৩৬

ক্রোম ১৩৫

ক্রোম ১৩৪

ক্রোম ১৩৩

ক্রোম ১৩২

ক্রোম ১৩১

ক্রোম ১৩০

ক্রোম ১২৯

ক্রোম ১২৮

ক্রোম ১২৭

ক্রোম ১২৬

ক্রোম ১২৫

ক্রোম ১২৪

ক্রোম ১২৩

ক্রোম ১২২

ক্রোম ১২১

ক্রোম ১২০

ক্রোম ১১৯

ক্রোম ১১৮

ক্রোম ১১৭

ক্রোম ১১৬

ক্রোম ১১৫

ক্রোম ১১৪

ক্রোম ১১৩