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

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

অ্যান্ড্রয়েডে ওয়েবজিপিইউ সমর্থন করুন

ক্রোম টিম আনন্দের সাথে জানাচ্ছে যে, কোয়ালকম এবং এআরএম জিপিইউ দ্বারা চালিত অ্যান্ড্রয়েড ১২ ও তার পরবর্তী সংস্করণের ডিভাইসগুলিতে ক্রোম ১২১-এ এখন থেকে ওয়েবজিপিইউ ডিফল্টরূপে সক্রিয় থাকবে।

অদূর ভবিষ্যতে অ্যান্ড্রয়েড ১১ চালিত ডিভাইস সহ আরও বিস্তৃত পরিসরের অ্যান্ড্রয়েড ডিভাইসে এর সমর্থন ধীরে ধীরে প্রসারিত হবে। বিভিন্ন হার্ডওয়্যার কনফিগারেশনে একটি নির্বিঘ্ন অভিজ্ঞতা নিশ্চিত করার জন্য এই সম্প্রসারণটি আরও পরীক্ষা এবং অপ্টিমাইজেশনের উপর নির্ভরশীল হবে। ইস্যু chromium:1497815 দেখুন।

অ্যান্ড্রয়েডের জন্য ক্রোম ব্রাউজারে চলমান ওয়েবজিপিইউ স্যাম্পলের স্ক্রিনশট।
অ্যান্ড্রয়েডের জন্য ক্রোমে চলমান ওয়েবজিপিইউ নমুনা।

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

SM6+ গ্রাফিক্স হার্ডওয়্যারযুক্ত উইন্ডোজ D3D12 মেশিনে শেডার কম্পাইল করার জন্য ক্রোম এখন DXC (ডাইরেক্টএক্স কম্পাইলার)-এর শক্তি ব্যবহার করে। পূর্বে, উইন্ডোজে শেডার কম্পাইলেশনের জন্য WebGPU FXC (এফএক্স কম্পাইলার)-এর উপর নির্ভর করত। কার্যকরী হলেও, FXC-তে DXC-তে থাকা ফিচার সেট এবং পারফরম্যান্স অপটিমাইজেশনের অভাব ছিল।

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

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

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

যখন কোনো 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://flags/#enable-webgpu-developer-features লিঙ্কে থাকা "WebGPU Developer Features" ফ্ল্যাগটি সক্রিয় করে আপনি টাইমস্ট্যাম্প কোয়ান্টাইজেশন নিষ্ক্রিয় করতে পারেন। আরও জানতে টাইমস্ট্যাম্প কোয়েরি কোয়ান্টাইজেশন দেখুন।

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

টাইমস্ট্যাম্প কোয়েরি সম্বলিত Compute Boyds স্যাম্পলের স্ক্রিনশট।
টাইমস্ট্যাম্প কোয়েরি সমন্বিত Compute Boyds স্যাম্পল।

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

ডেভেলপার অভিজ্ঞতা উন্নত করার জন্য, এখন থেকে কম্পিউট বা রেন্ডার পাইপলাইন তৈরি করার সময় আপনি আপনার শেডার মডিউলের entryPoint বাদ দিতে পারেন। শেডার কোডে যদি শেডার স্টেজের জন্য কোনো স্বতন্ত্র এন্ট্রি পয়েন্ট খুঁজে না পাওয়া যায়, তাহলে একটি GPUValidationError দেখা দেবে। নিম্নলিখিত উদাহরণ এবং 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 Developer Features" ফ্ল্যাগটি সক্রিয় করা থাকবে। নিম্নলিখিত উদাহরণ এবং 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);

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

ক্রোম টিম ডন-এর জন্য একটি অফিশিয়াল গিটহাব রিপোজিটরি তৈরি করেছে।

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

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

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

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

ক্রোম ১৪৬

ক্রোম ১৪৫

ক্রোম ১৪৪

ক্রোম ১৪৩

ক্রোম ১৪২

ক্রোম ১৪১

ক্রোম ১৪০

ক্রোম ১৩৯

ক্রোম ১৩৮

ক্রোম ১৩৭

ক্রোম ১৩৬

ক্রোম ১৩৫

ক্রোম ১৩৪

ক্রোম ১৩৩

ক্রোম ১৩২

ক্রোম ১৩১

ক্রোম ১৩০

ক্রোম ১২৯

ক্রোম ১২৮

ক্রোম ১২৭

ক্রোম ১২৬

ক্রোম ১২৫

ক্রোম ১২৪

ক্রোম ১২৩

ক্রোম ১২২

ক্রোম ১২১

ক্রোম ১২০

ক্রোম ১১৯

ক্রোম ১১৮

ক্রোম ১১৭

ক্রোম ১১৬

ক্রোম ১১৫

ক্রোম ১১৪

ক্রোম ১১৩