HGIMG4で画像を波紋で波立たせるポストエフェクトを実装したい
波紋というのは水に石などを投げたときにできる、輪になって広がっていく波の模様のことです。
その波紋を法線の向きとして実装できれば、その法線で画像が波紋で波立ったようなポストエフェクトが
できるのではないのかと思ったのですが、複雑でよく分かりません。
要はsin関数やcos関数等で生成される輪を、法線xを-1.0〜1.0で、法線yを-1.0〜1.0で波紋として描写すれば
波紋としての法線が生成できるのではないかと思います。
それから生成した波紋の数だけforでリピート処理をして法線を処理すれば、
波紋が波立ったような法線が生成できるのではないでしょうか。
以下のフラグメントシェーダーファイルはあくまで作りかけのイメージでしかないのですが、
こういった雰囲気のものを想定して作っていました。
p_normalRipple.frag
// Uniforms uniform texture2D u_texture; uniform float u_radius; // 波紋の発生中心位置のUV座標 uniform float u_power; // 波紋の高さの強さ uniform float u_time; // 経過時間 uniform float u_aspect; // 画面のアスペクト比。波紋を正円にする時に必要？ // Varyings varying vec2 v_texCoord; /* normalRipple_computeの引き数について uv = 波紋の発生中心位置のUV座標 radius = 波紋の半径 power = 波紋の高さの強さ time = 経過時間 */ vec3 normalRipple_compute (vec2 uv, float radius, float power, float time) { vec3 normal; // 法線 // 何らかの処理 return normal; } // main void main() { vec3 normal; // 波紋の数だけ繰り返す // RIPPLE_COUNTはdefsで指定する波紋の数 for (int i = 0; i < RIPPLE_COUNT; ++i) { normal += normalRipple_compute(v_texCoord, u_radius, u_power, u_time); } vec2 uv = normal.xy; vec3 result = sampler2D(u_texture, uv); gl_FragColor = vec4(result ,1.0); }
頂点シェーダーについてはポストエフェクトなため、通常と変わりません。
p_normalRipple.vert
// Attributes attribute vec3 a_position; attribute vec2 a_texCoord; attribute vec4 a_color; // Uniforms uniform mat4 u_projectionMatrix; // Varyings varying vec2 v_texCoord; void main() { gl_Position = u_projectionMatrix * vec4(a_position, 1); v_texCoord = a_texCoord; }
アドバイスお願い致します。
