【WebGL】ノイズでいい感じに画像を切り替えるエフェクト
WebGLを使ったエフェクト紹介。ここでは画像を切り替える際に、途中でノイズを入れるエフェクトです。
ノイズ関数を使った画像切り替えエフェクト
以下のnoise-slideというエフェクトでは、GLSL 2D simplex noiseをFragmentShaderで使っています。
GLSL 2D simplex noiseは、MIT Licenseで使用可能です。
https://github.com/ashima/webgl-noise/blob/master/src/noise2D.glsl
2次元の変数でノイズパターンを編集できるので、画像切り替えの際のノイズパターンを横長にも縦長にも調整することができます。
他に、3次元変数を使えるGLSL 3D simplex noiseもあります。適用対象のオブジェクトに応じて使い分ければよいでしょう。
ノイズパターン画像を使用したエフェクト
ノイズ関数を使わず、自分で好きなパターン画像を使うこともできます。
このdisplace-slideでは、次のようなパターン画像を切り替え途中に使っています。横への縞々パターンなので、画像の切り替え方向もFragmentShaderで横方向に設定しました。
別の画像パターンを使った事例です。
こちらで使用したパターンが以下の通りのストライプです。ストライプを強調するためにFragmentShaderで縦方向に画像を切り替えてみました。
このように、画像切り替え時に好きなパターンを使うことができるので、いろいろ試したくなってしまいます。
今後も順次いろいろなパターンを追加していきます。
