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