Comment mettre en œuvre cette spirale en rotation dans WebGL? [fermé]

Question

pourrait essayer de quelqu'un pour mettre en œuvre l'animation donnée dans exemple de shaders WebGL? Ce serait formidable pour les gens comme moi Learing WebGL.

Source: http://dvdp.tumblr.com/post/2664387637/110109

Answer 1

Je l'ai mis en œuvre votre animation http://www.brainjam.ca/stackoverflow/webglspiral .html . Il vous donnera un message « WebGL pas pris en charge » si votre navigateur ne supporte pas WebGL. Il est adapté à partir d'un bac à sable créé par mrdoob . L'idée de base est de montrer une surface rectangulaire (composée de deux triangles) et d'appliquer le shader à la surface.

Le code de shaders réelle est comme suit:

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

Les redimensionne en spirale avec la fenêtre du navigateur, mais vous pouvez facilement opter pour une taille fixe toile à la place.

Mise à jour: Juste pour le plaisir, voici la mise en œuvre exacte même dans un jsFiddle: http: / /jsfiddle.net/z9EmN/