javascript - How to implement this tunnel like animation in WebGL? -

WebGL में एनीमेशन की तरह इस सुरंग को कैसे कार्यान्वित करें?

स्रोत:

यह भी देखें:

अच्छा, यह मजेदार था। :)

एक वेबजीएल डेमो यहां उपलब्ध है:

मुख्य एल्गोरिद्म टुकड़ा शेडर में है मूल विचार एक ब्लैक रिंग्स / सर्किलों पर लोट के लिए है, जो बड़े से छोटा है, यहां तक ​​कि एक सुरंग जैसा प्रभाव पैदा करने के लिए केंद्र को ऑफसेट कर रहा है।

किसी भी पिक्सेल को देखते हुए, हम जांच कर सकते हैं कि क्या पिक्सेल एक ब्लैक पिक्सेल के लिए उम्मीदवार बनने के लिए अंगूठी के पास पर्याप्त है या नहीं यदि यह अंगूठी के बाहर है, तो बड़े रिंगों को देखने से बचने के लिए लूप को तोड़ दें।

पिछला (बाह्य) सर्कल से दूरी का इस्तेमाल अंगूठियों के करीब होने पर एक साथ "निचोड़" करने के लिए किया जाता है, यह एक 3D सतह का भ्रम पैदा करने में मदद करता है।

प्रत्येक अंगूठी का लहराती पैटर्न निश्चित रूप से एक साइन वक्र है। पिक्सेल का कोण (सर्कल सेंटर की तुलना में) प्रत्येक अंगूठी के लहराती पैटर्न को एनिमेट करने के लिए एक समान समय पैरामीटर के साथ मिलाया जाता है।

और अंत में, विभिन्न मापदंडों और रूपांतरण कार्यों जैसे बहुत सारे प्रयोग होते थे पॉव () लक्ष्य एनीमेशन के नतीजे नतीजे पाने के लिए यह सही नहीं है, लेकिन बहुत करीबी है।

टुकड़ा शाader कोड:

  #ifdef GL_ES सटीक हाईप फ्लोट; #endif const फ्लोट पीआई = 3.14159265358979323846264; Const फ्लोट TWOPI = PI * 2.0; Const vec4 व्हाईट = वीसी 4 (1.0, 1.0, 1.0, 1.0); Const vec4 काला = vec4 (0.0, 0.0, 0.0, 1.0); Const vec2 केंद्र = वीसी 2 (0.0, 0.0); Const int MAX_RINGS = 30; Const फ्लोट RING_DISTANCE = 0.05; Const फ्लोट WAVE_COUNT = 60.0; Const फ्लोट WAVE_DEPTH = 0.04; वर्दी फ्लोट यूटाइम; वीसी 2 vPosition बदलती; शून्य मुख्य (शून्य) {फ्लोट सड़ांध = आधुनिक (यूटाईम * 0.0006, TWOPI); फ्लोट एक्स = vPosition.x; फ्लोट y = vPosition.y; बूल काला = गलत; फ्लोट प्रारंल्डिंग = RING_DISTANCE; के लिए (इंट आई = 0; आई & lt; MAX_RINGS; i ++) {vec2 केंद्र = वीसी 2 (0.0, 0.7 - RING_DISTANCE * फ्लोट (i) * 1.2); फ्लोट त्रिज्या = 0.5 + RING_DISTANCE / (पाउ (फ्लोट (आई + 5), 1.1) * 0.006); फ्लोट डिस्ट = दूरी (केंद्र, vPosition); Dist = पाउ (dist, 0.3); फ्लोट रिंगडस्ट = एब्स (डिस्ट-रेडियस); अगर (ringDist & lt; RING_DISTANCE * prevRingDist * 7.0) {फ्लोट कोण = आना (y - center.y, x - center.x); फ्लोट मोटाई = 1.1 * एब्स (डिस्ट-रेडियस) / प्रीआरिंगडीस्ट; गहराई फ्लोट करें = WAVE_DEPTH * पाप ((कोण + सड़ांध * त्रिज्या) * WAVE_COUNT); यदि (dist & gt; त्रिज्या) {काला = (मोटाई & lt; RING_DISTANCE * 5.0 - गहराई वाला * 2.0); } और {काला = (मोटाई & लेफ्टिनेंट; RING_DISTANCE * 5.0 + गहराई वाला); } टूटना; } यदि (dist & gt; त्रिज्या) तोड़; PrevRingDist = ringDist; } Gl_FragColor = काला? काला सफ़ेद; }