如何在WebGL中实现这种旋转螺旋？

Question

有人可以尝试将给定的动画实现到WebGL着色器示例中吗？对于像我这样学习WebGL的人来说会很棒.

资料来源:http://dvdp.tumblr.com/post/2664387637/110109

Answer 1

我已经在http://www.brainjam.ca/stackoverflow/webglspiral.html上实现了你的动画.如果您的浏览器不支持WebGL,它将为您提供"WebGL不受支持"消息.它改编自mrdoob创建的沙箱.基本思想是显示矩形表面(由两个三角形组成)并将着色器应用于曲面.

实际的着色器代码如下:

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/