WebGL शेडर प्लेग्राउंड क्या है?

GLSL वर्टेक्स और फ़्रैगमेंट शेडर लिखें और WebGL के ज़रिए रेंडर किया गया परिणाम तुरंत देखें। कोई लोकल सेटअप ज़रूरी नहीं। शेडर प्रोग्रामिंग सीखने, इफ़ेक्ट प्रोटोटाइप करने या GPU त्वरित ग्राफ़िक्स आज़माने के लिए इस्तेमाल करें।

बिल्ट-इन uniform में एनिमेशन के लिए `u_time`, कैनवस के आकार के लिए `u_resolution`, पॉइंटर पोज़िशन के लिए `u_mouse`, रेंडर हुए फ़्रेम की गिनती के लिए `u_frame` और एक तैयार टाइल होने योग्य नॉइज़ टेक्सचर `sampler2D u_noise` मौजूद हैं। कोई भी इमेज अपलोड कीजिए — वह `sampler2D u_texture` से जुड़ जाएगी और फ़्रैगमेंट शेडर उसे सीधे सैम्पल कर सकेगा। दस प्रीसेट (gradient wave, plasma, circle SDF, noise tunnel, Mandelbrot, ray march sphere, metaballs, voronoi, starfield, worley cells), एनिमेशन गति स्लाइडर, लाइव FPS रीडआउट, ऑटो-कंपाइल टॉगल, टाइमलाइन रोकने वाला पॉज़ बटन, पूरा सोर्स साथ ले जाने वाला शेयर लिंक और मौजूदा फ़्रेम को PNG में निर्यात करने का विकल्प — सब इसी टूल में मिलता है।

उपयोग कैसे करें

1. एडिटर में अपना GLSL फ्रैगमेंट शेडर कोड लिखें या पेस्ट करें। एक डिफ़ॉल्ट शेडर पहले से लोड है।
2. टाइप करते समय लाइव प्रीव्यू अपने आप अपडेट होता है। बिल्ट-इन यूनिफ़ॉर्म में टाइम, रेज़ोल्यूशन और माउस पोज़ीशन शामिल हैं।
3. अपने शेडर को PNG स्क्रीनशॉट के रूप में एक्सपोर्ट करें या अपने WebGL प्रोजेक्ट में उपयोग के लिए कोड कॉपी करें।

कब उपयोग करें

• C++ या Three.js का लोकल प्रोजेक्ट बनाए बिना GLSL का सिंटैक्स सीखना।
• किसी फ़्रैगमेंट शेडर इफ़ेक्ट को गेम इंजन या वेबसाइट में ले जाने से पहले उसका प्रोटोटाइप बनाना।
• पोर्टफ़ोलियो, स्लाइड या सोशल पोस्ट के लिए एनिमेटेड बैकग्राउंड के स्टिल स्क्रीनशॉट बनाना।

परिणाम

पानी की तरंग प्रभाव का प्रोटोटाइप बनाने वाला गेम डेवलपर साइन वेव और टाइम यूनिफ़ॉर्म से फ़्रैगमेंट शेडर लिखता है। प्रीव्यू पैनल में एनिमेटेड परिणाम लाइव दिखता है।

अक्सर पूछे जाने वाले प्रश्न

इसके लिए C या ग्राफ़िक्स प्रोग्रामिंग आना ज़रूरी है?

GLSL एक छोटा C-जैसा भाषा है: लूप, कंडीशन और फ़्लोट गणित। C, Java या JavaScript से वाकिफ़ लोगों को सिंटैक्स पहचाने जैसा लगेगा। प्रीसेट शेडर में कमेंट हैं, इसलिए मानों को बदलते-बदलते GPU अनुभव के बिना भी शुरुआत हो सकती है।

मेरा शेडर कंपाइल हो गया पर प्रीव्यू बस काला है, क्यों?

अक्सर ये वजहें होती हैं: main के बाहर `gl_FragColor` में लिखना, `vec4` के बजाय `vec3` लौटाना, या noise फ़ंक्शन में शून्य से भाग देना। ब्राउज़र का कंसोल खोलें, WebGL कंपाइल सफल होने के बावजूद उपयोगी चेतावनियाँ छापता है।

क्या मैं टेक्सचर सैम्पल कर सकता हूँ या अपनी इमेज दे सकता हूँ?

हाँ। प्रिव्यू टूलबार में “इमेज अपलोड करें” दबाइए — कोई भी PNG या JPG `sampler2D u_texture` से जुड़ जाएगा। साथ चलने वाला float `u_hasTexture` इमेज तैयार होते ही 1.0 हो जाता है, ताकि शेडर तय कर सके कि टेक्सचर उपलब्ध है या नहीं। यही पैटर्न Shadertoy अपने चैनल इनपुट के लिए इस्तेमाल करता है।

कौन-सा WebGL वर्ज़न इस्तेमाल होता है?

WebGL 1 के साथ GLSL ES 1.0। यानी `in/out` की जगह `varying`, नामी आउटपुट की जगह `gl_FragColor` और इंटीजर टेक्सचर नहीं। WebGL 2 या डेस्कटॉप OpenGL 3+ के शेडर यहाँ चलने के लिए हल्के सिंटैक्स बदलाव माँगते हैं।

क्या कोई डेटा सर्वर पर भेजा जाता है?

नहीं। कंपाइलेशन और रेंडरिंग दोनों आपके GPU पर ब्राउज़र के ज़रिए होते हैं। शेडर का सोर्स पेज से बाहर नहीं जाता; अगर बिना कॉपी किए टैब बंद कर दिया तो कोड चला जाएगा।

संबंधित उपकरण