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

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

অ্যান্ড্রয়েডে WebGPU সমর্থন করুন

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

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

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

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

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

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

গণনা এবং রেন্ডার পাসে টাইমস্ট্যাম্প প্রশ্ন

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

যখন একটি GPUAdapter এ "timestamp-query" বৈশিষ্ট্যটি উপলব্ধ থাকে, তখন আপনি এখন নিম্নলিখিত জিনিসগুলি করতে পারেন:

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

নিম্নলিখিত উদাহরণ দেখুন এবং ইস্যুর ভোর: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();

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

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

টাইমস্ট্যাম্প ক্যোয়ারী সমন্বিত Compute Boids নমুনার স্ক্রিনশট।
টাইমস্ট্যাম্প ক্যোয়ারী সমন্বিত Boids নমুনা গণনা।

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

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

importExternalTexture() সহ HDR ভিডিও থেকে GPUExternalTexture আমদানি করার সময় আপনি এখন "display-p3" গন্তব্য রঙের স্থান সেট করতে পারেন৷ ওয়েবজিপিইউ কীভাবে রঙের স্থানগুলি পরিচালনা করে তা দেখুন। নিম্নলিখিত উদাহরণ দেখুন এবং ক্রোমিয়াম ইস্যু করুন: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 বিকাশকারী বৈশিষ্ট্যগুলি" পতাকা সক্রিয় থাকে৷ নিচের উদাহরণটি দেখুন এবং ভোরের সংখ্যাটি দেখুন: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 পদ্ধতিগুলি যুক্ত করা হয়েছে। দেখুন ভোরের সংখ্যা: 2260 ।

অ-মানক wgpu::Feature::BufferMapExtendedUsages বৈশিষ্ট্যটি আপনাকে wgpu::BufferUsage::MapRead বা wgpu::BufferUsage::MapWrite এবং অন্য যেকোনো wgpu::BufferUsage সহ একটি GPU বাফার তৈরি করতে দেয়। নিচের উদাহরণটি দেখুন এবং ভোরের সংখ্যাটি দেখুন: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 টেক্সচার ফরম্যাট , টাইমস্ট্যাম্প কোয়েরি ইনসাইড পাস , পিক্সেল লোকাল স্টোরেজ , শেডার বৈশিষ্ট্য এবং মাল্টি প্ল্যানার ফর্ম্যাট ।

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

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

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

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

ক্রোম 125

ক্রোম 124

ক্রোম 123

ক্রোম 122

ক্রোম 121

ক্রোম 120

ক্রোম 119

ক্রোম 118

ক্রোম 117

ক্রোম 116

ক্রোম 115

ক্রোম 114

ক্রোম 113