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

François Beaufort
François Beaufort
GitHub

Android-এ WebGPU কাজ করে

Chrome টিম এটি ঘোষণা করতে পেরে আনন্দিত যে Android 12 ও এর পরের যেকোনও ভার্সনে চলে এমন ডিভাইসে Chrome 121-এ WebGPU এখন ডিফল্ট হিসেবে চালু করা আছে। এগুলি Qualcomm ও ARM GPU দ্বারা পরিচালিত হয়।

Android 11-এ চলে এমন ডিভাইস সহ আরও বেশি Android ডিভাইসে ধীরে ধীরে কাজ করবে। আরও বেশি হার্ডওয়্যার কনফিগারেশন জুড়ে বাধাহীন অভিজ্ঞতা নিশ্চিত করতে, এই সম্প্রসারণ আরও পরীক্ষা ও অপ্টিমাইজেশনের উপর নির্ভর করবে। issue chromium:1497815 দেখুন।

Android-এর জন্য Chrome-এ WebGPU স্যাম্পেল চলার স্ক্রিনশট।
Android-এর জন্য Chrome-এ WebGPU স্যাম্পেল চলছে।

Windows-এ শেডার কম্পাইলেশনের জন্য FXC-এর পরিবর্তে DXC ব্যবহার করা

SM6+ গ্রাফিক্স হার্ডওয়্যার সহ Windows D3D12 মেশিনে শেডার কম্পাইল করতে Chrome এখন DXC (DirectX Compiler)-এর ক্ষমতা ব্যবহার করে। আগে, Windows-এ শেডার কম্পাইলেশনের জন্য WebGPU, FXC (FX Compiler)-এর উপর নির্ভর করত। FXC কাজ করলেও, DXC-তে থাকা ফিচার সেট ও পারফর্ম্যান্স অপ্টিমাইজেশন এতে ছিল না।

প্রাথমিক পরীক্ষা থেকে দেখা গেছে যে FXC-এর তুলনায় DXC ব্যবহার করলে কম্পিউট শেডার কম্পাইলেশন স্পিডে গড়ে ২০% বৃদ্ধি হয়।

কম্পিউট ও রেন্ডার পাসে টাইমস্ট্যাম্প কোয়েরি

টাইমস্ট্যাম্প কোয়েরি, WebGPU অ্যাপ্লিকেশনকে সঠিকভাবে (ন্যানোসেকেন্ড পর্যন্ত) পরিমাপ করতে দেয় যে তাদের GPU কমান্ডগুলি কম্পিউট ও রেন্ডার পাস এক্সিকিউট করতে কত সময় নেয়। GPU ওয়ার্কলোডের পারফর্ম্যান্স ও আচরণ সম্পর্কে ইনসাইট পেতে এগুলি ব্যাপকভাবে ব্যবহার করা হয়।

GPUAdapter-এ "timestamp-query" ফিচার উপলভ্য হলে, আপনি এখন নিম্নলিখিত কাজগুলি করতে পারবেন:

  • "timestamp-query" ফিচার সহ GPUDevice-এর জন্য অনুরোধ করুন।
  • "timestamp" ধরনের GPUQuerySet তৈরি করো।
  • GPUQuerySet-এ টাইমস্ট্যাম্প ভ্যালু কোথায় লিখতে হবে তা নির্ধারণ করতে GPUComputePassDescriptor.timestampWrites ও GPURenderPassDescriptor.timestampWrites ব্যবহার করুন।
  • resolveQuerySet() সহ GPUBuffer-এ টাইমস্ট্যাম্প ভ্যালু সমাধান করুন।
  • GPUBuffer থেকে CPU-তে ফলাফল কপি করে টাইমস্ট্যাম্প ভ্যালু আবার পড়ুন।
  • টাইমস্ট্যাম্প ভ্যালুকে BigInt64Array হিসেবে ডিকোড করো।

নিচের উদাহরণ ও সমস্যা dawn:1800 দেখুন।

const adapter = await navigator.gpu.requestAdapter();
if (!adapter.features.has("timestamp-query")) {
  throw new Error("Timestamp query feature is not available");
}
// Explicitly request timestamp query feature.
const device = await adapter.requestDevice({
  requiredFeatures: ["timestamp-query"],
});
const commandEncoder = device.createCommandEncoder();

// Create a GPUQuerySet which holds 2 timestamp query results: one for the
// beginning and one for the end of compute pass execution.
const querySet = device.createQuerySet({ type: "timestamp", count: 2 });
const timestampWrites = {
  querySet,
  beginningOfPassWriteIndex: 0, // Write timestamp in index 0 when pass begins.
  endOfPassWriteIndex: 1, // Write timestamp in index 1 when pass ends.
};
const passEncoder = commandEncoder.beginComputePass({ timestampWrites });
// TODO: Set pipeline, bind group, and dispatch work to be performed.
passEncoder.end();

// Resolve timestamps in nanoseconds as a 64-bit unsigned integer into a GPUBuffer.
const size = 2 * BigInt64Array.BYTES_PER_ELEMENT;
const resolveBuffer = device.createBuffer({
  size,
  usage: GPUBufferUsage.QUERY_RESOLVE | GPUBufferUsage.COPY_SRC,
});
commandEncoder.resolveQuerySet(querySet, 0, 2, resolveBuffer, 0);

// Read GPUBuffer memory.
const resultBuffer = device.createBuffer({
  size,
  usage: GPUBufferUsage.COPY_DST | GPUBufferUsage.MAP_READ,
});
commandEncoder.copyBufferToBuffer(resolveBuffer, 0, resultBuffer, 0, size);

// Submit commands to the GPU.
device.queue.submit([commandEncoder.finish()]);

// Log compute pass duration in nanoseconds.
await resultBuffer.mapAsync(GPUMapMode.READ);
const times = new BigInt64Array(resultBuffer.getMappedRange());
console.log(`Compute pass duration: ${Number(times[1] - times[0])}ns`);
resultBuffer.unmap();

টাইমিং অ্যাটাক সংক্রান্ত উদ্বেগের কারণে, টাইমস্ট্যাম্প কোয়েরি ১০০ মাইক্রোসেকেন্ডের রেজোলিউশন সহ কোয়ান্টাইজ করা হয়, যা নির্ভুলতা এবং নিরাপত্তার মধ্যে একটি ভাল সমঝোতা প্রদান করে। Chrome ব্রাউজারে, আপনার অ্যাপ ডেভেলপ করার সময় chrome://flags/#enable-webgpu-developer-features-এ "WebGPU ডেভেলপার ফিচার" ফ্ল্যাগ চালু করে টাইমস্ট্যাম্প কোয়ান্টাইজেশন বন্ধ করতে পারবেন। আরও জানতে টাইমস্ট্যাম্প কোয়েরি কোয়ান্টাইজেশন দেখুন।

GPU মাঝে মাঝে টাইমস্ট্যাম্প কাউন্টার রিসেট করতে পারে, এর ফলে টাইমস্ট্যাম্পের মধ্যে নেগেটিভ ডেল্টার মতো অপ্রত্যাশিত ভ্যালু তৈরি হতে পারে, তাই আমি সাজেস্ট করি যে আপনি নিম্নলিখিত Compute Boids স্যাম্পেলে টাইমস্ট্যাম্প কোয়েরি সাপোর্ট যোগ করে এমন git diff পরিবর্তন চেক করে দেখুন।

টাইমস্ট্যাম্প কোয়েরি সহ Compute Boids স্যাম্পেলের স্ক্রিনশট।
টাইমস্ট্যাম্প কোয়েরি সহ Compute Boids স্যাম্পেল।

শেডার মডিউলে ডিফল্ট এন্ট্রি পয়েন্ট

ডেভেলপার অভিজ্ঞতা উন্নত করতে, আপনি এখন কম্পিউট বা রেন্ডার পাইপলাইন তৈরি করার সময় আপনার শেডার মডিউলের entryPoint বাদ দিতে পারবেন। শেডার কোডে শেডার স্টেজের জন্য কোনও অনন্য এন্ট্রি পয়েন্ট খুঁজে না পাওয়া গেলে, GPUValidationError ট্রিগার করা হবে। নিম্নলিখিত উদাহরণ ও issue dawn:2254 দেখুন।

const code = `
    @vertex fn vertexMain(@builtin(vertex_index) i : u32) ->
      @builtin(position) vec4f {
       const pos = array(vec2f(0, 1), vec2f(-1, -1), vec2f(1, -1));
       return vec4f(pos[i], 0, 1);
    }
    @fragment fn fragmentMain() -> @location(0) vec4f {
      return vec4f(1, 0, 0, 1);
    }`;
const module = myDevice.createShaderModule({ code });
const format = navigator.gpu.getPreferredCanvasFormat();
const pipeline = await myDevice.createRenderPipelineAsync({
  layout: "auto",
  vertex: { module, entryPoint: "vertexMain" },
  fragment: { module, entryPoint: "fragmentMain", targets: [{ format }] },
  vertex: { module },
  fragment: { module, targets: [{ format }] },
});

GPUExternalTexture কালার স্পেস হিসেবে display-p3 কাজ করে

আপনি এখন importExternalTexture() সহ HDR ভিডিও থেকে GPUExternalTexture ইমপোর্ট করার সময় "display-p3" ডেস্টিনেশন কালার স্পেস সেট করতে পারবেন। WebGPU কীভাবে কালার স্পেস ম্যানেজ করে তা চেক করে দেখুন। নিচের উদাহরণ ও সমস্যা chromium:1330250 দেখুন।

// Create texture from HDR video.
const video = document.querySelector("video");
const texture = myDevice.importExternalTexture({
  source: video,
  colorSpace: "display-p3",
});

মেমরি হিপ সংক্রান্ত তথ্য

আপনার অ্যাপ ডেভেলপ করার সময় প্রচুর পরিমাণে মেমরি অ্যালোকেট করার ক্ষেত্রে মেমরি সংক্রান্ত সীমাবদ্ধতা সম্পর্কে আগে থেকে ধারণা পেতে সাহায্য করতে, requestAdapterInfo() এখন memoryHeaps অ্যাডাপ্টরে উপলভ্য মেমরি হিপের সাইজ ও ধরনের মতো তথ্য দেখায়। এই পরীক্ষামূলক ফিচারটি শুধুমাত্র তখনই অ্যাক্সেস করা যাবে যখন chrome://flags/#enable-webgpu-developer-features-এ "WebGPU ডেভেলপার ফিচার" ফ্ল্যাগ চালু করা থাকবে। নিম্নলিখিত উদাহরণ ও issue dawn:2249 দেখুন।

const adapter = await navigator.gpu.requestAdapter();
const adapterInfo = await adapter.requestAdapterInfo();

for (const { size, properties } of adapterInfo.memoryHeaps) {
  console.log(size); // memory heap size in bytes
  if (properties & GPUHeapProperty.DEVICE_LOCAL)  { /* ... */ }
  if (properties & GPUHeapProperty.HOST_VISIBLE)  { /* ... */ }
  if (properties & GPUHeapProperty.HOST_COHERENT) { /* ... */ }
  if (properties & GPUHeapProperty.HOST_UNCACHED) { /* ... */ }
  if (properties & GPUHeapProperty.HOST_CACHED)   { /* ... */ }
}
https://webgpureport.org-এর স্ক্রিনশট যাতে অ্যাডাপ্টরের তথ্যে মেমরি হিপ দেখানো হয়েছে।
https://webgpureport.org-এ অ্যাডাপ্টার সংক্রান্ত তথ্য মেমরি হিপ দেখানো হয়েছে।

ভোরের আপডেট

WGSL ভাষার ফিচার ম্যানেজ করার জন্য wgpu::Instance-এ HasWGSLLanguageFeature ও EnumerateWGSLLanguageFeatures পদ্ধতি যোগ করা হয়েছে। সমস্যা dawn:2260 দেখুন।

নন-স্ট্যান্ডার্ড wgpu::Feature::BufferMapExtendedUsages ফিচার আপনাকে wgpu::BufferUsage::MapRead বা wgpu::BufferUsage::MapWrite এবং অন্য যেকোনও wgpu::BufferUsage সহ GPU বাফার তৈরি করতে দেয়। নিম্নলিখিত উদাহরণ ও সমস্যা dawn:2204 দেখুন।

wgpu::BufferDescriptor descriptor = {
  .size = 128,
  .usage = wgpu::BufferUsage::MapWrite | wgpu::BufferUsage::Uniform
};
wgpu::Buffer uniformBuffer = device.CreateBuffer(&descriptor);

uniformBuffer.MapAsync(wgpu::MapMode::Write, 0, 128,
   [](WGPUBufferMapAsyncStatus status, void* userdata)
   {
      wgpu::Buffer* buffer = static_cast<wgpu::Buffer*>(userdata);
      memcpy(buffer->GetMappedRange(), data, sizeof(data));
   },
   &uniformBuffer);

নিম্নলিখিত ফিচারগুলি ডকুমেন্ট করা হয়েছে: ANGLE টেক্সচার শেয়ারিং, D3D11 মাল্টিথ্রেড সুরক্ষিত, ইমপ্লিসিট ডিভাইস সিঙ্ক্রোনাইজেশন, Norm16 টেক্সচার ফর্ম্যাট, পাসের মধ্যে টাইমস্ট্যাম্প কোয়েরি, পিক্সেল লোকাল স্টোরেজ, শেডার ফিচার এবং মাল্টি প্ল্যানার ফর্ম্যাট।

Chrome টিম Dawn-এর জন্য অফিসিয়াল GitHub রিপোজিটরি তৈরি করেছে।

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

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