shader作品01

シェーダでできる表現のデモです。
スクロールに応じて画像が歪みます。

右上のUIで歪みの強さと
スクロールの速さを変更できます。
画像の歪みが変化するので
楽しんでください。

Three.jsを使いHTMLの画像と同期させて、
メッシュとして描画してます。

このアニメーションは、JavaScriptでスクロール量を取得し、
その値をThree.jsで生成するメッシュのマテリアルの「uniform」としてシェーダに渡すことで実現しています。
シェーダ側では、そのスクロール量をもとに歪みの強さをコントロールしています。

シェーダでは、sin関数を使って波の形を作り、その値を頂点の位置(y方向)やUV座標に加えることで、画像が波打つような動きを生み出しています。

これによりユーザーのスクロールに連動した、滑らかでインタラクティブなビジュアル表現を実現しています。