答案 0 :(得分:20)
我已在http://www.brainjam.ca/stackoverflow/webglspiral.html实施了动画。如果您的浏览器不支持WebGL,它将为您提供“WebGL不受支持”消息。它改编自sandbox created by 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/