如何在WebGL中实现这种旋转螺旋？ [英] How to implement this rotating spiral in WebGL?

问题描述

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

Could somebody try to implement given animation into WebGL shader example? It would be great for people learing WebGL like myself.

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

推荐答案

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

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中完全相同的实现： http://jsfiddle.net/z9EmN/

Update: Just for fun, here's the exact same implementation in a jsfiddle: http://jsfiddle.net/z9EmN/

这篇关于如何在WebGL中实现这种旋转螺旋？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！