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

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

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

ওয়েব ডেভেলপারদের সীমিত বিকল্প আছে HDR সামগ্রী সরবরাহ করার জন্য, প্রাথমিকভাবে <img> এবং <video> উপাদানগুলির উপর নির্ভর করে। <canvas> উপাদান, তবে, এসডিআর-এ সীমাবদ্ধ থাকে। একটি ক্যানভাসের মধ্যে গতিশীল এইচডিআর সামগ্রী তৈরি করার জন্য এটি প্রদর্শন করার আগে এটির বিষয়বস্তুগুলিকে একটি 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" },
});

কণা (HDR) নমুনা এবং WebGPU HDR উদাহরণ পরীক্ষা করে WebGPU এর সাথে HDR অন্বেষণ করুন এবং ক্রোমেস্ট্যাটাস এন্ট্রি দেখুন।

একটি HDR স্ক্রীন সহ একটি ল্যাপটপ একটি প্রাণবন্ত চিত্র প্রদর্শন করে৷
একটি 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 সত্য হলে সত্য প্রদান করে।
  • subgroupAny(value) : সাবগ্রুপের যেকোন সক্রিয় আহ্বানের জন্য value সত্য হলে সত্য প্রদান করে।

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

ভোরের আপডেট

wgpu::PrimitiveState struct এখন সরাসরি গভীরতা ক্লিপ নিয়ন্ত্রণ সেটিং অন্তর্ভুক্ত করে, একটি পৃথক wgpu::PrimitiveDepthClipControl স্ট্রাকটের প্রয়োজনীয়তা দূর করে। আরও জানতে, নিম্নলিখিত কোড স্নিপেট এবং webgpu-হেডার PR দেখুন। 

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

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

এটি শুধুমাত্র কিছু মূল হাইলাইট কভার করে। কমিটের সম্পূর্ণ তালিকা দেখুন।

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

ওয়েবজিপিইউ সিরিজে নতুন কী কভার করা হয়েছে তার একটি তালিকা।

ক্রোম 130

ক্রোম 129

ক্রোম 128

ক্রোম 127

ক্রোম 126

ক্রোম 125

ক্রোম 124

ক্রোম 123

ক্রোম 122

ক্রোম 121

ক্রোম 120

ক্রোম 119

ক্রোম 118

ক্রোম 117

ক্রোম 116

ক্রোম 115

ক্রোম 114

ক্রোম 113