जानें कि WebGPU, मशीन लर्निंग की बेहतर परफ़ॉर्मेंस और ग्राफ़िक रेंडरिंग को बेहतर बनाने के लिए, जीपीयू की मदद से कैसे काम करता है.
नया WebGPU API, ग्राफ़िक और मशीन लर्निंग के वर्कलोड में बड़े पैमाने पर सुधार करता है. यह लेख बताता है कि कैसे WebGPU, WebGL के मौजूदा समाधान से बेहतर है. साथ ही, इसमें आने वाले समय के विकास पर एक नज़र भी है. लेकिन पहले, हम आपको WebGPU के बारे में कुछ जानकारी देंगे.
WebGPU पर संदर्भ
WebGL 2011 में Chrome में आया. वेब ऐप्लिकेशन को जीपीयू का फ़ायदा लेने की अनुमति देकर, WebGL वेब पर शानदार अनुभव उपलब्ध कराता है—Google Earth से लेकर इंटरैक्टिव संगीत वीडियो तक, 3D रीयल-इस्टेट के बारे में कदम-दर-कदम निर्देश देने के साथ-साथ और भी बहुत कुछ. WebGL, 1992 में पहली बार डेवलप किए गए OpenGL एपीआई पर आधारित था. यह बहुत समय पहले की बात है! आप कल्पना कर सकते हैं कि तब से लेकर अब तक, जीपीयू हार्डवेयर में काफ़ी बदलाव हुए हैं.
इस बदलाव को पूरा करने के लिए, नए एपीआई डेवलप किए गए हैं, ताकि आधुनिक जीपीयू हार्डवेयर के साथ बेहतर तरीके से इंटरैक्ट किया जा सके. Direct3D 12, Metal, और Vulkan जैसे एपीआई. इन नए एपीआई ने जीपीयू प्रोग्रामिंग के लिए, नए और ज़रूरत के हिसाब से इस्तेमाल किए जाने वाले उदाहरणों को सपोर्ट किया है. जैसे, मशीन लर्निंग में विस्फोट और रेंडरिंग एल्गोरिदम में बढ़ोतरी. WebGPU, मॉडर्न एपीआई के इस नए क्लास को वेब पर लाने वाले, WebGL का बाद में बनाया गया है.
WebGPU, ब्राउज़र में जीपीयू प्रोग्रामिंग की कई नई संभावनाएं अनलॉक करता है. यह मॉडर्न जीपीयू हार्डवेयर के काम करने के तरीके को बेहतर तरीके से दिखाता है. साथ ही, यह आने वाले समय में जीपीयू की बेहतर सुविधाओं की नींव भी रखता है. एपीआई को साल 2017 से, W3C के "GPU for the Web" ग्रुप में शामिल किया जा रहा है. साथ ही, इसे Apple, Google, Mozilla, Microsoft, और Intel जैसी कई कंपनियों के साथ मिलकर बनाया गया है. छह साल बाद, हमें यह बताते हुए खुशी हो रही है कि वेब प्लैटफ़ॉर्म की सबसे बड़ी सुविधाओं में से एक अब उपलब्ध है!
WebGPU, फ़िलहाल Chrome 113 में ChromeOS, macOS, और Windows पर उपलब्ध है. हालांकि, इसे अन्य प्लैटफ़ॉर्म पर जल्द ही लॉन्च किया जाएगा. खास तौर पर, Chromium में योगदान देने वाले उन लोगों और Intel का बहुत-बहुत धन्यवाद जिन्होंने इसमें मदद की.
आइए, अब WebGPU के कुछ रोमांचक इस्तेमाल के उदाहरणों पर नज़र डालते हैं.
रेंडरिंग के लिए, जीपीयू के नए वर्कलोड अनलॉक करें
कंप्यूट शेडर जैसी WebGPU सुविधाएं, जीपीयू पर पोर्ट किए जाने वाले एल्गोरिदम की नई क्लास को चालू करती हैं. उदाहरण के लिए, ऐसे एल्गोरिदम जो सीन में ज़्यादा डाइनैमिक जानकारी जोड़ सकते हैं, असल घटनाओं को सिम्युलेट कर सकते हैं वगैरह! कुछ वर्कलोड भी हैं, जो पहले सिर्फ़ JavaScript में ही किए जा सकते थे, जिन्हें अब जीपीयू में ले जाया जा सकता है.
नीचे दिए गए वीडियो में, मार्चिंग क्यूब एल्गोरिदम को दिखाया गया है, जिसका इस्तेमाल इन मेटाबॉल की सतह को ट्राइऐंग्युलेट करने के लिए किया जा रहा है. JavaScript में चलने वाले वीडियो के पहले 20 सेकंड में, एल्गोरिदम सिर्फ़ 8 FPS (फ़्रेम प्रति सेकंड) पर चलने वाले पेज के साथ परफ़ॉर्म नहीं करता है. इससे, वीडियो ऐनिमेशन में तेज़ी से बदलाव होता है. JavaScript में इसे बेहतर परफ़ॉर्म करने के लिए, हमें जानकारी के लेवल को काफ़ी कम करना होगा.
यह रात और दिन का अंतर होता है, जब हम एक ही एल्गोरिदम को कंप्यूट शेडर पर ले जाते हैं. यह वीडियो, 20 सेकंड बाद दिखता है. अब पेज 60 FPS (फ़्रेम प्रति सेकंड) पर बिना किसी रुकावट के चल रहा है. इसलिए, परफ़ॉर्मेंस में काफ़ी सुधार हुआ है. हालांकि, अन्य इफ़ेक्ट के लिए अब भी काफ़ी संख्या में परफ़ॉर्मेंस हेडरूम को मौजूद है. इसके अलावा, पेज का मुख्य JavaScript लूप अन्य कामों के लिए पूरी तरह से खाली हो जाता है, जिससे यह पक्का होता है कि पेज के साथ होने वाले इंटरैक्शन रिस्पॉन्सिव बने रहें.
WebGPU, ऐसे कॉम्प्लेक्स विज़ुअल इफ़ेक्ट भी चालू करता है जो पहले व्यावहारिक नहीं थे. नीचे दिए गए उदाहरण में, जिसे लोकप्रिय Babylon.js लाइब्रेरी में बनाया गया है, उसमें महासागर की सतह का पूरी तरह से जीपीयू पर सिम्युलेट किया जा रहा है. कई इंडिपेंडेंट तरंगों को एक-दूसरे के साथ जोड़कर, रियलिस्टिक डाइनैमिक बनाए जाते हैं. हालांकि, हर लहर को सीधे तौर पर सिम्युलेट करना बहुत महंगा होगा.
इसलिए, डेमो में फ़ास्ट फूरियर ट्रांसफ़ॉर्म नाम के ऐडवांस एल्गोरिदम का इस्तेमाल किया जाता है. सभी तरंगों को जटिल स्थिति वाले डेटा के रूप में दिखाने के बजाय, यह स्पेक्ट्रल डेटा का इस्तेमाल करता है जो कंप्यूटेशन करने के लिए ज़्यादा बेहतर तरीके से काम करता है. इसके बाद, हर फ़्रेम स्पेक्ट्रल डेटा से वेव की ऊंचाई दिखाने वाले पोज़िशनल डेटा में बदलने के लिए, फूरिये ट्रांसफ़ॉर्म का इस्तेमाल करता है.
मशीन लर्निंग का तेज़ अनुमान
WebGPU, मशीन लर्निंग को तेज़ी से आगे बढ़ाने में भी मदद करता है. हाल ही के सालों में यह जीपीयू का एक बड़ा इस्तेमाल बन गया है.
क्रिएटिव डेवलपर लंबे समय से, मशीन लर्निंग कंप्यूटेशन जैसे नॉन-रेंडरिंग काम करने के लिए, WebGL के रेंडरिंग एपीआई को दोबारा इस्तेमाल कर रहे हैं. हालांकि, इसे कंप्यूटेशन शुरू करने के लिए त्रिभुजों के पिक्सल बनाने की ज़रूरत होती है. साथ ही, सामान्य कामों के लिए इस्तेमाल की जाने वाली मेमोरी के ऐक्सेस के बजाय, टेक्स्चर में टेन्सर डेटा को सावधानी से पैक और अनपैक करने की ज़रूरत होती है.
इस तरह से WebGL का इस्तेमाल करने के लिए ज़रूरी है कि डेवलपर अपने कोड को किसी ऐसे एपीआई की उम्मीदों के हिसाब से अजीब तरीके से पूरा करें जो सिर्फ़ ड्रॉइंग के लिए डिज़ाइन किया गया हो. इसके साथ-साथ कंप्यूटेशन के बीच शेयर की गई मेमोरी ऐक्सेस जैसी बुनियादी सुविधाओं की कमी की वजह से डुप्लीकेट काम करना और परफ़ॉर्मेंस पर अच्छा असर नहीं पड़ता.
कंप्यूट शेडर, WebGPU की मुख्य नई सुविधा हैं और इन समस्याओं को दूर करते हैं. कंप्यूट शेडर ज़्यादा लचीले प्रोग्रामिंग मॉडल की सुविधा देते हैं. यह जीपीयू के बड़े पैमाने पर साथ चलने वाले फ़ॉर्मैट का फ़ायदा लेता है. साथ ही, रेंडरिंग की कार्रवाइयों के स्ट्रक्चर की वजह से सीमित नहीं होता है.
कंप्यूट शेडर की मदद से, शेडर के ग्रुप में डेटा और कंप्यूटेशन के नतीजों को शेयर किया जा सकता है. इससे परफ़ॉर्मेंस बेहतर होती है. इससे, इसी काम के लिए WebGL का इस्तेमाल करने की पिछली कोशिशों की तुलना में ज़्यादा फ़ायदा हो सकता है.
इससे, कितनी बेहतर परफ़ॉर्मेंस मिलती है, इसका एक उदाहरण TensorFlow.js में इमेज डिफ़्यूज़न मॉडल के शुरुआती पोर्ट से पता चलता है कि WebGL से WebGPU में जाने पर, कई तरह के हार्डवेयर की परफ़ॉर्मेंस को तीन गुना बढ़ा दिया जाता है. कुछ हार्डवेयर की जांच में, इमेज को 10 सेकंड से कम समय में रेंडर किया गया था. यह एक शुरुआती पोर्ट था. इसलिए, हमारा मानना है कि WebGPU और TensorFlow.js, दोनों में और भी सुधार किए जा सकते हैं! जानें कि साल 2023 में, Web ML में नया क्या है? Google I/O सेशन.
लेकिन WebGPU, जीपीयू की सुविधाओं को वेब पर लाने का काम नहीं करता.
JavaScript के लिए पहले डिज़ाइन किया गया
इस्तेमाल के उदाहरणों को चालू करने वाली सुविधाएं, कुछ समय से प्लैटफ़ॉर्म के खास डेस्कटॉप और मोबाइल डेवलपर के लिए उपलब्ध हैं. साथ ही, इन्हें वेब प्लैटफ़ॉर्म के स्वाभाविक हिस्से की तरह दिखाना हमारी चुनौती है.
WebGPU को, WebGL के साथ शानदार काम करने वाले एक दशक से भी ज़्यादा समय से डेवलपर की कोशिशों को ध्यान में रखकर बनाया गया था. हम समस्याओं को हल करने में कामयाब रहे. साथ ही, उनकी रुकावटों को दूर करने में भी कामयाब रहे. साथ ही, उनकी समस्याएं और उनके सुझाव, शिकायत या राय को इस नए एपीआई में शामिल किया गया.
हमने देखा कि WebGL के वैश्विक स्थिति के मॉडल ने मज़बूत, व्यवस्थित लाइब्रेरी और ऐप्लिकेशन बनाने की प्रक्रिया को मुश्किल और नाज़ुक बना दिया. इसलिए, WebGPU उस स्थिति को नाटकीय रूप से कम कर देता है जिस पर डेवलपर को जीपीयू कमांड भेजते समय ट्रैक रखने की ज़रूरत होती है.
हमने सुना है कि WebGL ऐप्लिकेशन को डीबग करना मुश्किल काम था, इसलिए WebGPU में ज़्यादा सुविधाजनक गड़बड़ी प्रबंधित करने के तरीके शामिल किए गए हैं, जिनसे आपके परफ़ॉर्मेंस पर कोई असर नहीं पड़ता. हमने यह पक्का करने के लिए भी कई कदम उठाए हैं कि एपीआई से मिलने वाले हर मैसेज को आसानी से समझा जा सके और उसके लिए कार्रवाई की जा सके.
हमने यह भी देखा कि बार-बार बहुत ज़्यादा JavaScript कॉल करना जटिल WebGL ऐप्लिकेशन के लिए एक अड़चन था. इस वजह से WebGPU API कम चैट वाला होता है. इसलिए, कम फ़ंक्शन कॉल से ज़्यादा काम आसानी से किया जा सकता है. हम हैवीवेट की पुष्टि करने पर फ़ोकस करते हैं, ताकि अहम ड्रॉ लूप को जितना हो सके उतना आसान रखा जा सके. हम रेंडर बंडल जैसे नए एपीआई भी उपलब्ध कराते हैं. इनकी मदद से, बड़ी संख्या में ड्रॉइंग के निर्देश पहले से रिकॉर्ड किए जा सकते हैं और एक बार कॉल करके उन्हें फिर से चलाया जा सकता है.
यह दिखाने के लिए कि बंडल को रेंडर करने जैसी सुविधा से कितना बड़ा बदलाव हो सकता है, यहां Babylon.js का एक और डेमो दिया गया है. उनका WebGL 2 रेंडरर सभी JavaScript कॉल को एक्ज़ीक्यूट कर सकता है, ताकि इस आर्ट गैलरी के सीन को एक सेकंड में करीब 500 बार रेंडर किया जा सके. यह बहुत अच्छा है!
हालांकि, उनका WebGPU रेंडरर एक सुविधा को चालू करता है, जिसे वे 'स्नैपशॉट रेंडरिंग' कहते हैं. WebGPU के ऊपर बना, बंडल को रेंडर करने में इस्तेमाल होने वाली इस सुविधा की मदद से, एक ही सीन को 10 गुना से भी ज़्यादा तेज़ी से सबमिट किया जा सकता है. ओवरहेड कम होने की वजह से WebGPU, ज़्यादा मुश्किल सीन रेंडर कर पाता है. साथ ही, ऐप्लिकेशन को JavaScript के साथ ज़्यादा काम करने की अनुमति भी देता है.
मॉडर्न ग्राफ़िक एपीआई, जटिलता के आधार पर काम करते हैं. साथ ही, इन्हें ऑप्टिमाइज़ करने के मौकों के साथ कारोबार को आसान बनाते हैं. दूसरी ओर WebGPU, क्रॉस-प्लैटफ़ॉर्म की सुविधा पर काम करता है. इसमें ज़्यादातर मामलों में, संसाधन सिंक करने जैसे मुश्किल विषयों को अपने-आप मैनेज किया जाता है.
इसका एक सुखद दुष्प्रभाव है कि WebGPU सीखना और उपयोग करना आसान है. यह इमेज और वीडियो लोड होने जैसी चीज़ों के लिए वेब प्लैटफ़ॉर्म की मौजूदा सुविधाओं पर निर्भर करता है. साथ ही, यह एसिंक्रोनस ऑपरेशन के लिए प्रोमिसेज़ जैसे लोकप्रिय JavaScript पैटर्न का इस्तेमाल करता है. इससे, बॉयलरप्लेट कोड की मात्रा को कम से कम रखने में मदद मिलती है. आपको स्क्रीन पर अपना पहला त्रिभुज 50 लाइनों से कम में दिख सकता है.
<canvas id="canvas" width="512" height="512"></canvas>
<script type="module">
const adapter = await navigator.gpu.requestAdapter();
const device = await adapter.requestDevice();
const context = canvas.getContext("webgpu");
const format = navigator.gpu.getPreferredCanvasFormat();
context.configure({ device, format });
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 shaderModule = device.createShaderModule({ code });
const pipeline = device.createRenderPipeline({
layout: "auto",
vertex: {
module: shaderModule,
entryPoint: "vertexMain",
},
fragment: {
module: shaderModule,
entryPoint: "fragmentMain",
targets: [{ format }],
},
});
const commandEncoder = device.createCommandEncoder();
const colorAttachments = [
{
view: context.getCurrentTexture().createView(),
loadOp: "clear",
storeOp: "store",
},
];
const passEncoder = commandEncoder.beginRenderPass({ colorAttachments });
passEncoder.setPipeline(pipeline);
passEncoder.draw(3);
passEncoder.end();
device.queue.submit([commandEncoder.finish()]);
</script>
नतीजा
WebGPU की मदद से, वेब प्लैटफ़ॉर्म पर मिलने वाली सभी नई संभावनाओं को देखकर अच्छा लगता है. हमें उम्मीद है कि हम WebGPU के लिए इस्तेमाल किए जाने वाले सभी नए और शानदार उदाहरण देखेंगे!
WebGL के आस-पास लाइब्रेरी और फ़्रेमवर्क का एक शानदार नेटवर्क बनाया गया है और वही नेटवर्क WebGPU को अपनाने के लिए उत्सुक है. कई लोकप्रिय JavaScript WebGL लाइब्रेरी में WebGPU के लिए सहायता उपलब्ध है या वह पहले से ही पूरी हो चुकी है. कुछ मामलों में WebGPU का फ़ायदा पाना, एक फ़्लैग को बदलने जितना आसान हो सकता है!
और यह Chrome 113 में पहली रिलीज़ बस एक शुरुआत है. हमारी शुरुआती रिलीज़ Windows, ChromeOS, और MacOS के लिए है. हालांकि, हमारी योजना है कि आने वाले समय में WebGPU को Android और Linux जैसे बाकी प्लैटफ़ॉर्म पर भी लाया जाए.
और सिर्फ़ Chrome टीम ही WebGPU लॉन्च नहीं कर रही है. Firefox और WebKit में भी लागू किया जा रहा है.
इसके अलावा, नई सुविधाएं पहले से ही W3C में बनाई जा रही हैं, जिन्हें हार्डवेयर में उपलब्ध होने पर दिखाया जा सकता है. उदाहरण के लिए: हम Chrome में मशीन लर्निंग की परफ़ॉर्मेंस को और ज़्यादा बेहतर बनाने के लिए, जल्द ही शेडर में 16 बिट फ़्लोटिंग पॉइंट नंबर के लिए सहायता और निर्देशों की DP4a क्लास को चालू करने वाले हैं.
WebGPU एक ऐसा एपीआई है जिसमें निवेश करने पर, उसकी परफ़ॉर्मेंस शानदार होती है. आज हम इसके फ़ायदों को सिर्फ़ बड़े लेवल पर ही कवर कर सकते हैं, लेकिन अगर आपको WebGPU के साथ शुरुआत करनी है, तो हमारे शुरुआती कोडलैब आपका पहला WebGPU ऐप्लिकेशन देखें. इस कोडलैब में, आप Conway के गेम ऑफ़ लाइफ़ का जीपीयू वर्शन बनाएंगे. यह कोडलैब आपको प्रोसेस के बारे में सिलसिलेवार तरीके से बताता है, ताकि आप इसे तब भी आज़मा सकें, जब यह पहली बार जीपीयू डेवलप किया जा रहा हो.
WebGPU सैंपल भी, एपीआई के बारे में जानने का एक अच्छा तरीका है. वे परंपरागत "हैलो ट्राईऐंगल" से लेकर ज़्यादा बेहतर रेंडरिंग और कंप्यूट पाइपलाइन तक, अलग-अलग तकनीकों का इस्तेमाल करते हैं. आखिर में, हमारे अन्य संसाधन देखें.