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

François Beaufort
François Beaufort
GitHub

कैनवस टोन मैपिंग मोड के साथ एचडीआर की सुविधा

वेब डेवलपर के पास, एचडीआर कॉन्टेंट डिलीवर करने के लिए सीमित विकल्प होते हैं. वे मुख्य रूप से <img> और <video> एलिमेंट पर भरोसा करते हैं. हालांकि, <canvas> एलिमेंट का इस्तेमाल सिर्फ़ एसडीआर के लिए किया जा सकता है. कैनवस में डाइनैमिक एचडीआर कॉन्टेंट जनरेट करने के लिए, उसे दिखाने से पहले उसके कॉन्टेंट को एचडीआर इमेज के तौर पर कोड में बदलना होता है. उदाहरण के लिए, यह डेमो देखें.

WebGPU कैनवस कॉन्फ़िगरेशन में मौजूद नए GPUCanvasToneMappingMode पैरामीटर की मदद से, WebGPU अब सफ़ेद रंग (#FFFFFF) से ज़्यादा चमकदार रंग बना सकता है. इसके लिए, WebGPU इन मोड का इस्तेमाल करता है:

  • "standard": डिफ़ॉल्ट सेटिंग में, कॉन्टेंट को स्क्रीन की एसडीआर रेंज तक सीमित रखा जाता है. इस मोड में, स्क्रीन के कलर स्पेस में मौजूद सभी कलर वैल्यू को [0, 1] इंटरवल पर क्लैंप किया जाता है.

  • "extended": इससे स्क्रीन की पूरी एचडीआर रेंज अनलॉक हो जाती है. यह मोड, स्क्रीन की [0, 1] रेंज में "standard" से मेल खाता है. स्क्रीन की बढ़ी हुई डाइनैमिक रेंज के लिए, क्लैंपिंग या प्रोजेक्शन किया जाता है, लेकिन [0, 1] के लिए नहीं.

यहां दिए गए कोड स्निपेट में, हाई डाइनैमिक रेंज के लिए कैनवस को कॉन्फ़िगर करने का तरीका बताया गया है.

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

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

context.configure({
  device,
  format: "rgba16float",
  toneMapping: { mode: "extended" },
});

Particles (HDR) sample और WebGPU HDR example को देखकर, WebGPU के साथ एचडीआर एक्सप्लोर करें. साथ ही, chromestatus entry देखें.

इस इमेज में, एचडीआर स्क्रीन वाला एक लैपटॉप दिखाया गया है. इसकी स्क्रीन पर एक शानदार इमेज दिख रही है.
एचडीआर स्क्रीन पर, Particles (HDR) का सैंपल दिखाया गया है.

सबग्रुप की ज़्यादा सुविधाएं

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

ध्यान दें कि फ़्रैगमेंट शेडर में, subgroup_size की बिल्ट-इन वैल्यू फ़िलहाल बग वाली है. अभी इसे न करें.

इसके अलावा, सबग्रुप के लिए ये बिल्ट-इन फ़ंक्शन जोड़े गए हैं:

  • subgroupAdd(value): यह सबग्रुप में मौजूद सभी चालू इनवोकेशन values का योग दिखाता है.
  • subgroupExclusiveAdd(value): यह सबग्रुप में, सभी चालू इनवोकेशन value के एक्सक्लूसिव स्कैन का योग दिखाता है.
  • subgroupMul(value): यह सबग्रुप में मौजूद सभी चालू इनवोकेशन values का गुणनफल दिखाता है.
  • subgroupExclusiveMul(value): यह सबग्रुप में, चालू किए गए सभी value के स्कैन मल्टिप्लिकेशन की खास जानकारी दिखाता है.

  • subgroupAnd(value): यह सबग्रुप में मौजूद सभी चालू इनवोकेशन value का बाइनरी AND दिखाता है.
  • subgroupOr(value): यह सबग्रुप में मौजूद सभी चालू इनवोकेशन value का बाइनरी OR दिखाता है.
  • subgroupXor(value): यह सबग्रुप में मौजूद सभी चालू इनवोकेशन values का बाइनरी XOR दिखाता है.

  • subgroupMin(value): यह सबग्रुप में मौजूद सभी चालू इनवोकेशन value की सबसे कम वैल्यू दिखाता है.
  • subgroupMax(value): यह सबग्रुप में मौजूद सभी चालू इनवोकेशन value की ज़्यादा से ज़्यादा वैल्यू दिखाता है.

  • subgroupAll(value): अगर सबग्रुप में मौजूद सभी चालू इनवोकेशन के लिए value सही है, तो यह फ़ंक्शन 'सही' दिखाता है.
  • subgroupAny(value): अगर सबग्रुप में किसी भी चालू इनवोकेशन के लिए value सही है, तो यह फ़ंक्शन सही वैल्यू दिखाता है.

  • subgroupElect(): अगर इस इनवोकेशन में, सबग्रुप में मौजूद चालू इनवोकेशन के बीच सबसे कम subgroup_invocation_id है, तो यह फ़ंक्शन 'सही' वैल्यू दिखाता है.
  • subgroupBroadcastFirst(value): यह सबग्रुप में सबसे कम subgroup_invocation_id वाले ऐक्टिव इनवोकेशन से value को अन्य सभी ऐक्टिव इनवोकेशन पर ब्रॉडकास्ट करता है.

  • subgroupShuffle(value, id): यह उस चालू इनवोकेशन से value दिखाता है जिसका subgroup_invocation_id, id से मेल खाता है.
  • subgroupShuffleXor(value, mask): यह उस चालू इनवोकेशन से value दिखाता है जिसका subgroup_invocation_id, subgroup_invocation_id ^ mask से मेल खाता है. mask का मान, डाइनैमिक तौर पर एक जैसा होना चाहिए.
  • subgroupShuffleUp(value, delta): यह उस चालू इनवोकेशन से value दिखाता है जिसका subgroup_invocation_id, subgroup_invocation_id - delta से मेल खाता है.
  • subgroupShuffleDown(value, delta): यह उस चालू इनवोकेशन से value दिखाता है जिसका subgroup_invocation_id, subgroup_invocation_id + delta से मेल खाता है.

  • quadBroadcast(value, id): id के बराबर आईडी वाले क्वाड इनवोकेशन से value ब्रॉडकास्ट करता है. id का मान, कॉन्स्टेंट-एक्सप्रेशन होना चाहिए.
  • quadSwapX(value): X दिशा में क्वाड में मौजूद value को इनवोकेशन के बीच स्वैप करता है.
  • quadSwapY(value): यह Y दिशा में, क्वाड में मौजूद value को इनवोकेशन के बीच स्वैप करता है.
  • quadSwapDiagonal(value): यह फ़ंक्शन, क्वाड में मौजूद value को एक-दूसरे से बदलता है.

सुबह के अपडेट

wgpu::PrimitiveState स्ट्रक्चर में अब सीधे तौर पर डेप्थ क्लिप कंट्रोल सेटिंग शामिल है. इसलिए, अब अलग wgpu::PrimitiveDepthClipControl स्ट्रक्चर की ज़रूरत नहीं है. ज़्यादा जानने के लिए, यहां दिया गया कोड स्निपेट और webgpu-headers PR देखें.

// Before
wgpu::PrimitiveState primitive = {};
wgpu::PrimitiveDepthClipControl depthClipControl;
depthClipControl.unclippedDepth = true;
primitive.nextInChain = &depthClipControl;

// Now
wgpu::PrimitiveState primitive = {};
primitive.unclippedDepth = true;

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

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

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

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