WebGPU-তে নতুন কী কী রয়েছে (Chrome 131)

François Beaufort
François Beaufort
GitHub

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

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

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

  • ক্লিপ দূরত্ব ০ হলে বুঝতে হবে যে ভার্টেক্স প্লেনের উপরেই রয়েছে।
  • ধনাত্মক দূরত্ব মানে ভার্টেক্সটি ক্লিপ হাফ-স্পেসের মধ্যে আছে (যে দিকটি আপনি রাখতে চান)।
  • নেগেটিভ দূরত্ব মানে ভার্টেক্সটি ক্লিপ হাফ-স্পেসের বাইরে আছে (যে দিকটি আপনি বাতিল করতে চান)।

নিম্নলিখিত স্নিপেট, chromestatus এন্ট্রি এবং issue 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 জন সদস্য রয়েছেন। Particles (HDR) স্যাম্পেলে দেখানো হয়েছে, ব্রাউজার 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.
}

পয়েন্ট ও লাইন প্রিমিটিভের ডেপথ বায়াস থাকলে চলবে না

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

সাবগ্রুপের জন্য ইনক্লুসিভ স্ক্যান বিল্ট-ইন ফাংশন

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

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

মাল্টি-ড্র ইনডাইরেক্টের জন্য এক্সপেরিমেন্টাল সহায়তা

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

এই এক্সপেরিমেন্টাল ফিচার স্ট্যান্ডার্ডাইজড না হওয়া পর্যন্ত, Chrome-এ এটি উপলভ্য করতে chrome://flags/#enable-unsafe-webgpu-এ "অনিরাপদ WebGPU সহায়তা" ফ্ল্যাগ চালু করুন।

GPUAdapter-এ উপলভ্য "chromium-experimental-multi-draw-indirect" নন-স্ট্যান্ডার্ড GPU ফিচারের সাহায্যে, এই ফিচার সহ GPUDevice-এর জন্য অনুরোধ করুন। তারপরে, ড্র কল সেভ করার জন্য GPUBufferUsage.INDIRECT ব্যবহার সহ একটি GPUBuffer তৈরি করুন। আপনি এটি পরে নতুন multiDrawIndirect() এবং multiDrawIndexedIndirect() GPURenderPassEncoder পদ্ধতিতে রেন্ডার পাসের মধ্যে ড্র কল ইস্যু করতে ব্যবহার করতে পারবেন। নিচের স্নিপেট ও issue 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();

Shader মডিউল কম্পাইলেশন বিকল্প স্ট্রিক্ট ম্যাথ

শেডার মডিউল কম্পাইলেশনের সময় কঠোর গাণিতিক নিয়ম চালু বা বন্ধ করার জন্য GPUShaderModuleDescriptor-এ একটি বুলিয়ান strictMath ডেভেলপার বিকল্প যোগ করা হয়েছে। এটি chrome://flags/#enable-webgpu-developer-features-এ "WebGPU ডেভেলপার ফিচার" ফ্ল্যাগের পিছনে উপলভ্য, যার অর্থ এটি এমন একটি ফিচার যা শুধুমাত্র ডেভেলপমেন্টের সময় ব্যবহারের জন্য তৈরি করা হয়েছে। সমস্যা ৪২২৪১৪৫৫ দেখুন।

এই বিকল্প বর্তমানে Metal ও Direct3D-তে কাজ করে। স্ট্রিক্ট ম্যাথ বন্ধ করা থাকলে, কম্পাইলার এগুলি করে আপনার শেডার অপ্টিমাইজ করতে পারে:

  • NaN ও অসীম মান হওয়ার সম্ভাবনাকে উপেক্ষা করা।
  • -০-কে +০ হিসেবে বিবেচনা করা।
  • ভাগ করার পরিবর্তে অনন্যক দিয়ে দ্রুত গুণ করা।
  • অ্যাসোসিয়েটিভ ও ডিস্ট্রিবিউটিভ প্রপার্টির উপর ভিত্তি করে অপারেশনগুলি নতুন করে সাজানো।
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-তে নতুন কী কী আছে

WebGPU-তে নতুন কী কী আছে সিরিজে যা যা কভার করা হয়েছে তার একটি তালিকা।

Chrome 155-156

Chrome 153-154

Chrome 151-152

Chrome 149-150

Chrome 147-148

Chrome 146

Chrome 145

Chrome 144

Chrome 143

Chrome 142

Chrome 141

Chrome 140

Chrome 139

Chrome 138

Chrome 137

Chrome 136

Chrome 135

Chrome 134

Chrome 133

Chrome 132

Chrome 131

Chrome 130

Chrome 129

Chrome 128

Chrome 127

Chrome 126

Chrome 125

Chrome 124

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Chrome 113