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) : subgroup জুড়ে সমস্ত সক্রিয় আমন্ত্রণ value s এর যোগফল প্রদান করে।
  • subgroupExclusiveAdd(value) : সাবগ্রুপ জুড়ে সমস্ত সক্রিয় ইনভোকেশন value একচেটিয়া স্ক্যান সমষ্টি প্রদান করে।
  • subgroupMul(value) : subgroup জুড়ে সমস্ত সক্রিয় আমন্ত্রণ value গুণন প্রদান করে।
  • subgroupExclusiveMul(value) : সাবগ্রুপ জুড়ে সমস্ত সক্রিয় ইনভোকেশন value s এর এক্সক্লুসিভ স্ক্যান গুণন প্রদান করে।

  • subgroupAnd(value) : s উপগোষ্ঠী জুড়ে সমস্ত সক্রিয় আমন্ত্রণের value বাইনারি AND প্রদান করে।
  • subgroupOr(value) : সাবগ্রুপ জুড়ে সমস্ত সক্রিয় আমন্ত্রণ value s এর বাইনারি OR প্রদান করে।
  • subgroupXor(value) : সাবগ্রুপ জুড়ে সমস্ত সক্রিয় ইনভোকেশন value s এর বাইনারি XOR প্রদান করে।

  • subgroupMin(value) : subgroup জুড়ে সমস্ত সক্রিয় আমন্ত্রণ value ন্যূনতম মান প্রদান করে।
  • subgroupMax(value) : সাবগ্রুপ জুড়ে সমস্ত সক্রিয় আমন্ত্রণ value s এর সর্বাধিক মান প্রদান করে।

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

  • subgroupElect() : যদি এই আমন্ত্রণটি সাবগ্রুপের সক্রিয় আমন্ত্রণগুলির মধ্যে সর্বনিম্ন subgroup_invocation_id থাকে, তাহলে true ফেরত পাঠায়।
  • subgroupBroadcastFirst(value) : সাবগ্রুপের সর্বনিম্ন subgroup_invocation_id সহ সক্রিয় আমন্ত্রণ থেকে অন্যান্য সমস্ত সক্রিয় আমন্ত্রণে value সম্প্রচার করে।

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

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

ভোরের আপডেট

wgpu::PrimitiveState struct এখন সরাসরি depth clip নিয়ন্ত্রণ সেটিং অন্তর্ভুক্ত করে, যার ফলে আলাদা wgpu::PrimitiveDepthClipControl struct এর প্রয়োজন নেই। আরও জানতে, নিম্নলিখিত কোড স্নিপেট এবং 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" সিরিজে যা যা আলোচনা করা হয়েছে তার একটি তালিকা।

ক্রোম ১৪২

ক্রোম ১৪১

ক্রোম ১৪০

ক্রোম ১৩৯

ক্রোম ১৩৮

ক্রোম ১৩৭

ক্রোম ১৩৬

ক্রোম ১৩৫

ক্রোম ১৩৪

ক্রোম ১৩৩

ক্রোম ১৩২

ক্রোম ১৩১

ক্রোম ১৩০

ক্রোম ১২৯

ক্রোম ১২৮

ক্রোম ১২৭

ক্রোম ১২৬

ক্রোম ১২৫

ক্রোম ১২৪

ক্রোম ১২৩

ক্রোম ১২২

ক্রোম ১২১

ক্রোম ১২০

ক্রোম ১১৯

ক্রোম ১১৮

ক্রোম ১১৭

ক্রোম ১১৬

ক্রোম ১১৫

ক্রোম ১১৪

ক্রোম ১১৩