【Three.js × Shader】リアルな水面アニメーションを実装してみた|光の揺らめきを表現するWeb演出
こんにちは!今回は 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サイトのヒーローヘ
0