ポストプロセスで描く魚眼レンズエフェクトと無限スクロールのイメージギャラリー

note

Three.jsでポストプロセスの魚眼エフェクトをかけた、WebGLのインフィニティスクロール型イメージギャラリーです。グリッドに並べた板ポリゴンへ複数テクスチャを割り当て、ドラッグやタッチで上下左右に無限スクロールし、進行方向に連動した頂点変形の弛みと全画面の歪曲収差を重ねています。

複数行列に並べたベースグリッドを中心に置き、ジオメトリ数は固定のまま移動量に応じてモジュロ演算で座標を再配置し、途切れない無限スクロールにしています。ドラッグ量はワールド座標へ換算し、慣性は速度ベクトルの減衰とスムージングで滑らかに減速。頂点シェーダーで進行方向へ（横移動なら左右、縦移動なら上下）アーチ状に頂点をオフセットし、各タイルがわずかに弛む挙動を付与します。ポストプロセスではEffectComposerにカスタムシェーダーパスを追加し、魚眼レンズ効果を外部シェーダーで適用。オーバースキャンで端の伸びをキャンバス外に逃がしつつ、表示範囲を調整しています。

ビジュアルギャラリーやポートフォリオのインタラクティブ演出、ヒーローセクションの背景、プロダクトやビジュアル素材の一覧表示に向いています。魚眼の歪曲を抑えめにすれば立体的な奥行き感を付与でき、強めればレンズ効果を主役にした実験的な表現としても活用できます。

【使用ライブラリ】 Three.js