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

Question

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

स्रोत: http://dvdp.tumblr.com/

यह भी देखें: How to implement this rotating spiral in WebGL?

Answer 1

खैर, यह मजेदार था। :)

एक WebGL डेमो यहाँ उपलब्ध है: http://boblycat.org/~knute/webgl/tunnel/

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

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

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

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

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

टुकड़ा शेडर कोड:

#ifdef GL_ES 
precision highp float; 
#endif 

const float PI = 3.14159265358979323846264; 
const float TWOPI = PI*2.0; 

const vec4 WHITE = vec4(1.0, 1.0, 1.0, 1.0); 
const vec4 BLACK = vec4(0.0, 0.0, 0.0, 1.0); 

const vec2 CENTER = vec2(0.0, 0.0); 

const int MAX_RINGS = 30; 
const float RING_DISTANCE = 0.05; 
const float WAVE_COUNT = 60.0; 
const float WAVE_DEPTH = 0.04; 

uniform float uTime; 
varying vec2 vPosition; 

void main(void) { 
    float rot = mod(uTime*0.0006, TWOPI); 
    float x = vPosition.x; 
    float y = vPosition.y; 

    bool black = false; 
    float prevRingDist = RING_DISTANCE; 
    for (int i = 0; i < MAX_RINGS; i++) { 
     vec2 center = vec2(0.0, 0.7 - RING_DISTANCE * float(i)*1.2); 
     float radius = 0.5 + RING_DISTANCE/(pow(float(i+5), 1.1)*0.006); 
     float dist = distance(center, vPosition); 
     dist = pow(dist, 0.3); 
     float ringDist = abs(dist-radius); 
     if (ringDist < RING_DISTANCE*prevRingDist*7.0) { 
      float angle = atan(y - center.y, x - center.x); 
      float thickness = 1.1 * abs(dist - radius)/prevRingDist; 
      float depthFactor = WAVE_DEPTH * sin((angle+rot*radius) * WAVE_COUNT); 
      if (dist > radius) { 
       black = (thickness < RING_DISTANCE * 5.0 - depthFactor * 2.0); 
      } 
      else { 
       black = (thickness < RING_DISTANCE * 5.0 + depthFactor); 
      } 
      break; 
     } 
     if (dist > radius) break; 
     prevRingDist = ringDist; 
    } 

    gl_FragColor = black ? BLACK : WHITE; 
}