Jak zaimplementować tę spiralę obrotową w WebGL?

Question

Czy ktoś mógłby zaimplementować daną animację w przykładzie modułu cieniującego WebGL? Byłoby wspaniale dla ludzi uczących się WebGL jak ja.

Źródło: http://dvdp.tumblr.com/post/2664387637/110109

Answer 1

I zostały wdrożone animacji na http://www.brainjam.ca/stackoverflow/webglspiral.html. Otrzymasz komunikat "WebGL nie jest obsługiwany", jeśli twoja przeglądarka nie obsługuje WebGL. Jest dostosowany z sandbox created by mrdoob. Podstawową ideą jest pokazanie prostokątnej powierzchni (składającej się z dwóch trójkątów) i zastosowanie modułu cieniującego na powierzchni.

Rzeczywisty kod shaderów jest następujący:

uniform float time; 
uniform vec2 resolution; 
uniform vec2 aspect; 

void main(void) { 

    vec2 position = -aspect.xy + 2.0 * gl_FragCoord.xy/resolution.xy * aspect.xy; 
    float angle = 0.0 ; 
    float radius = length(position) ; 
    if (position.x != 0.0 && position.y != 0.0){ 
     angle = degrees(atan(position.y,position.x)) ; 
    } 
    float amod = mod(angle+30.0*time-120.0*log(radius), 30.0) ; 
    if (amod<15.0){ 
     gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0); 
    } else{ 
     gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);      
    } 
} 

Spirala zmienia rozmiar z okna przeglądarki, ale można łatwo zdecydować się na stałym rozmiarze płótnie zamiast.

Aktualizacja: Tak dla zabawy, tutaj jest dokładnie to samo wdrożenie w jsfiddle: http://jsfiddle.net/z9EmN/