问题描述
有人可以尝试将给定的动画实现到WebGL着色器示例中吗？对于像我这样学习WebGL的人来说会很棒。
Could somebody try to implement given animation into WebGL shader example? It would be great for people learing WebGL like myself.
资料来源：
推荐答案
我已经在。如果您的浏览器不支持WebGL，它将为您提供WebGL不受支持消息。它改编自。基本思想是显示一个矩形表面（由两个三角形组成）并将着色器应用于曲面。
I've implemented your animation at http://www.brainjam.ca/stackoverflow/webglspiral.html. It will give you a "WebGL not supported" message if your browser does not support WebGL. It is adapted from a sandbox created by mrdoob. The basic idea is to show a rectangular surface (consisting of two triangles) and to apply the shader to the surface.
实际的着色器代码如下：
The actual shader code is as follows:
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 );
}
}
螺旋用浏览器窗口调整大小，但你可以很容易选择固定大小的画布。
The spiral resizes with the browser window, but you could easily opt for a fixed size canvas instead.
更新：只是为了好玩，这里是jsfiddle中完全相同的实现：
Update: Just for fun, here's the exact same implementation in a jsfiddle: http://jsfiddle.net/z9EmN/
这篇关于如何在WebGL中实现这种旋转螺旋？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！