Comment implémenter cette spirale tournante dans WebGL?

Quelqu'un pourrait-il essayer d'implémenter une animation donnée dans un exemple WebGL Shader? Ce serait génial pour les gens qui apprennent WebGL comme moi-même.Comment implémenter cette spirale tournante dans WebGL?

alt text

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

Source

2011-01-09 zproxy

Voici quelques expériences de toile HTML dans cette direction pour vous aider. La clé est de travailler en coordonnées polaires: [Spiral 1] (http://phrogz.net/tmp/canvas_spiral_1.html), [Spiral 2] (http://phrogz.net/tmp/canvas_spiral_2.html), [ Spirale 3] (http://phrogz.net/tmp/canvas_spiral_3.html), [Spirale 4] (http://phrogz.net/tmp/canvas_spiral_4.html). – Phrogz

Et [Spiral 5] (http://phrogz.net/tmp/canvas_spiral_5.html), légèrement plus proche de cette conception. – Phrogz

Nous nous attendons à ce que vous ayez tenté de résoudre ce problème par vous-même plutôt que de demander à la communauté d'arriver à une solution complète pour vous. Lorsque vous avez du code pour nous montrer que vous avez fait des efforts (même si ce n'est pas le cas), veuillez mettre à jour votre question et mettre un drapeau à rouvrir. Merci. – Kev

J'ai mis en œuvre votre animation à http://www.brainjam.ca/stackoverflow/webglspiral.html. Il vous donnera un message "WebGL non supporté" si votre navigateur ne supporte pas WebGL. Il est adapté d'un sandbox created by 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 shader réelle est la suivante:

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

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

Mise à jour: Juste pour le plaisir, voici la même implémentation exacte dans un jsFiddle: http://jsfiddle.net/z9EmN/

Source

2011-01-19 23:29:15 brainjam

Génial :) merci – zproxy

Version ShaderToy: https://www.shadertoy.com/view/4tfGD4 – Michaelangel007

ah oui. J'ai vu la version shadertoy et j'ai pensé. il y a des années j'ai demandé à ce sujet sur stackoverflow. et c'est ici. :) – zproxy

Comment implémenter cette spirale tournante dans WebGL?

Répondre

Questions connexes