【Three.js × Shader】リアルな波模様の背景アニメーション。 🌊 概要 Three.js と GLSL（シェーダー）を使用して制作した、 リアルな“水面の光のゆらめき”を再現した背景アニメーション素材です。 光が水の表面で反射し、時間とともに揺らぐ自然な模様を表現しています。 Webサイトの背景、動画素材、ビジュアル演出などにご利用いただけます。 💻 特徴 Three.js + GLSLで実装 光がゆらめくリアルな水面を再現 ループアニメーションとして利用可能 色味や揺れの速さを簡単に調整可能 軽量でWebでも滑らかに動作 🧩 内容物 /water-animation/ ├── index.html ├── style.css ├── script.js 🧠 技術ポイント ShaderMaterial を使用し、複数の波干渉を合成 uniform float u_time により時間経過で波が動く mix() 関数を使って青と白のコントラストを自然にブレンド WebGLの基本学習素材としても最適 🎨 カスタマイズ例 波の速さを変更：u_time の係数を調整 色の変更：vec3 water = vec3(...); の値を編集 スケール感変更：vUv * 6.0; の部分を調整 🪄 利用シーン Webデザイナー・コーダーの 背景アニメーション素材 YouTube / VJ向け ループ映像素材 自作アプリやポートフォリオサイトの 演出効果 ShaderやThree.jsの 学習用素材 ⚙️ 動作環境 Google Chrome / Edge / Safari（最新版推奨） PCブラウザ推奨（スマホでも再生可能） 💬 ライセンス 個人・商用利用OK 素材の再配布・販売は禁止 クレジット表記不要（任意） ✉️ 制作者より この水面エフェクトは、「現実的な水の光の模様」を目指してGLSLで制作しました。 Three.js学習者の方にも、作品背景としてもおすすめです。 ココナラやnoteでも、実装解説を公開しています。 ご希望の方はURLからチェックしてみてください✨