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

François Beaufort
François Beaufort
GitHub

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

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

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

  • "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" },
});

पार्टिकल (एचडीआर) सैंपल और WebGPU एचडीआर का उदाहरण देखकर, WebGPU की मदद से एचडीआर की सुविधा को एक्सप्लोर करें. साथ ही, chromestatus एंट्री देखें.

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

सबग्रुप के लिए ज़्यादा सहायता

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

ध्यान दें कि फ़्रैगमेंट शेडर में, subgroup_size की पहले से मौजूद वैल्यू फ़िलहाल काम नहीं करती. फ़िलहाल, ऐसा न करें.

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

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

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

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

  • 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 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