¿Cómo implementar este túnel como animación en WebGL?

Question

¿Cómo implementar este túnel como animación en WebGL?

Fuente: http://dvdp.tumblr.com/

Ver también: How to implement this rotating spiral in WebGL?

Answer 1

Bueno, esto fue divertido. :)

Un WebGL demo está disponible aquí: http://boblycat.org/~knute/webgl/tunnel/

El algoritmo principal se encuentra en el fragment shader. La idea básica es un bucle for que itera sobre los anillos/círculos negros, de grandes a pequeños, también compensando el centro para producir un efecto tipo túnel.

Dado cualquier píxel, podemos verificar si el píxel está lo suficientemente cerca del anillo como para ser candidato a un píxel negro o no. Si está fuera del anillo, rompa el ciclo para evitar ver anillos más pequeños a través de los más grandes.

La distancia desde el círculo anterior (exterior) se utiliza para "apretar" el patrón cuando los anillos están cerca, esto ayuda a crear la ilusión de una superficie 3D.

El patrón ondulado de cada anillo es, por supuesto, una curva sinusoidal. El ángulo del píxel (en comparación con el centro del círculo) se combina con un parámetro de tiempo uniforme para animar el patrón ondulado para cada anillo.

Y, por último, hubo mucha experimentación con diferentes parámetros y funciones de transformación como pow() para obtener el resultado cerca de la animación objetivo. No es perfecto, pero está bastante cerca.

El código fragmento shader:

#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; 
}