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): यह सबग्रुप में सभी चालू इनवोकेशन values का बाइनरी 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 को स्वैप करता है.

Dawn के बारे में अपडेट

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