जानें कि 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 में चलने वाले एल्गोरिदम को पेज के साथ तालमेल बैठाने में मुश्किल होती है. इस वजह से, पेज सिर्फ़ 8 एफ़पीएस पर चलता है और ऐनिमेशन में रुकावट आती है. JavaScript में इसकी परफ़ॉर्मेंस को बेहतर बनाए रखने के लिए, हमें जानकारी के लेवल को काफ़ी कम करना होगा.
जब हम उसी एल्गोरिदम को कंप्यूट शेडर पर ले जाते हैं, तो इसमें काफ़ी फ़र्क़ दिखता है. यह फ़र्क़, वीडियो में 20 सेकंड के बाद दिखता है. पेज अब 60 FPS पर आसानी से चल रहा है. इससे परफ़ॉर्मेंस में काफ़ी सुधार हुआ है. साथ ही, अन्य इफ़ेक्ट के लिए परफ़ॉर्मेंस में अब भी काफ़ी सुधार की गुंजाइश है. इसके अलावा, पेज का मुख्य JavaScript लूप, दूसरे टास्क के लिए पूरी तरह से खाली हो जाता है. इससे यह पक्का होता है कि पेज के साथ इंटरैक्शन रिस्पॉन्सिव बने रहें.
WebGPU की मदद से, ऐसे जटिल विज़ुअल इफ़ेक्ट भी इस्तेमाल किए जा सकते हैं जो पहले संभव नहीं थे. यहां दिए गए उदाहरण में, लोकप्रिय Babylon.js लाइब्रेरी का इस्तेमाल करके, समुद्र की सतह को पूरी तरह से जीपीयू पर सिम्युलेट किया जा रहा है. असल डाइनैमिक, एक-दूसरे से जुड़ी कई अलग-अलग तरंगों को जोड़कर बनाए जाते हैं. हालांकि, हर लहर को सीधे सिम्युलेट करना बहुत महंगा होगा.
इसलिए, डेमो में फ़ास्ट फ़ोरियर ट्रांसफ़ॉर्म नाम के बेहतर एल्गोरिदम का इस्तेमाल किया गया है. यह सभी तरंगों को जटिल पोज़िशनल डेटा के तौर पर दिखाने के बजाय, स्पेक्ट्रल डेटा का इस्तेमाल करता है. यह डेटा, कैलकुलेशन करने के लिए ज़्यादा असरदार होता है. इसके बाद, हर फ़्रेम में फ़ोरियर ट्रांसफ़ॉर्म का इस्तेमाल करके, स्पेक्ट्रल डेटा को पोज़िशनल डेटा में बदला जाता है. यह डेटा, लहरों की ऊंचाई दिखाता है.
तेज़ी से एमएल का अनुमान लगाना
WebGPU, मशीन लर्निंग को तेज़ करने में भी मददगार है. पिछले कुछ सालों में, जीपीयू का इस्तेमाल मुख्य रूप से मशीन लर्निंग के लिए किया जा रहा है.
क्रिएटिव डेवलपर, मशीन लर्निंग के हिसाब से गणना करने जैसे कामों के लिए, WebGL के रेंडरिंग एपीआई का इस्तेमाल कर रहे हैं. हालांकि, इसके लिए कैलकुलेशन शुरू करने के तौर पर, त्रिभुजों के पिक्सल को ड्रॉ करना ज़रूरी है. साथ ही, सामान्य तौर पर इस्तेमाल होने वाली मेमोरी ऐक्सेस करने के बजाय, टेक्सचर में टेंसर डेटा को ध्यान से पैक और अनपैक करना ज़रूरी है.
इस तरह से 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 में पहली बार रिलीज़ होने के बाद, इस सुविधा को और बेहतर बनाया जाएगा. फ़िलहाल, WebGPU की शुरुआती रिलीज़ Windows, ChromeOS, और macOS के लिए है. हालांकि, आने वाले समय में हम इसे Android और Linux जैसे अन्य प्लैटफ़ॉर्म पर भी उपलब्ध कराएंगे.
WebGPU को लॉन्च करने पर सिर्फ़ Chrome की टीम ही काम नहीं कर रही है. Firefox और WebKit में भी इसे लागू करने की प्रोसेस जारी है.
इसके अलावा, W3C में नई सुविधाएं पहले से ही डिज़ाइन की जा रही हैं. ये सुविधाएं, हार्डवेयर में उपलब्ध होने पर इस्तेमाल की जा सकती हैं. उदाहरण के लिए: हम Chrome में शेडर में 16 बिट फ़्लोटिंग पॉइंट नंबर के लिए सहायता और DP4a क्लास के निर्देशों को जल्द ही चालू करने जा रहे हैं, ताकि मशीन लर्निंग की परफ़ॉर्मेंस को और बेहतर बनाया जा सके.
WebGPU एक बेहतरीन एपीआई है. इसमें काम करने पर, बेहतरीन परफ़ॉर्मेंस मिलती है. आज हमने इसके फ़ायदों के बारे में सिर्फ़ खास जानकारी दी है. अगर आपको WebGPU का इस्तेमाल शुरू करना है, तो आपका पहला WebGPU ऐप्लिकेशन कोडलैब देखें. इस कोडलैब में, आपको Conway's Game of Life का जीपीयू वर्शन बनाना होगा. इस कोडलैब में, आपको इस प्रोसेस के बारे में सिलसिलेवार तरीके से बताया गया है. इसलिए, भले ही आपने पहली बार GPU डेवलपमेंट किया हो, फिर भी इसे आज़माया जा सकता है.
एपीआई के बारे में जानने के लिए, WebGPU के सैंपल भी एक अच्छी जगह हैं. इनमें, "हैलो ट्राएंगल" से लेकर ज़्यादा बेहतर रेंडरिंग और कंप्यूट पाइपलाइन तक की कई तकनीकें शामिल हैं. आखिर में, हमारे अन्य संसाधन देखें.