WebGLでこの回転スパイラルを実装する方法は？

Question

誰かがWebGLシェーダの例に与えられたアニメーションを実装しようとしますか？私自身のようにWebGLを習得している人にとっては素晴らしいことです。

出典：http://dvdp.tumblr.com/post/2664387637/110109

Answer 1

私はhttp://www.brainjam.ca/stackoverflow/webglspiral.htmlであなたのアニメーションを実装しました。ブラウザがWebGLをサポートしていない場合は、「WebGLがサポートされていません」というメッセージが表示されます。それはsandbox created by mrdoobから適合されています。基本的な考え方は、長方形のサーフェス（2つの三角形からなる）を表示し、シェーダをサーフェスに適用することです。次のように

実際のシェーダコードは次のとおりです。

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

スパイラルは、ブラウザのウィンドウをリサイズしていますが、簡単に代わり、固定サイズのキャンバスを選ぶことができます。

更新：楽しみのためだけに、ここでjsfiddleでまったく同じ実装だ：http://jsfiddle.net/z9EmN/