写真の上をなでてみてください。速く動かすほど大きく歪みます。
カーソルの移動速度を計測し、その勢いをノイズ関数による歪みの強さに変換しています。 ゆっくりなでると水面のように、速く払うと液体を掻き回したように反応します。
フラグメントシェーダーでカーソル周辺のUV座標をノイズでずらして画像を再サンプリング。RGBを少しずつ違う位置から取る「色収差」も加えて、レンズ越しのような質感にしています。
制作実績ギャラリー、写真家・美容系のポートフォリオに。ハイエンドなアワード受賞サイトで定番の演出で、静的なサムネイル一覧が一気に「作品」になります。
WebGL1で動くため対応環境が広い(非対応時は通常の画像を表示)。歪みは慣性つきで減衰するので、手を止めるとゆっくり元の写真に戻ります。1枚あたり約120行。