जानें कि WebGPU, मशीन लर्निंग की परफ़ॉर्मेंस को तेज़ करने और बेहतर ग्राफ़िक रेंडरिंग के लिए, जीपीयू की क्षमता को कैसे अनलॉक करता है.
नए WebGPU API की मदद से, ग्राफ़िक्स और मशीन लर्निंग से जुड़े वर्कलोड में परफ़ॉर्मेंस में शानदार सुधार किए गए हैं. इस लेख में बताया गया है कि WebGL के मौजूदा सलूशन के मुकाबले, WebGPU कैसे बेहतर है. साथ ही, आने वाले समय में होने वाले बदलावों के बारे में भी बताया गया है. हालांकि, सबसे पहले यह जानना ज़रूरी है कि WebGPU को क्यों बनाया गया.
WebGPU के बारे में जानकारी
WebGL, Chrome में 2011 में आया था. वेब ऐप्लिकेशन को जीपीयू का फ़ायदा लेने की अनुमति देकर, WebGL वेब पर शानदार अनुभव देता है. जैसे, Google Earth, इंटरैक्टिव संगीत वीडियो, 3D रीयल-एस्टेट वॉकथ्रू वगैरह. WebGL, एपीआई के OpenGL फ़ैमिली पर आधारित था. इसे पहली बार 1992 में डेवलप किया गया था. यह बहुत समय पहले की बात है! और आप कल्पना कर सकते हैं कि उस समय से लेकर अब तक जीपीयू हार्डवेयर में काफ़ी बदलाव आया है.
इस बदलाव के साथ तालमेल बनाए रखने के लिए, एपीआई के नए वर्शन डेवलप किए गए. इनसे आधुनिक जीपीयू हार्डवेयर के साथ ज़्यादा बेहतर तरीके से इंटरैक्ट किया जा सकता है. Direct3D 12, Metal, और Vulkan जैसे एपीआई. इन नए एपीआई की मदद से, GPU प्रोग्रामिंग के लिए नए और ज़्यादा मांग वाले इस्तेमाल के उदाहरणों को शामिल किया जा सकता है. जैसे, मशीन लर्निंग में हुए बदलाव और रेंडरिंग एल्गोरिदम में हुई नई खोजें. WebGPU, WebGL का नया वर्शन है. यह वेब पर आधुनिक एपीआई की नई क्लास की बेहतर सुविधाएं उपलब्ध कराता है.
WebGPU की मदद से, ब्राउज़र में जीपीयू प्रोग्रामिंग की कई नई सुविधाएं मिलती हैं. इससे यह बेहतर तरीके से पता चलता है कि मॉडर्न जीपीयू हार्डवेयर कैसे काम करता है. साथ ही, आने वाले समय में जीपीयू की ज़्यादा बेहतर सुविधाओं की नींव भी रखी जा रही है. यह एपीआई, 2017 से W3C के "वेब के लिए GPU" ग्रुप में काम कर रहा है. यह एपीआई, Apple, Google, Mozilla, Microsoft, और Intel जैसी कई कंपनियों के सहयोग से बनाया गया है. अब छह साल तक काम करने के बाद, हमें यह बताते हुए खुशी हो रही है कि वेब प्लैटफ़ॉर्म में जोड़ी गई सबसे बड़ी सुविधाओं में से एक अब उपलब्ध हो गया है!
WebGPU की सुविधा, ChromeOS, macOS, और Windows पर Chrome 113 में आज से उपलब्ध है. यह सुविधा जल्द ही अन्य प्लैटफ़ॉर्म पर भी उपलब्ध होगी. Chromium में योगदान देने वाले अन्य लोगों और खास तौर पर Intel का बहुत-बहुत धन्यवाद जिन्होंने इस काम को पूरा करने में मदद की.
अब आइए, WebGPU के इस्तेमाल के कुछ दिलचस्प उदाहरणों पर नज़र डालें.
रेंडरिंग के लिए, जीपीयू के नए वर्कलोड अनलॉक करना
कंप्यूट शेडर जैसी WebGPU की सुविधाओं की मदद से, एल्गोरिदम की नई क्लास को जीपीयू पर पोर्ट किया जा सकता है. उदाहरण के लिए, ऐसे एल्गोरिदम जो सीन में ज़्यादा डाइनैमिक जानकारी जोड़ सकते हैं, भौतिक घटनाओं को सिम्युलेट कर सकते हैं वगैरह! यहां तक कि ऐसे वर्कलोड भी हैं जिन्हें पहले सिर्फ़ JavaScript में ही किया जा सकता था. अब उन्हें जीपीयू पर भेजा जा सकता है.
नीचे दिए गए वीडियो में, इन मेटाबॉल की सतह को ट्राइऐंग्युलेट करने के लिए, मार्चिंग क्यूब एल्गोरिदम का इस्तेमाल दिखाया गया है. वीडियो के शुरुआती 20 सेकंड में, जब JavaScript में एल्गोरिदम चलता है, तब सिर्फ़ आठ FPS (फ़्रेम प्रति सेकंड) पर चलने वाले पेज के हिसाब से वीडियो नहीं चलता. इस वजह से, ऐनिमेशन खराब हो जाता है. JavaScript में इसे बढ़िया परफ़ॉर्म करने के लिए हमें जानकारी का लेवल बहुत कम करना होगा.
जब हम उसी एल्गोरिदम को कंप्यूट शेडर पर ले जाते हैं, तो इसमें काफ़ी फ़र्क़ दिखता है. यह फ़र्क़, वीडियो में 20 सेकंड के बाद दिखता है. अब पेज का 60 FPS (फ़्रेम प्रति सेकंड) आसानी से काम करता है. इससे परफ़ॉर्मेंस में सुधार होता है. साथ ही, अन्य इफ़ेक्ट के लिए अब भी परफ़ॉर्मेंस में सुधार करने के लिए कई सुविधाएं मौजूद हैं. इसके अलावा, पेज का मुख्य JavaScript लूप, दूसरे कामों के लिए पूरी तरह से खाली हो जाता है. इससे यह पक्का किया जाता है कि पेज के साथ होने वाले इंटरैक्शन सही तरीके से काम करें.
WebGPU की मदद से, ऐसे जटिल विज़ुअल इफ़ेक्ट भी इस्तेमाल किए जा सकते हैं जो पहले संभव नहीं थे. यहां दिए गए उदाहरण में, लोकप्रिय Babylon.js लाइब्रेरी का इस्तेमाल करके, समुद्र की सतह को पूरी तरह से जीपीयू पर सिम्युलेट किया जा रहा है. असल डाइनैमिक, एक-दूसरे से जुड़ी कई अलग-अलग तरंगों को जोड़कर बनाए जाते हैं. हालांकि, हर लहर को सीधे सिम्युलेट करना बहुत महंगा होगा.
इसलिए, डेमो में फ़ास्ट फूरिये ट्रांसफ़ॉर्म नाम के एक ऐडवांस एल्गोरिदम का इस्तेमाल किया जाता है. यह सभी तरंगों को जटिल पोज़िशनल डेटा के तौर पर दिखाने के बजाय, स्पेक्ट्रल डेटा का इस्तेमाल करता है. यह डेटा, कैलकुलेशन करने के लिए ज़्यादा असरदार होता है. इसके बाद, हर फ़्रेम फ़ोरियर ट्रांसफ़ॉर्म का इस्तेमाल करके, स्पेक्ट्रल डेटा को पोज़िशनल डेटा में बदलता है. यह डेटा, लहरों की ऊंचाई दिखाता है.
मशीन लर्निंग का तेज़ी से अनुमान
WebGPU, मशीन लर्निंग को तेज़ करने में भी मददगार है. पिछले कुछ सालों में, जीपीयू का इस्तेमाल मुख्य रूप से मशीन लर्निंग के लिए किया जा रहा है.
क्रिएटिव डेवलपर, मशीन लर्निंग के हिसाब से गणना करने जैसे कामों के लिए, वेबजीएल के रेंडरिंग एपीआई का इस्तेमाल कर रहे हैं. हालांकि, इसके लिए कैलकुलेशन शुरू करने के तरीके के तौर पर त्रिकोण के पिक्सल ड्रॉइंग करने की ज़रूरत होती है. साथ ही, सामान्य मेमोरी ऐक्सेस करने के बजाय, टेंसर डेटा को ध्यान से पैक और अनपैक करने की ज़रूरत होती है.
इस तरह से WebGL का इस्तेमाल करने के लिए, डेवलपर को अपने कोड को सिर्फ़ ड्रॉइंग के लिए डिज़ाइन किए गए एपीआई की उम्मीदों के मुताबिक बनाना पड़ता है. साथ ही, कैलकुलेशन के बीच शेयर की गई मेमोरी के ऐक्सेस जैसी बुनियादी सुविधाओं की कमी की वजह से, डुप्लीकेट काम और परफ़ॉर्मेंस में कमी आती है.
कंप्यूट शेडर, WebGPU की मुख्य नई सुविधा है. इससे इन समस्याओं को हल किया जा सकता है. कंप्यूट शेडर, ज़्यादा लचीले प्रोग्रामिंग मॉडल की सुविधा देते हैं. यह जीपीयू की पूरी तरह पैरललेशन का फ़ायदा उठाते हैं. हालांकि, यह रेंडर करने के सख्त स्ट्रक्चर से बाधित नहीं होते.
कंप्यूट शेडर, शेडर वर्क के ग्रुप में डेटा शेयर करने और कंप्यूटेशन के नतीजे शेयर करने के ज़्यादा अवसर देते हैं, ताकि बेहतर तरीके से काम किया जा सके. इससे, एक ही काम के लिए WebGL का इस्तेमाल करने के पिछले प्रयासों की तुलना में काफ़ी फ़ायदे मिल सकते हैं.
एक उदाहरण के तौर पर, TensorFlow.js में इमेज डिफ़्यूज़न मॉडल का शुरुआती पोर्ट है. इसे WebGL से WebGPU पर माइग्रेट करने पर, अलग-अलग तरह के हार्डवेयर की परफ़ॉर्मेंस में तीन गुना बढ़ोतरी हुई. जिन हार्डवेयर की जांच की गई उनमें से कुछ पर इमेज 10 सेकंड से भी कम समय में रेंडर हो गई. यह शुरुआती पोर्ट था, इसलिए हमें लगता है कि WebGPU और TensorFlow.js, दोनों में और भी सुधार किए जा सकते हैं! 2023 में वेब एमएल में नया क्या है? देखें Google I/O सेशन.
हालांकि, WebGPU का मकसद सिर्फ़ वेब पर जीपीयू की सुविधाएं उपलब्ध कराना नहीं है.
JavaScript के लिए डिज़ाइन किया गया
इन इस्तेमाल के उदाहरणों को चालू करने वाली सुविधाएं, प्लैटफ़ॉर्म के हिसाब से डेस्कटॉप और मोबाइल डेवलपर के लिए कुछ समय से उपलब्ध हैं. हालांकि, इन सुविधाओं को इस तरह से दिखाना हमारी चुनौती थी कि वे वेब प्लैटफ़ॉर्म का एक सामान्य हिस्सा लगें.
WebGPU को डेवलप करने के लिए, WebGL के साथ एक दशक से ज़्यादा समय से काम कर रहे डेवलपर के अनुभव का इस्तेमाल किया गया है. हमने उनके सामने आने वाली समस्याओं, उनके सामने आने वाली रुकावटों, और उन समस्याओं को हल कर लिया है जो उन्होंने उठाए हैं. साथ ही, हमने उन सभी सुझावों को इस नए एपीआई में शामिल कर दिया है.
हमने देखा कि WebGL के ग्लोबल स्टेट मॉडल ने मज़बूत, कंपोज़ेबल लाइब्रेरी और ऐप्लिकेशन बनाने की प्रोसेस को मुश्किल और नाज़ुक बना दिया है. इसलिए, WebGPU की मदद से डेवलपर को GPU के निर्देश भेजते समय, स्टेटस को ट्रैक करने की ज़रूरत नहीं पड़ती.
हमने सुना है कि WebGL ऐप्लिकेशन को डीबग करने में बहुत दिक्कत होती थी. इसलिए, WebGPU में गड़बड़ी को मैनेज करने के ज़्यादा बेहतर तरीके शामिल हैं. ये तरीके आपके परफ़ॉर्मेंस पर असर नहीं डालते. हमने यह पक्का करने की पूरी कोशिश की है कि एपीआई से आपको जो भी मैसेज मिले वह आसान हो और उस पर कार्रवाई की जा सके.
हमने यह भी देखा कि जटिल WebGL ऐप्लिकेशन के लिए, अक्सर बहुत ज़्यादा JavaScript कॉल करने की वजह से समस्याएं आती थीं. इसका नतीजा यह होता है कि WebGPU API में ज़्यादा चैट नहीं होती है. इसलिए, कम फ़ंक्शन कॉल से ज़्यादा काम किया जा सकता है. हम शुरुआत में ही ज़्यादा समय लेने वाली पुष्टि करने पर ध्यान देते हैं. साथ ही, ड्रॉ लूप को जितना हो सके उतना छोटा रखते हैं. साथ ही, हम रेंडर बंडल जैसे नए एपीआई भी उपलब्ध कराते हैं. इनकी मदद से, ड्रॉइंग के कई निर्देशों को पहले से रिकॉर्ड किया जा सकता है और एक ही कॉल से उन्हें फिर से चलाया जा सकता है.
यह दिखाने के लिए कि रेंडर बंडल जैसी सुविधा से कितना नाटकीय अंतर आ सकता है, यहां Babylon.js की सहायता टीम का एक और डेमो दिया गया है. उनका WebGL 2 रेंडरर, इस आर्ट गैलरी के सीन को एक सेकंड में करीब 500 बार रेंडर करने के लिए, सभी JavaScript कॉल को पूरा कर सकता है. जो बहुत अच्छा है!
हालांकि, उनका WebGPU रेंडरर, स्नैपशॉट रेंडरिंग नाम की सुविधा चालू करता है. यह सुविधा, WebGPUs रेंडर बंडल के आधार पर बनाई गई है. इसकी मदद से, एक ही सीन को 10 गुना से ज़्यादा तेज़ी से सबमिट किया जा सकता है. इससे, WebGPU को ज़्यादा कॉम्प्लेक्स सीन रेंडर करने में मदद मिलती है. साथ ही, ऐप्लिकेशन को JavaScript के साथ-साथ और भी काम करने में मदद मिलती है.
मॉडर्न ग्राफ़िक्स एपीआई, कॉम्प्लेक्सिटी और ऑप्टिमाइज़ेशन के बेहतरीन अवसरों के लिए ट्रेड करने में आसान होते हैं. वहीं दूसरी ओर, WebGPU का मकसद, क्रॉस-प्लैटफ़ॉर्म के साथ काम करना है. साथ ही, यह ज़्यादातर मामलों में रिसोर्स सिंक करने जैसे मुश्किल विषयों को अपने-आप हैंडल करता है.
इसका एक फ़ायदा यह भी है कि WebGPU को सीखना और इस्तेमाल करना आसान है. यह इमेज और वीडियो लोड करने जैसी चीज़ों के लिए, वेब प्लैटफ़ॉर्म की मौजूदा सुविधाओं पर निर्भर करता है. साथ ही, एसिंक्रोनस ऑपरेशन के लिए, Promises जैसे जाने-पहचाने 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 के लिए है. हालांकि, हम आने वाले समय में Android और Linux जैसे बाकी प्लैटफ़ॉर्म पर WebGPU को उपलब्ध कराने की योजना बना रहे हैं.
WebGPU को लॉन्च करने पर सिर्फ़ Chrome की टीम ही काम नहीं कर रही है. Firefox और WebKit में भी इसे लागू करने की प्रोसेस जारी है.
इसके अलावा, W3C में नई सुविधाएं पहले से ही डिज़ाइन की जा रही हैं. ये सुविधाएं, हार्डवेयर में उपलब्ध होने पर इस्तेमाल की जा सकती हैं. उदाहरण के लिए: हम जल्द ही शेडर में 16 बिट फ़्लोटिंग पॉइंट नंबर के लिए सहायता और DP4a क्लास के निर्देश चालू करने वाले हैं, ताकि मशीन लर्निंग की परफ़ॉर्मेंस में और सुधार किए जा सकें.
WebGPU एक ऐसा एपीआई है जिसका इस्तेमाल करके, बेहतरीन परफ़ॉर्मेंस हासिल की जा सकती है. आज हमने इसके फ़ायदों के बारे में सिर्फ़ खास जानकारी दी है. अगर आपको WebGPU का इस्तेमाल शुरू करना है, तो आपका पहला WebGPU ऐप्लिकेशन कोडलैब देखें. इस कोडलैब में, आपको Conway's Game of Life का जीपीयू वर्शन बनाना होगा. इस कोडलैब में, आपको इस प्रोसेस के बारे में सिलसिलेवार तरीके से बताया गया है. इसलिए, भले ही आपने पहली बार GPU डेवलपमेंट किया हो, फिर भी इसे आज़माया जा सकता है.
एपीआई के बारे में जानने के लिए, WebGPU के सैंपल भी एक अच्छी जगह हैं. इनमें, "हैलो ट्राएंगल" से लेकर ज़्यादा बेहतर रेंडरिंग और कंप्यूट पाइपलाइन तक की कई तकनीकें शामिल हैं. आखिर में, हमारे दूसरे संसाधन देखें.