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

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

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

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

যখন "clip-distances" বৈশিষ্ট্যটি GPUAdapter-এ উপলব্ধ থাকে, তখন WGSL-এ clip distances সমর্থন পেতে এই বৈশিষ্ট্য সহ একটি GPUDevice অনুরোধ করুন এবং enable clip_distances; সহ আপনার WGSL কোডে এই এক্সটেনশনটি স্পষ্টভাবে সক্ষম করুন। একবার সক্ষম হয়ে গেলে, আপনি আপনার vertex shader-এ 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 কনফিগারেশন () পান

একবার 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 একটি অ-শূন্য মানের উপর সেট করার জন্য একটি বৈধতা ত্রুটি করে তোলে যখন একটি রেন্ডার পাইপলাইনের টপোলজি একটি লাইন বা পয়েন্ট টাইপ হয়। সংখ্যা 352567424 দেখুন।

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

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

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

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

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

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

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

এই বিকল্পটি বর্তমানে মেটাল এবং ডাইরেক্ট৩ডি তে সমর্থিত। যখন কঠোর গণিত অক্ষম করা হয়, তখন কম্পাইলার আপনার শেডারগুলিকে নিম্নলিখিতভাবে অপ্টিমাইজ করতে পারে:

  • 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" সিরিজে যা যা আলোচনা করা হয়েছে তার একটি তালিকা।

ক্রোম ১৪২

ক্রোম ১৪১

ক্রোম ১৪০

ক্রোম ১৩৯

ক্রোম ১৩৮

ক্রোম ১৩৭

ক্রোম ১৩৬

ক্রোম ১৩৫

ক্রোম ১৩৪

ক্রোম ১৩৩

ক্রোম ১৩২

ক্রোম ১৩১

ক্রোম ১৩০

ক্রোম ১২৯

ক্রোম ১২৮

ক্রোম ১২৭

ক্রোম ১২৬

ক্রোম ১২৫

ক্রোম ১২৪

ক্রোম ১২৩

ক্রোম ১২২

ক্রোম ১২১

ক্রোম ১২০

ক্রোম ১১৯

ক্রোম ১১৮

ক্রোম ১১৭

ক্রোম ১১৬

ক্রোম ১১৫

ক্রোম ১১৪

ক্রোম ১১৩