7

誰かが与えられたアニメーションをWebGLシェーダーの例に実装しようとすることができますか？私のようにWebGLを利用している人にとっては素晴らしいことです。

代替テキスト

出典：http ：//dvdp.tumblr.com/post/2664387637/110109

4

1 に答える 1

20

http://www.brainjam.ca/stackoverflow/webglspiral.htmlでアニメーションを実装しました。ブラウザが WebGL をサポートしていない場合、「WebGL はサポートされていません」というメッセージが表示されます。mrdoob によって作成されたサンドボックスから適応されます。基本的な考え方は、長方形のサーフェス (2 つの三角形で構成される) を表示し、シェーダーをサーフェスに適用することです。

実際のシェーダー コードは次のとおりです。

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-19T23:29:15.010 に答える