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

François Beaufort
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) sample ও WebGPU HDR example দেখে এবং chromestatus entry পড়ে WebGPU-এর মাধ্যমে HDR এক্সপ্লোর করুন।

HDR স্ক্রিন সহ ল্যাপটপে প্রাণবন্ত ছবি দেখানো হচ্ছে।
HDR স্ক্রিনে Particles (HDR) স্যাম্পেল দেখানো হয়েছে।

সাবগ্রুপের জন্য আরও সহায়তা

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

মনে রাখবেন, ফ্র্যাগমেন্ট শেডারগুলিতে subgroup_size বিল্ট-ইন ভ্যালু বর্তমানে বাগি। এখনকার মতো এটি এড়িয়ে যান।

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

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

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

  • subgroupMin(value): সাবগ্রুপ জুড়ে সব অ্যাক্টিভ ইনভোকেশন value-এর ন্যূনতম ভ্যালু রিটার্ন করে।
  • subgroupMax(value): সাবগ্রুপ জুড়ে সব অ্যাক্টিভ ইনভোকেশন values-এর সর্বাধিক ভ্যালু রিটার্ন করে।

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

  • subgroupElect(): এই ইনভোকেশনের subgroup_invocation_id সাবগ্রুপের অ্যাক্টিভ ইনভোকেশনের মধ্যে সবচেয়ে কম হলে, 'সত্য' রিটার্ন করে।
  • 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): id-এর সমান আইডি সহ কোয়াড ইনভোকেশন থেকে value ব্রডকাস্ট। id অবশ্যই একটি কনস্ট্যান্ট-এক্সপ্রেশন হতে হবে।
  • quadSwapX(value): X দিকে কোয়াডের মধ্যে ইনভোকেশনগুলির মধ্যে value অদলবদল।
  • quadSwapY(value): Y দিকে কোয়াডের মধ্যে ইনভোকেশনগুলির মধ্যে value অদলবদল করে।
  • quadSwapDiagonal(value): কোয়াডের মধ্যে ইনভোকেশনগুলির মধ্যে value অদল-বদল করে।

ভোরের আপডেট

wgpu::PrimitiveState struct-এ এখন সরাসরি ডেপথ ক্লিপ কন্ট্রোল সেটিং অন্তর্ভুক্ত করা হয়েছে, এর ফলে আলাদা 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-তে নতুন কী কী আছে

WebGPU-তে নতুন কী কী আছে সিরিজে যা যা কভার করা হয়েছে তার একটি তালিকা।

Chrome 155-156

Chrome 153-154

Chrome 151-152

Chrome 149-150

Chrome 147-148

Chrome 146

Chrome 145

Chrome 144

Chrome 143

Chrome 142

Chrome 141

Chrome 140

Chrome 139

Chrome 138

Chrome 137

Chrome 136

Chrome 135

Chrome 134

Chrome 133

Chrome 132

Chrome 131

Chrome 130

Chrome 129

Chrome 128

Chrome 127

Chrome 126

Chrome 125

Chrome 124

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Chrome 113