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

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

WGSL-এ ক্লিপ দূরত্ব

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

যখন কোনো GPUAdapter-এ "clip-distances" ফিচারটি উপলব্ধ থাকে, তখন WGSL-এ ক্লিপ ডিসট্যান্স সাপোর্ট পেতে এই ফিচারসহ একটি GPUDevice-এর জন্য অনুরোধ করুন, এবং আপনার WGSL কোডে ` enable clip_distances; ব্যবহার করে এই এক্সটেনশনটি স্পষ্টভাবে সক্রিয় করুন। একবার সক্রিয় হয়ে গেলে, আপনি আপনার ভার্টেক্স শেডারে ` clip_distances বিল্ট-ইন অ্যারেটি ব্যবহার করতে পারবেন। এই অ্যারেটি একটি ব্যবহারকারী-সংজ্ঞায়িত ক্লিপ প্লেনের দূরত্ব ধারণ করে:

  • ক্লিপ দূরত্ব ০ হওয়ার অর্থ হলো শীর্ষবিন্দুটি তলের উপর অবস্থিত।
  • ধনাত্মক দূরত্ব মানে হলো শীর্ষবিন্দুটি ক্লিপ অর্ধ-স্থানের (যে দিকটি আপনি রাখতে চান) ভিতরে অবস্থিত।
  • ঋণাত্মক দূরত্বের অর্থ হলো ভার্টেক্সটি ক্লিপ হাফ-স্পেসের (যে দিকটি আপনি বাদ দিতে চান) বাইরে অবস্থিত।

নিম্নলিখিত স্নিপেট, chromestatus এন্ট্রি এবং ইস্যু 358408571 দেখুন।

const adapter = await navigator.gpu.requestAdapter();
if (!adapter.features.has("clip-distances")) {
  throw new Error("Clip distances support is not available");
}
// Explicitly request clip distances support.
const device = await adapter.requestDevice({
  requiredFeatures: ["clip-distances"],
});

const vertexShaderModule = device.createShaderModule({ code: `
  enable clip_distances;

  struct VertexOut {
    @builtin(clip_distances) my_clip_distances : array<f32, 1>,
    @builtin(position) my_position : vec4f,
  }
  @vertex fn main() -> VertexOut {
    var output : VertexOut;
    output.my_clip_distances[0] = 1;
    output.my_position = vec4f(0, 0, 0, 1);
    return output;
  }
`,
});

// Send the appropriate commands to the GPU...

GPUCanvasContext getConfiguration()

একবার একটি কনফিগারেশন ডিকশনারি দিয়ে GPUCanvasContext configure() কল করা হলে, GPUCanvasContext getConfiguration() মেথডটি আপনাকে ক্যানভাস কনটেক্সট কনফিগারেশন পরীক্ষা করার সুযোগ দেয়। এতে device , format , usage , viewFormats , colorSpace , toneMapping , এবং alphaMode মেম্বারগুলো অন্তর্ভুক্ত থাকে। ব্রাউজার HDR ক্যানভাস সমর্থন করে কিনা তা পরীক্ষা করার মতো কাজের জন্য এটি উপযোগী, যেমনটি Particles (HDR) স্যাম্পলে দেখানো হয়েছে। নিম্নলিখিত স্নিপেট, chromestatus এন্ট্রি , এবং ইস্যু 370109829 দেখুন।

const adapter = await navigator.gpu.requestAdapter();
const device = await adapter.requestDevice();

const canvas = document.querySelector("canvas");
const context = canvas.getContext("webgpu");

// Configure the canvas for HDR.
context.configure({
  device,
  format: "rgba16float",
  toneMapping: { mode: "extended" },
});

const configuration = context.getConfiguration();
if (configuration.toneMapping.mode === "extended") {
  // The browser supports HDR canvas.
  // Warning! The user still needs a HDR display to enjoy HDR content.
}

বিন্দু এবং রেখা প্রিমিটিভগুলিতে গভীরতার পক্ষপাত থাকা উচিত নয়।

পূর্বে ঘোষিত নিয়ম অনুযায়ী, যখন কোনো রেন্ডার পাইপলাইনের টপোলজি লাইন বা পয়েন্ট টাইপের হয়, তখন depthBias , depthBiasSlopeScale , এবং depthBiasClamp কোনো অশূন্য মানে সেট করা এখন WebGPU স্পেকের একটি ভ্যালিডেশন এরর হিসেবে গণ্য হবে। ইস্যু 352567424 দেখুন।

উপগোষ্ঠীগুলির জন্য অন্তর্ভুক্তিমূলক স্ক্যান অন্তর্নির্মিত ফাংশন

সাবগ্রুপ পরীক্ষণের অংশ হিসেবে, ইস্যু 361330160 -তে নিম্নলিখিত সাবগ্রুপ বিল্ট-ইন ফাংশনগুলো যোগ করা হয়েছে:

  • subgroupInclusiveAdd(value) : সাবগ্রুপ জুড়ে থাকা সমস্ত সক্রিয় value ইনভোকেশনের ইনক্লুসিভ স্ক্যান সামেশন রিটার্ন করে।
  • subgroupInclusiveMul(value) : সাবগ্রুপ জুড়ে সমস্ত সক্রিয় ইনভোকেশনের value গুলির ইনক্লুসিভ স্ক্যান গুণফল ফেরত দেয়।

মাল্টি-ড্র ইনডিরেক্টের জন্য পরীক্ষামূলক সমর্থন

মাল্টি-ড্র ইনডিরেক্ট জিপিইউ ফিচারটি আপনাকে একটিমাত্র জিপিইউ কমান্ডের মাধ্যমে একাধিক ড্র কল করার সুযোগ দেয়। এটি বিশেষত সেইসব ক্ষেত্রে উপযোগী যেখানে প্রচুর সংখ্যক অবজেক্ট রেন্ডার করার প্রয়োজন হয়, যেমন পার্টিকেল সিস্টেম, ইনস্ট্যান্সিং এবং বড় সিন। GPURenderPassEncoder-এর drawIndirect() এবং drawIndexedIndirect() মেথডগুলো একটি জিপিইউ বাফারের নির্দিষ্ট অঞ্চল থেকে একবারে শুধুমাত্র একটি ড্র কল করতে পারে।

এই পরীক্ষামূলক ফিচারটি প্রমিত না হওয়া পর্যন্ত, ক্রোমে এটি উপলব্ধ করতে chrome://flags/#enable-unsafe-webgpu এ থাকা "Unsafe WebGPU Support" ফ্ল্যাগটি সক্রিয় করুন।

একটি GPUAdapter-এ উপলব্ধ "chromium-experimental-multi-draw-indirect" নামক নন-স্ট্যান্ডার্ড GPU ফিচারটি ব্যবহার করে, এই ফিচারসহ একটি GPUDevice-এর জন্য অনুরোধ করুন। এরপর ড্র কলগুলো সংরক্ষণ করার জন্য GPUBufferUsage.INDIRECT ব্যবহারবিধিসহ একটি GPUBuffer তৈরি করুন। পরবর্তীতে একটি রেন্ডার পাসের ভেতরে ড্র কল জারি করার জন্য আপনি এটি নতুন multiDrawIndirect() এবং multiDrawIndexedIndirect() GPURenderPassEncoder মেথডগুলোতে ব্যবহার করতে পারবেন। নিম্নলিখিত কোড স্নিপেট এবং ইস্যু 356461286 দেখুন।

const adapter = await navigator.gpu.requestAdapter();
if (!adapter.features.has("chromium-experimental-multi-draw-indirect")) {
  throw new Error("Experimental multi-draw indirect support is not available");
}
// Explicitly request experimental multi-draw indirect support.
const device = await adapter.requestDevice({
  requiredFeatures: ["chromium-experimental-multi-draw-indirect"],
});

// Draw call have vertexCount, instanceCount, firstVertex, and firstInstance parameters.
const drawData = new Uint32Array([
  3, 1, 0, 0, // First draw call
  3, 1, 3, 0, // Second draw call
]);
// Create a buffer to store the draw calls.
const drawBuffer = device.createBuffer({
  size: drawData.byteLength,
  usage: GPUBufferUsage.INDIRECT | GPUBufferUsage.COPY_DST,
});
device.queue.writeBuffer(drawBuffer, 0, drawData);

// Create a render pipeline, a vertex buffer, and a render pass encoder...

// Inside a render pass, issue the draw calls.
myPassEncoder.setPipeline(myPipeline);
myPassEncoder.setVertexBuffer(0, myVertexBuffer);
myPassEncoder.multiDrawIndirect(drawBuffer, /*offset=*/ 0, /*maxDrawCount=*/ 2);
myPassEncoder.end();

শেডার মডিউল সংকলন বিকল্প কঠোর গণিত

GPUShaderModuleDescriptor-এ একটি বুলিয়ান strictMath ডেভেলপার অপশন যোগ করা হয়েছে, যা আপনাকে শেডার মডিউল কম্পাইলেশনের সময় স্ট্রিক্ট ম্যাথ চালু বা বন্ধ করার সুযোগ দেবে। এটি chrome://flags/#enable-webgpu-developer-features এ থাকা 'WebGPU Developer Features' ফ্ল্যাগের অধীনে উপলব্ধ, যার অর্থ হলো এই ফিচারটি শুধুমাত্র ডেভেলপমেন্ট পর্যায়ে ব্যবহারের জন্য তৈরি। ইস্যু 42241455 দেখুন।

এই বিকল্পটি বর্তমানে Metal এবং Direct3D-তে সমর্থিত। যখন strict math নিষ্ক্রিয় থাকে, তখন কম্পাইলার আপনার শেডারগুলিকে নিম্নলিখিত উপায়ে অপ্টিমাইজ করতে পারে:

  • NaN এবং অসীম মানের সম্ভাবনা উপেক্ষা করা হচ্ছে।
  • -0 কে +0 হিসেবে গণ্য করা।
  • ভাগের পরিবর্তে বিপরীত সংখ্যা দিয়ে দ্রুততর গুণ করা।
  • সংযোগ ও বন্টন বৈশিষ্ট্যের উপর ভিত্তি করে ক্রিয়াকলাপগুলির পুনর্বিন্যাস। 
const adapter = await navigator.gpu.requestAdapter();
const device = await adapter.requestDevice();

const code = `
  // Examines the bit pattern of the floating-point number to
  // determine if it represents a NaN according to the IEEE 754 standard.
  fn isNan(x : f32) -> bool {
    bool ones_exp = (bitcast<u32>(x) & 0x7f8) == 0x7f8;
    bool non_zero_sig = (bitcast<u32>(x) & 0x7ffff) != 0;
    return ones_exp && non_zero_sig;
  }
  // ...
`;

// Enable strict math during shader compilation.
const shaderModule = device.createShaderModule({ code, strictMath: true });

GPUAdapter requestAdapterInfo() অপসারণ করুন

GPUAdapter-এর requestAdapterInfo() ` অ্যাসিঙ্ক্রোনাস মেথডটি অপ্রয়োজনীয়, কারণ আপনি GPUAdapter-এর info অ্যাট্রিবিউট ব্যবহার করে ইতিমধ্যেই সিঙ্ক্রোনাসভাবে GPUAdapterInfo পেতে পারেন। তাই, এই নন-স্ট্যান্ডার্ড GPUAdapter ` requestAdapterInfo() ` মেথডটি এখন সরিয়ে ফেলা হয়েছে। এটি সরিয়ে ফেলার উদ্দেশ্য দেখুন।

ভোরের আপডেট

tint_benchmark এক্সিকিউটেবলটি WGSL থেকে প্রতিটি ব্যাকএন্ড ল্যাঙ্গুয়েজে শেডার অনুবাদ করার খরচ পরিমাপ করে। এ সম্পর্কে আরও জানতে নতুন ডকুমেন্টেশনটি দেখুন।

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

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

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

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

ক্রোম ১৪৬

ক্রোম ১৪৫

ক্রোম ১৪৪

ক্রোম ১৪৩

ক্রোম ১৪২

ক্রোম ১৪১

ক্রোম ১৪০

ক্রোম ১৩৯

ক্রোম ১৩৮

ক্রোম ১৩৭

ক্রোম ১৩৬

ক্রোম ১৩৫

ক্রোম ১৩৪

ক্রোম ১৩৩

ক্রোম ১৩২

ক্রোম ১৩১

ক্রোম ১৩০

ক্রোম ১২৯

ক্রোম ১২৮

ক্রোম ১২৭

ক্রোম ১২৬

ক্রোম ১২৫

ক্রোম ১২৪

ক্রোম ১২৩

ক্রোম ১২২

ক্রোম ১২১

ক্রোম ১২০

ক্রোম ১১৯

ক্রোম ১১৮

ক্রোম ১১৭

ক্রোম ১১৬

ক্রোম ১১৫

ক্রোম ১১৪

ক্রোম ১১৩