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

有人可以尝试在WebGL着色器示例中实现给定的动画吗？对于像我一样学习WebGL的人来说，这将是一件好事。如何在WebGL中实现这种旋转螺旋？

alt text

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

2011-01-09 zproxy

的在这个方向上的一些HTML画布的实验来帮助你。关键是在极坐标系下工作：[Spiral 1]（http://phrogz.net/tmp/canvas_spiral_1.html），[Spiral 2]（http://phrogz.net/tmp/canvas_spiral_2.html），[ Spiral 3]（http://phrogz.net/tmp/canvas_spiral_3.html），[Spiral 4]（http://phrogz.net/tmp/canvas_spiral_4.html）。 – Phrogz 2011-01-09 18:55:36

和[Spiral 5]（http://phrogz.net/tmp/canvas_spiral_5.html）稍微接近这个设计。 – Phrogz 2011-01-10 03:38:06

我在http://www.brainjam.ca/stackoverflow/webglspiral.html实现动画。如果你的浏览器不支持WebGL，它会给你一个“WebGL不支持”的消息。它改编自sandbox created by mrdoob。基本思想是显示矩形表面（由两个三角形组成）并将着色器应用于表面。

实际的shader代码如下：

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/

来源

2011-01-19 23:29:15 brainjam

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

回答

相关问题