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

François Beaufort

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

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

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

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

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

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

ভোরের আপডেট

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-তে নতুন কি আছে

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

ক্রোম 130

• দ্বৈত উৎস মিশ্রন
• ধাতুতে Shader সংকলন সময় উন্নতি
• GPUAdapter রিকোয়েস্ট অ্যাডাপ্টারইনফো() এর অবচয়
• ভোরের আপডেট

ক্রোম 129

• ক্যানভাস টোন ম্যাপিং মোড সহ HDR সমর্থন
• প্রসারিত সাবগ্রুপ সমর্থন
• ভোরের আপডেট

ক্রোম 128

• সাবগ্রুপগুলির সাথে পরীক্ষা করা হচ্ছে
• লাইন এবং পয়েন্টের জন্য গভীরতার পক্ষপাত সেটিং বাতিল করুন
• ডিফল্ট প্রতিরোধ করলে ক্যাপচারড ত্রুটি DevTools সতর্কতা লুকান
• WGSL ইন্টারপোলেট স্যাম্পলিং প্রথমে এবং হয়
• ভোরের আপডেট

ক্রোম 127

• অ্যান্ড্রয়েডে OpenGL ES-এর জন্য পরীক্ষামূলক সমর্থন
• GPUAdapter তথ্য বৈশিষ্ট্য
• WebAssembly ইন্টারপ উন্নতি
• উন্নত কমান্ড এনকোডার ত্রুটি
• ভোরের আপডেট

ক্রোম 126

• maxTextureArrayLayers সীমা বাড়ান
• Vulkan ব্যাকএন্ডের জন্য বাফার আপলোড অপ্টিমাইজেশান
• Shader সংকলন সময় উন্নতি
• জমা দেওয়া কমান্ড বাফার অনন্য হতে হবে
• ভোরের আপডেট

ক্রোম 125

• উপগোষ্ঠী (বিকাশের বৈশিষ্ট্য)
• 3D টেক্সচারের টুকরোতে রেন্ডার করুন
• ভোরের আপডেট

ক্রোম 124

• রিড-ওনলি এবং রিড-রাইট স্টোরেজ টেক্সচার
• সেবা কর্মী এবং শেয়ার্ড ওয়ার্কার্স সমর্থন
• নতুন অ্যাডাপ্টারের তথ্য বৈশিষ্ট্য
• বাগ ফিক্স
• ভোরের আপডেট

ক্রোম 123

• DP4a বিল্ট-ইন ফাংশন WGSL-এ সমর্থন করে
• WGSL-এ অনিয়ন্ত্রিত পয়েন্টার পরামিতি
• WGSL-এ কম্পোজিট ডিরেফারেন্স করার জন্য সিনট্যাক্স চিনি
• স্টেনসিল এবং গভীরতার দিকগুলির জন্য আলাদা পঠনযোগ্য অবস্থা
• ভোরের আপডেট

ক্রোম 122

• সামঞ্জস্যপূর্ণ মোডের সাথে নাগাল প্রসারিত করুন (বিকাশের বৈশিষ্ট্য)
• maxVertexAttributes সীমা বাড়ান
• ভোরের আপডেট

ক্রোম 121

• অ্যান্ড্রয়েডে WebGPU সমর্থন করুন
• উইন্ডোজে শেডার কম্পাইলেশনের জন্য FXC-এর পরিবর্তে DXC ব্যবহার করুন
• গণনা এবং রেন্ডার পাসে টাইমস্ট্যাম্প প্রশ্ন
• শেডার মডিউলে ডিফল্ট এন্ট্রি পয়েন্ট
• GPUExternalTexture রঙের স্থান হিসাবে প্রদর্শন-p3 সমর্থন করে
• মেমরি হিপ তথ্য
• ভোরের আপডেট

ক্রোম 120

• WGSL-এ 16-বিট ফ্লোটিং-পয়েন্ট মানগুলির জন্য সমর্থন
• সীমা ধাক্কা
• গভীরতা-স্টেনসিল অবস্থায় পরিবর্তন
• অ্যাডাপ্টারের তথ্য আপডেট
• টাইমস্ট্যাম্প ক্যোয়ান্টাইজেশন
• বসন্ত-পরিষ্কার বৈশিষ্ট্য

ক্রোম 119

• ফিল্টারযোগ্য 32-বিট ফ্লোট টেক্সচার
• unorm10-10-10-2 শীর্ষবিন্দু বিন্যাস
• rgb10a2uint টেক্সচার ফরম্যাট
• ভোরের আপডেট

ক্রোম 118

• copyExternalImageToTexture() এ HTMLImageElement এবং ImageData সমর্থন
• পঠন-লেখা এবং শুধুমাত্র-পঠন সঞ্চয়স্থান টেক্সচারের জন্য পরীক্ষামূলক সমর্থন
• ভোরের আপডেট

ক্রোম 117

• শীর্ষবিন্দু বাফার আনসেট করুন
• বাইন্ড গ্রুপ আনসেট করুন
• ডিভাইস হারিয়ে গেলে অ্যাসিঙ্ক পাইপলাইন তৈরির ত্রুটিগুলি নীরব করুন৷
• SPIR-V shader মডিউল তৈরির আপডেট
• বিকাশকারীর অভিজ্ঞতা উন্নত করা
• স্বয়ংক্রিয়ভাবে তৈরি লেআউট সহ পাইপলাইন ক্যাশ করা হচ্ছে
• ভোরের আপডেট

ক্রোম 116

• ওয়েবকোডেক্স ইন্টিগ্রেশন
• হারিয়ে যাওয়া ডিভাইস GPUAdapter requestDevice() দ্বারা ফেরত দেওয়া হয়েছে
• importExternalTexture() বলা হলে ভিডিও প্লেব্যাক মসৃণ রাখুন
• বিশেষ সঙ্গতি
• বিকাশকারীর অভিজ্ঞতা উন্নত করা
• ভোরের আপডেট

ক্রোম 115

• WGSL ভাষা এক্সটেনশন সমর্থিত
• Direct3D 11 এর জন্য পরীক্ষামূলক সমর্থন
• AC পাওয়ারে ডিফল্টরূপে আলাদা GPU পান
• বিকাশকারীর অভিজ্ঞতা উন্নত করা
• ভোরের আপডেট

ক্রোম 114

• জাভাস্ক্রিপ্ট অপ্টিমাইজ করুন
• getCurrentTexture() কনফিগার না করা ক্যানভাসে InvalidStateError নিক্ষেপ করে
• WGSL আপডেট
• ভোরের আপডেট

ক্রোম 113

• importExternalTexture() এ WebCodecs VideoFrame উৎস ব্যবহার করুন