投稿者 tel | 2014年4月28日

WebGLで雨と波紋

WebGLで雨と波紋を作ってみた。

ripple_ss

http://jsdo.it/sapphire_al2o3/g0bj

解説

雨はライン、波紋は三角形2枚の板ポリゴン。

波紋のアニメーションはフラグメントシェーダでリング状の図形を描くことで表示している。
リング状の図形は「wgld.org GLSL で様々な図形や模様をレンダリングする」を参考にした。

varying vec4 vertexColor;
varying vec2 vertexCoord;
varying float vertexOffset;

void main() {
    float d = 0.02 * (1.0 - vertexOffset) / abs(vertexOffset - length(vertexCoord));
    vec4 c = vec4(vertexColor.rgb, d);
    gl_FragColor = c;
}

アニメーションのタイミングが同じにならないように頂点ごとにランダムなオフセット値を持たせてvertexOffsetに反映している。


コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中

カテゴリー

%d人のブロガーが「いいね」をつけました。