WebGL × GLSL カスタムシェーダーによる画像トランジションの検証

WebGL表現を用いた高品質なビジュアルサイト制作を想定し、カスタムシェーダーによる画像トランジションエフェクトの技術検証デモを制作しました。

技術的特徴

・Three.jsの既製エフェクトではなく、RawShaderMaterialと独自のフラグメントシェーダーを実装。表現制御とパフォーマンスチューニングの余地を確保

・GSAP ScrollTriggerにより進行度を取得し、シェーダー内でノイズ関数を用いた歪みエフェクトを動的に生成

・慣性スクロールライブラリ(Lenis)との統合により、WebGLレンダリングとスクロールを同期

実装時の考慮点

・DOM要素とWebGLオブジェクトの位置同期

・リサイズ対応と描画タイミングの最適化