WebGPU (Chrome→121) में नया क्या है

François Beaufort

Android पर WebGPU की सुविधा

Chrome की टीम यह बताते हुए खुश है कि WebGPU अब Chrome 121 में डिफ़ॉल्ट रूप से चालू है. यह सुविधा, Android 12 और उसके बाद के वर्शन पर काम करने वाले उन डिवाइसों पर उपलब्ध है जिनमें Qualcomm और ARM GPU का इस्तेमाल किया गया है.

आने वाले समय में, यह सुविधा धीरे-धीरे Android के कई डिवाइसों पर उपलब्ध कराई जाएगी. इनमें, Android 11 पर काम करने वाले डिवाइस भी शामिल हैं. यह सुविधा, हार्डवेयर कॉन्फ़िगरेशन की एक बड़ी रेंज में बिना किसी रुकावट के काम करे, यह पक्का करने के लिए ज़्यादा टेस्टिंग और ऑप्टिमाइज़ेशन की ज़रूरत होगी. issue chromium:1497815 देखें.

Android के लिए Chrome पर चल रहा WebGPU सैंपल.

Windows पर शेडर कोड को कंपाइल करने के लिए, FXC के बजाय DXC का इस्तेमाल करना

Chrome अब DXC (DirectX कंपाइलर) की मदद से, Windows D3D12 मशीनों पर शेडर को कॉम्पाइल करता है. ये मशीनें, SM6+ ग्राफ़िक्स हार्डवेयर से लैस होती हैं. पहले, WebGPU Windows पर शेडर को कंपाइल करने के लिए, FXC (FX कंपाइलर) पर निर्भर था. हालांकि, FXC के लिए सुविधाएं सेट और परफ़ॉर्मेंस ऑप्टिमाइज़ेशन के मामले में कमी है. हालांकि, DXC में कोई सुविधा नहीं है.

शुरुआती जांच से पता चलता है कि FXC की तुलना में DXC का इस्तेमाल करने पर, कंप्यूट शेडर को कंपाइल करने की स्पीड में औसतन 20% की बढ़ोतरी होती है.

कैलकुलेट और रेंडर पास में टाइमस्टैंप क्वेरी

टाइमस्टैंप क्वेरी की मदद से, WebGPU ऐप्लिकेशन यह सटीक तरीके से मेज़र कर सकते हैं कि उनके GPU कमांड को कैलकुलेट और रेंडर पास करने में कितना समय लगता है. यह मेज़रमेंट नैनोसेकंड तक किया जा सकता है. इनका ज़्यादा इस्तेमाल, जीपीयू के वर्कलोड की परफ़ॉर्मेंस और व्यवहार के बारे में अहम जानकारी पाने के लिए किया जाता है.

जब "timestamp-query" सुविधा किसी GPUAdapter में उपलब्ध हो, तो ये काम किए जा सकते हैं:

• "timestamp-query" सुविधा के साथ GPUDevice का अनुरोध करें.
• "timestamp" टाइप का GPUQuerySet बनाएं.
• GPUQuerySet में टाइमस्टैंप वैल्यू कहां लिखनी है, यह तय करने के लिए GPUComputePassDescriptor.timestampWrites और GPURenderPassDescriptor.timestampWrites का इस्तेमाल करें.
• resolveQuerySet() की मदद से, टाइमस्टैंप की वैल्यू को GPUBuffer में बदलें.
• GPUBuffer से सीपीयू में नतीजे कॉपी करके, टाइमस्टैंप की वैल्यू वापस पढ़ें.
• टाइमस्टैंप की वैल्यू को BigInt64Array के तौर पर डिकोड करें.

नीचे दिया गया उदाहरण देखें और dawn: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 ब्राउज़र में, अपने ऐप्लिकेशन के डेवलपमेंट के दौरान, chrome://flags/#enable-webgpu-developer-features पर "WebGPU डेवलपर सुविधाएं" फ़्लैग को चालू करके, टाइमस्टैंप क्वांटिज़ेशन की सुविधा बंद की जा सकती है. ज़्यादा जानने के लिए, टाइमस्टैंप क्वेरी क्वांटिज़ेशन देखें.

जीपीयू कभी-कभी टाइमस्टैंप काउंटर को रीसेट कर सकते हैं. इससे टाइमस्टैंप के बीच नेगेटिव डेल्टा जैसी अनचाही वैल्यू मिल सकती हैं. हमारा सुझाव है कि आप git diff में हुए बदलाव देखें. इससे, नीचे दिए गए Compute Boids सैंपल में टाइमस्टैंप क्वेरी के लिए सहायता मिलती है.

टाइमस्टैंप क्वेरी वाले Boids सैंपल का हिसाब लगाएं.

शेडर मॉड्यूल के लिए डिफ़ॉल्ट एंट्री पॉइंट

डेवलपर के अनुभव को बेहतर बनाने के लिए, अब कंप्यूट या रेंडरर पाइपलाइन बनाते समय अपने शेडर मॉड्यूल के entryPoint को हटाया जा सकता है. अगर शेडर कोड में शेडर स्टेज के लिए कोई यूनीक एंट्री पॉइंट नहीं मिलता है, तो GPUValidationError ट्रिगर हो जाएगा. नीचे दिया गया उदाहरण और समस्या dawn: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 के कलर स्पेस के तौर पर display-p3 का इस्तेमाल करना

अब importExternalTexture() की मदद से, एचडीआर वीडियो से GPUExternalTexture इंपोर्ट करते समय, "display-p3" डेस्टिनेशन कलर स्पेस सेट किया जा सकता है. देखें कि WebGPU, कलर स्पेस को कैसे मैनेज करता है. यहां दिया गया उदाहरण और समस्या chromium: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)   { /* ... */ }
}

https://webgpureport.org पर दिखाए गए अडैप्टर की जानकारी वाली मेमोरी हेप.

डॉन से जुड़े अपडेट

WGSL भाषा की सुविधाओं को मैनेज करने के लिए, wgpu::Instance पर HasWGSLLanguageFeature और EnumerateWGSLLanguageFeatures तरीके जोड़े गए हैं. समस्या dawn:2260 देखें.

स्टैंडर्ड wgpu::Feature::BufferMapExtendedUsages सुविधा की मदद से, wgpu::BufferUsage::MapRead या wgpu::BufferUsage::MapWrite और किसी भी अन्य wgpu::BufferUsage के साथ जीपीयू बफ़र बनाया जा सकता है. यहां दिया गया उदाहरण और समस्या dawn: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 टेक्स्चर फ़ॉर्मैट, पास में टाइमस्टैंप क्वेरी, Pixel का लोकल स्टोरेज, शेडर की सुविधाएं, और मल्टी प्लानर फ़ॉर्मैट.

Chrome टीम ने Dwn के लिए आधिकारिक GitHub डेटा स्टोर करने की जगह बनाया है.

इसमें सिर्फ़ कुछ खास हाइलाइट शामिल हैं. कमिट की पूरी सूची देखें.

WebGPU में नया क्या है

WebGPU में नया क्या है सीरीज़ में शामिल सभी चीज़ों की सूची.

Chrome 131

• WGSL में दूरियों को क्लिप करना
• GPUCanvasContext getConfiguration()
• पॉइंट और लाइन प्राइमिटिव में डीपथ बायस नहीं होना चाहिए
• सबग्रुप के लिए, सभी को ध्यान में रखकर स्कैन करने की सुविधा के साथ पहले से मौजूद फ़ंक्शन
• मल्टी-ड्रॉ इनडायरेक्ट के लिए एक्सपेरिमेंटल सपोर्ट
• शेडर मॉड्यूल कंपाइल करने का विकल्प, सख्त गणित
• GPUAdapter requestAdapterInfo() को हटाना
• Dawn से जुड़े अपडेट

Chrome 130

• दो सोर्स को ब्लेंड करना
• Metal पर शेडर को कंपाइल करने में लगने वाले समय में सुधार
• GPUAdapter requestAdapterInfo() का इस्तेमाल बंद करना
• डॉन से जुड़े अपडेट

Chrome 129

• कैनवस टोन मैपिंग मोड के साथ एचडीआर काम करना
• सबग्रुप के लिए बेहतर सहायता
• Dawn से जुड़े अपडेट

Chrome 128

• सबग्रुप के साथ प्रयोग करना
• रेखाओं और बिंदुओं के लिए, डेप्थ बायस की सेटिंग को बंद करना
• preventDefault का इस्तेमाल करने पर, DevTools में गड़बड़ी की चेतावनी न दिखाएं
• WGSL, सैंपलिंग को पहले इंटरपोल करता है और फिर
• डॉन से जुड़े अपडेट

Chrome 127

• Android पर OpenGL ES के लिए प्रयोग के तौर पर उपलब्ध सहायता
• GPUAdapter info एट्रिब्यूट
• WebAssembly के इंटरऑपरेबिलिटी में सुधार
• कमांड एन्कोडर से जुड़ी गड़बड़ियों को बेहतर बनाया गया
• Dawn से जुड़े अपडेट

Chrome 126

• maxTextureArrayLayers की सीमा बढ़ाना
• Vulkan बैकएंड के लिए, बफ़र अपलोड को ऑप्टिमाइज़ करना
• शेडर को कंपाइल करने में लगने वाले समय में सुधार
• सबमिट किए गए निर्देश के बफ़र, यूनीक होने चाहिए
• Dawn से जुड़े अपडेट

Chrome 125

• सबग्रुप (डेवलपमेंट में उपलब्ध सुविधा)
• 3D टेक्सचर की स्लाइस को रेंडर करें
• Dawn से जुड़े अपडेट

Chrome 124

• रीड-ओनली और रीड-राइट स्टोरेज टेक्सचर
• सेवा वर्कर और शेयर किए गए वर्कर के लिए सहायता
• अडैप्टर की जानकारी देने वाले नए एट्रिब्यूट
• गड़बड़ियां ठीक की गईं
• Dawn से जुड़े अपडेट

Chrome 123

• WGSL में DP4a के बिल्ट-इन फ़ंक्शन के साथ काम करने की सुविधा
• WGSL में बिना पाबंदी वाले पॉइंटर पैरामीटर
• WGSL में कॉम्पोज़िट को डीरेफ़रंस करने के लिए सिंटैक्स शुगर
• स्टेंसिल और डेप्थ के लिए, रीड-ओनली मोड की अलग-अलग स्थिति
• डॉन से जुड़े अपडेट

Chrome 122

• कंपैटबिलिटी मोड की मदद से, ज़्यादा से ज़्यादा लोगों तक पहुंचें (डेवलपमेंट में उपलब्ध सुविधा)
• maxVertexAttributes की सीमा बढ़ाना
• डॉन से जुड़े अपडेट

Chrome 121

• Android पर WebGPU की सुविधा
• Windows पर शेडर को कंपाइल करने के लिए, FXC के बजाय DXC का इस्तेमाल करना
• कंप्यूट और रेंडर में टाइमस्टैंप क्वेरी
• शेडर मॉड्यूल के लिए डिफ़ॉल्ट एंट्री पॉइंट
• GPUExternalTexture कलर स्पेस के तौर पर display-p3 का इस्तेमाल करना
• मेमोरी हेप की जानकारी
• Dawn से जुड़े अपडेट

Chrome 120

• WGSL में 16-बिट फ़्लोटिंग-पॉइंट वैल्यू के लिए सहायता
• सीमाओं को पार करना
• डेप्थ-स्टेंसिल स्टेटस में बदलाव
• अडैप्टर की जानकारी के अपडेट
• टाइमस्टैंप क्वेरी को क्वांटाइज़ करना
• वसंत साफ़ करने की सुविधाएं

Chrome 119

• फ़िल्टर किए जा सकने वाले 32-बिट फ़्लोट टेक्सचर
• unorm10-10-10-2 वर्टिक्स फ़ॉर्मैट
• rgb10a2uint टेक्सचर फ़ॉर्मैट
• डॉन से जुड़े अपडेट

Chrome 118

• copyExternalImageToTexture() में HTMLImageElement और ImageData की सुविधा
• रीड-राइट और रीड-ओनली स्टोरेज टेक्स्चर के लिए, एक्सपेरिमेंट के तौर पर उपलब्ध सहायता
• डॉन से जुड़े अपडेट

Chrome 117

• वर्टिक्स बफ़र को अनसेट करना
• बाइंड किए गए ग्रुप को अनसेट करें
• डिवाइस खो जाने पर, असाइनमेंट के लिए असाइनमेंट पाइपलाइन बनाने से जुड़ी गड़बड़ियों को रोकना
• SPIR-V शेडर मॉड्यूल बनाने से जुड़े अपडेट
• डेवलपर के अनुभव को बेहतर बनाना
• अपने-आप जनरेट हुए लेआउट की मदद से, पाइपलाइन को कैश मेमोरी में सेव करना
• Dawn से जुड़े अपडेट

Chrome 116

• WebCodecs इंटिग्रेशन
• GPUAdapter requestDevice() से खोया हुआ डिवाइस वापस मिलना
• importExternalTexture() को कॉल करने पर, वीडियो चलाने की सुविधा को बिना रुकावट के जारी रखना
• स्पेसिफ़िकेशन के मुताबिक होना
• डेवलपर के अनुभव को बेहतर बनाना
• Dawn से जुड़े अपडेट

Chrome 115

• WGSL भाषा के इस्तेमाल किए जा सकने वाले एक्सटेंशन
• Direct3D 11 के लिए एक्सपेरिमेंटल सपोर्ट
• AC पावर पर डिफ़ॉल्ट रूप से डिसक्रेट जीपीयू पाना
• डेवलपर के अनुभव को बेहतर बनाना
• Dawn से जुड़े अपडेट

Chrome 114

• Optimize JavaScript
• बिना कॉन्फ़िगर किए गए कैनवस पर getCurrentTexture() से InvalidStateError मिलता है
• WGSL से जुड़े अपडेट
• Dawn से जुड़े अपडेट

Chrome 113

• importExternalTexture() में WebCodecs VideoFrame सोर्स का इस्तेमाल करना