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

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

অ্যান্ড্রয়েডে WebGPU সাপোর্ট করুন

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

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

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

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

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

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

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

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

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

  • "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 গুলি মাঝে মাঝে টাইমস্ট্যাম্প কাউন্টার রিসেট করতে পারে, যার ফলে টাইমস্ট্যাম্পগুলির মধ্যে নেতিবাচক ডেল্টার মতো অপ্রত্যাশিত মান দেখা দিতে পারে, তাই আমি আপনাকে git diff পরিবর্তনগুলি পরীক্ষা করার পরামর্শ দিচ্ছি যা নিম্নলিখিত Compute Boids নমুনায় টাইমস্ট্যাম্প কোয়েরি সমর্থন যোগ করে।

টাইমস্ট্যাম্প কোয়েরি সমন্বিত কম্পিউট বয়েডস নমুনার স্ক্রিনশট।
টাইমস্ট্যাম্প কোয়েরি সমন্বিত কম্পিউট বয়েডস নমুনা।

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

ডেভেলপার অভিজ্ঞতা উন্নত করার জন্য, আপনি এখন কম্পিউট বা রেন্ডার পাইপলাইন তৈরি করার সময় আপনার শেডার মডিউলের 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);

নিম্নলিখিত বৈশিষ্ট্যগুলি নথিভুক্ত করা হয়েছে: ANGLE Texture Sharing , D3D11 মাল্টিথ্রেড সুরক্ষিত , Implicit Device Synchronization , Norm16 টেক্সচার ফর্ম্যাট , Timestamp Query Inside Passes , Pixel Local Storage , Shader Features , এবং Multi Planar Formats ।

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

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

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

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

ক্রোম ১৪২

ক্রোম ১৪১

ক্রোম ১৪০

ক্রোম ১৩৯

ক্রোম ১৩৮

ক্রোম ১৩৭

ক্রোম ১৩৬

ক্রোম ১৩৫

ক্রোম ১৩৪

ক্রোম ১৩৩

ক্রোম ১৩২

ক্রোম ১৩১

ক্রোম ১৩০

ক্রোম ১২৯

ক্রোম ১২৮

ক্রোম ১২৭

ক্রোম ১২৬

ক্রোম ১২৫

ক্রোম ১২৪

ক্রোম ১২৩

ক্রোম ১২২

ক্রোম ১২১

ক্রোম ১২০

ক্রোম ১১৯

ক্রোম ১১৮

ক্রোম ১১৭

ক্রোম ১১৬

ক্রোম ১১৫

ক্রোম ১১৪

ক্রোম ১১৩