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

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

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

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

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

  • 0 এর একটি ক্লিপ দূরত্ব মানে শীর্ষবিন্দুটি সমতলে অবস্থিত।
  • একটি ইতিবাচক দূরত্ব মানে শীর্ষস্থানটি ক্লিপের অর্ধেক স্থানের ভিতরে রয়েছে (আপনি যে দিকে রাখতে চান)।
  • একটি নেতিবাচক দূরত্ব মানে শীর্ষস্থানটি ক্লিপের অর্ধেক স্থানের বাইরে (যে দিকটি আপনি বাতিল করতে চান)।

নিচের স্নিপেট, ক্রোমেস্ট্যাটাস এন্ট্রি এবং ইস্যু 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 ক্যানভাস সমর্থন করে কিনা তা পরীক্ষা করার মতো কাজের জন্য এটি কার্যকর, যেমনটি পার্টিকেলস (HDR) নমুনায় দেখানো হয়েছে। নিম্নলিখিত স্নিপেট, ক্রোমেস্ট্যাটাস এন্ট্রি এবং ইস্যু 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 অন্তর্ভুক্তিমূলক স্ক্যান সমষ্টি প্রদান করে।
  • subgroupInclusiveMul(value) : সাবগ্রুপ জুড়ে সমস্ত সক্রিয় আহ্বানের value অন্তর্ভুক্তিমূলক স্ক্যান গুণিতক প্রদান করে।

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

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

এই পরীক্ষামূলক বৈশিষ্ট্যটি প্রমিত না হওয়া পর্যন্ত, এটিকে Chrome-এ উপলব্ধ করতে chrome://flags/#enable-unsafe-webgpu "অনিরাপদ WebGPU সমর্থন" পতাকা সক্ষম করুন৷

একটি GPUAdapter-এ উপলব্ধ "chromium-experimental-multi-draw-indirect" অ-মানক GPU বৈশিষ্ট্য সহ, এই বৈশিষ্ট্য সহ একটি GPU ডিভাইসের অনুরোধ করুন৷ তারপর 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();

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

একটি বুলিয়ান strictMath ডেভেলপার বিকল্প GPUShaderModuleDescriptor-এ যোগ করা হয়েছে যাতে আপনি shader মডিউল সংকলনের সময় কঠোর গণিত সক্ষম বা অক্ষম করতে পারেন। এটি chrome://flags/#enable-webgpu-developer-features এ "WebGPU বিকাশকারী বৈশিষ্ট্য" পতাকার পিছনে উপলব্ধ, যার মানে এটি একটি বৈশিষ্ট্য যা শুধুমাত্র বিকাশের সময় ব্যবহারের উদ্দেশ্যে। সংখ্যা 42241455 দেখুন।

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

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

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

ক্রোম 131

ক্রোম 130

ক্রোম 129

ক্রোম 128

ক্রোম 127

ক্রোম 126

ক্রোম 125

ক্রোম 124

ক্রোম 123

ক্রোম 122

ক্রোম 121

ক্রোম 120

ক্রোম 119

ক্রোম 118

ক্রোম 117

ক্রোম 116

ক্রোম 115

ক্রোম 114

ক্রোম 113