Create Realistic Water with Three.js - GLSL Shader Tutorial

To try everything Brilliant has to offer—free—for a full 30 days, visit https://brilliant.org/DanGreenheck/ . You’ll also get 20% off an annual premium subscription.

Learn how to create stunning realistic water effects in Three.js! In this comprehensive shader tutorial, we'll build a beautiful water shader from scratch using GLSL, Three.js, and modern JavaScript. You'll learn how to create dynamic waves using noise functions, implement depth-based color, fresnel reflections and caustics.

=========================================================================

Support me on Patreon ❤️ https://patreon.com/DanGreenheck

⚠️ Sign up for my upcoming course and receive a coupon for 30% OFF your first purchase!
[https://threejsroadmap.com](https://threejsroadmap.com/)

=========================================================================

💥 NOISE ALGORITHMS
https://gist.github.com/patriciogonzalezvivo/670c22f3966e662d2f83

📚 THREE.JS CRASH COURSE
https://youtu.be/HxPgbXlq1mo?si=u0OfPnqFPs9xP1y3

💻 SOURCE CODE
https://github.com/dgreenheck/threejs-water-shader

🎮 LIVE DEMO
https://dgreenheck.github.io/threejs-water-shader

=========================================================================

0:00 Intro
7:03 Starter Project Review
9:56 Water Class
23:22 Waves
48:37 Height-Based Color
50:05 Reflections
1:29:41 Caustics
1:46:44 Wrap-Up

This video was sponsored by Brilliant