当前位置：文江博客话题详情

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

发布于 2024-10-11 05:48:06 字数 263 浏览 6 评论 0原文

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

alt text

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

英雄似剑 2024-10-18 05:48:06

我已经在 http://www.brainjam.ca/stackoverflow/webglspiral.html< 实现了您的动画/a>.如果您的浏览器不支持 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。净/z9EmN/

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.

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

回复收藏 0 原文

~没有更多了~