Day 001 — Three.jsで作るドラッグ・ディストーション作品スライダー

Reference study: Slider drag and drop with distortion from Studio DOT / Awwwards
併せて、CSS Design AwardsのSmooothyのような「WebGL前提のスライダー/カルーセル」という考え方も参考にしています。

参考元のブランド、写真、コピー、レイアウトをそのまま再現するのではなく、ドラッグで作品を送る操作感、切り替え速度に連動するディストーション、作品情報のタイポグラフィ遷移を抽出し、オリジナルのWorksスライダーとして組み直しています。

参考にした表現

受賞系のWebGLスライダーで重要なのは、単に画像が横へ動くことではありません。

• ドラッグ中の速度が画面の歪みに反映される
• 指を離したあとに慣性が残る
• 次の作品へ切り替わる瞬間だけシェーダーの変形量が大きくなる
• タイトルやカウンターも同じタイミングで遷移する
• 画面全体をひとつのインタラクションとして設計する

この5点を今回の主役にしています。

完成形

Works、Campaign、Brand Siteのファーストビューにそのまま転用できるよう、フルスクリーンの作品スライダーにしました。

操作は次の4つです。

• Pointer drag
• Mouse wheel / trackpad
• 前後ボタン
• Arrow key

画像素材は使わず、Three.jsのCanvasTextureで4種類のオリジナルポスターを生成しています。

実装設計

通常のDOMスライダーでは、画像そのものをtranslateXします。

今回は画面いっぱいのPlaneを1枚だけ描画し、フラグメントシェーダーへ2枚のTextureを渡しています。

JavaScript側の責務は、

• 現在の作品
• 次の作品
• ドラッグ速度
• 遷移進行度
• 入力処理

までです。

画像の切り替え方と歪みはGPU側へ閉じています。

シェーダー / レンダリング

GLSL側では、遷移中だけUVへ水平方向のbendとwaveを追加しています。

特に重要なのが uVelocity です。

ドラッグが速いと変形量が増え、ゆっくり動かすと歪みも弱くなります。

この「入力速度 → シェーダーパラメータ」の変換が、単なるカルーセルとWebGLスライダーの大きな差になります。

実務での使いどころ

この構成は次の案件に転用しやすいです。

• 制作会社 / デザインスタジオのWorks
• ファッションブランドのLookbook
• 新商品キャンペーン
• ホテル / 不動産のビジュアルギャラリー
• アーティスト / 写真家のポートフォリオ

実案件ではCanvasTexture部分だけCMS画像や動画テクスチャへ置き換えられます。

調整パラメータ

最初に触るなら以下です。

• dt * 1.55: スライド遷移速度
• 0.10: bend量
• 0.012: waveの基準量
• uVelocity * 0.00075: 操作速度が歪みに与える強さ
• 1.75: devicePixelRatio上限

派手さを増やすより、まずbend量を小さくして質感を調整する方が実務では使いやすいです。

パフォーマンスとアクセシビリティ

描画は全画面Plane 1枚なので、3Dオブジェクトを大量に置く構成より軽量です。

一方で高DPI端末では負荷が上がるため、devicePixelRatioは1.75までに制限しています。

さらに、

• ResizeObserver
• pagehide cleanup
• texture / geometry / material / renderer dispose
• keyboard navigation
• prefers-reduced-motion

を考慮しています。

このあたりまで含めて、初めて「実案件へ持っていけるWebGL部品」として扱いやすくなります。