मैंने shader का उपयोग करके प्रभाव को डुप्लिकेट करने का प्रयास किया।
Shader00 Center: https://www.shadertoy.com/view/XsXSz2
Shader01 पक्षों: https://www.shadertoy.com/view/4sXSz2
:) आप कर सकते हैं, जैसा कि बाइट 56 ने कहा, तीन विमानों की स्थापना। एक विमान का सामना करने वाला कैमरा सीधे Shader00 के साथ आगे, और फिर Shader01 के साथ दो विमान, शायद रैंडीगौल के रूप में, ऊपर / नीचे गैर समान रूप से गहराई का भ्रम देने के लिए बढ़ाया गया।
मुझे विश्वास करना चाहिए कि वे आश्वस्त होने के लिए पर्याप्त 3 डी लुक देते हैं।
दोनों दो शेड्स बिल्कुल आपके youtube लिंक की तरह नहीं हैं (साथ ही वे रफ ड्राफ्ट से अधिक हैं)। हालांकि मेरा मानना है कि ये शेड्स, उम्मीद कर सकते हैं, आपको अपना खुद का संस्करण बनाने की जगह दे सकते हैं।
ट्यूटोरियल: एक साधारण स्ट्राइप पैटर्न कैसे बनाया जाए।
विमान के प्रत्येक बिंदु का समन्वय है। एक shader प्रभाव बनाने का प्रयास मूल रूप से विमान पर 2D गणित की कल्पना कर रहा है। यहाँ मैं एक सरल उदाहरण पेश करता हूँ।
//This shader will visualize coordinates
vec2 uv = gl_FragCoord.xy / iResolution.xy;
gl_FragColor = vec4(uv.x,uv.y,0,1);
रंग लाल x निर्देशांक का प्रतिनिधित्व करेगा और हरा रंग y समन्वय का प्रतिनिधित्व करेगा। अभी के लिए, हम सबसे सरल shader प्रभाव बनाना चाहते हैं; एक पट्टी। हमें इस ट्यूटोरियल के लिए uv.y मान की आवश्यकता नहीं होगी।
vec2 uv = gl_FragCoord.xy / iResolution.xy;
gl_FragColor = vec4(uv.x,0,0,1);
आप देख सकते हैं कि लाल रंग तीव्र हो जाता है क्योंकि यह दाईं ओर जाता है। ऐसा इसलिए है क्योंकि जब आप दाईं ओर जाते हैं तो समन्वय का x मान अधिक हो जाता है; बायाँ छोर x निर्देशांक 0 से शुरू होता है और दाएँ अंत x समन्वय 1 होता है।
चूँकि हमारे पास यह बुनियादी समझ है आइए कुछ "सहज" कोशिश करें
vec2 uv = gl_FragCoord.xy / iResolution.xy;
float color = 0.0;
if(uv.x < .5 ) color= 1.0 ;
gl_FragColor = vec4(color,0,0,1);
वहां आपके पास स्ट्राइप पैटर्न है। रुकिए ... यह बिल्कुल सही नहीं लगता। हां यह सिर्फ लाल और काला है। स्ट्राइप पैटर्न केवल दो रंग वर्गों से अधिक से मिलकर बनता है। वहाँ...!
vec2 uv = gl_FragCoord.xy / iResolution.xy;
float color = 0.0;
if(uv.x < .2 ||(uv.x >.4 && uv.x < .6) || (uv.x > .8 && uv.x <1.0 )) color= 1.0 ;
gl_FragColor = vec4(color,0,0,1);
लेकिन क्या होगा अगर हम एन नंबर की पट्टी बनाना चाहते हैं?
मैं जो प्रदर्शित करने का प्रयास कर रहा हूं वह यह है कि यदि आप पारंपरिक प्रोग्रामिंग "लॉजिक" के साथ shader प्रोग्रामिंग को देखने का प्रयास करते हैं तो आप असफल होने की संभावना है। जब यह shader की बात आती है, तो यह गणित के बारे में है।
गणित की बात करें तो, ऐसा कौन सा पैटर्न है जो "स्ट्राइप" पैटर्न जैसा दिखता है? दूसरे शब्दों में, धारियों की तरह दिखने वाला समीकरण क्या है? हाँ। य = पाप (एक्स)। हालाँकि हमारा X मान 0.0 ~ 1.0 से है यदि हम Y = sin (X) का उपयोग करना चाहते हैं, तो हम चाहते हैं कि हमारा x मान 0.0 ~ 6.28 (जो लगभग 2 PI है) से लेकर
vec2 uv = gl_FragCoord.xy / iResolution.xy;
float x = uv.x * 2.0 *PI;
float y = sin(x);
gl_FragColor = vec4(y,0,0,1);
अब हमारे पास एक समीकरण द्वारा उत्पन्न पैटर्न के संदर्भ में "धारी" है। हमें यह दृष्टिकोण क्यों लेना चाहिए? न केवल यह तेजी से हो सकता है, बल्कि यह "अगर" स्थितियों में एन की संख्या को स्ट्रिप करने के लिए "बदसूरत" लिखने की आवश्यकता को समाप्त करता है। यदि हम एक से अधिक स्ट्रिप चाहते थे, तो हम अधिकतम एक्स वैल्यू को और बढ़ाकर पैटर्न को बढ़ा सकते हैं।
vec2 uv = gl_FragCoord.xy / iResolution.xy;
float x = uv.x * (2.0 *PI * 10.0); //ta dan!
float y = sin(x);
gl_FragColor = vec4(y,0,0,1);
आप कह सकते हैं कि यह shader प्रारंभिक shader की तरह एकदम सही पट्टी का उत्पादन नहीं करता है, लेकिन वास्तव में, आपको बस इतना करना होगा कि आप अधिक उपयुक्त समीकरण लिख सकें!
vec2 uv = gl_FragCoord.xy / iResolution.xy;
float x = uv.x * (2.0 *PI * 10.0);
float y = sin(x) / abs(sin(x) );
gl_FragColor = vec4(y,0,0,1);
Weeee ~~~
अगला: लहराती पट्टी पैटर्न कैसे बनाएं।
