こんにちは！
今回は Three.js と Shader（GLSL） を使って、
まるで本物の水のように光がゆらめくアニメーションを実装してみました。
WebサイトやLPで“印象に残る演出”を作りたい方には、
こうしたShaderを活用したエフェクトがとてもおすすめです。
💡 実装のポイント
このアニメーションは、
HTML / CSS / JavaScript だけで動作するWebGLシェーダーを利用しています。
具体的には：
Three.js で描画領域（Plane）を作成
フラグメントシェーダー内で波の干渉を再現
sin関数を使って光の模様を時間で変化
白と青のトーンを重ねて水面の反射を表現
// 光の強さと色の合成部分
float light = pow(abs(w), 2.5);
light = smoothstep(0.4, 0.9, light);
vec3 water = vec3(0.0, 0.35, 0.65); // 水の青
vec3 caustic = vec3(1.0); // 光の反射
vec3 color = mix(water, caustic, light);
このわずか数行で、
水に反射する光の「まだら模様」がリアルに再現されます✨
🌀 表現の工夫
波紋が自然に見えるように、複数方向の波を干渉させる
時間(u_time) によって動きが絶えず変化
白い光の量を抑えて、より落ち着いた深みのある水色に調整
見た目以上にロジックはシンプルで、
少しの数式でリアルな自然表現を実現できるのがShaderの魅力です。
💻 応用例
このようなShaderエフェクトは、
Webサイトのヒーローヘッダー（トップの背景）
ポートフォリオサイトの演出
スクロールアニメーションと組み合わせた背景
などにも応用可能です。
「動きで印象を残すWebデザイン」にピッタリです。
🚀 制作・修正のご依頼も受付中
このようなShaderアニメーションや、
Three.js / Canvas / CSSアニメーションなどを使った
Web演出の実装・デザイン修正のご依頼も受け付けています。
Webサイトをもっと印象的にしたい
背景に動きをつけたい
3DやShaderを取り入れてみたい
そんな方はぜひご相談ください！
