This is a visual demo project built with Three.js and GLSL shaders, showcasing animated flag wave effects with optional pole-based falloff. The project features an interactive GUI to control wind bands, gust intensity, lighting direction, and pole effects.
⚠️ This is a trial project created as part of my journey to master advanced techniques in Three.js and GLSL shader programming.
- Three.js – 3D rendering engine
- GLSL – for custom vertex and fragment shaders
- lil-gui – UI controls
OrbitControls– for scene navigation- Custom banded noise waves & pole-based displacement falloff
-
Clone the repository
git clone https://github.com/rachet-khanal/animated-flag-threejs-demo.git cd flag-wave-demo -
Install dependencies This project assumes you're using a bundler like Vite, Parcel, or Webpack. For example with Vite:
npm install npm run dev
-
Open in browser Navigate to
http://localhost:5173/(or the URL shown in your terminal)
- Dynamic flag wave animation using banded gusts
- Light direction control that affects both shader and pole
- Pole toggle with wave falloff effect
- Supports alpha-mapped flags (e.g., PNGs with transparency)
- Fully interactive via GUI controls
- Wave Bands – Number of wind wave bands
- Gust Intensity – Controls turbulence
- Light Direction & Strength – Affects shading and pole highlights
- Enable Pole – Toggle pole + wave falloff
- Pole Falloff – Adjust distance-based wave strength
├── components/
│ └── FlagMesh.js # Generates flag geometry and materials
├── shaders/
│ ├── vertex.glsl # Custom vertex shader for waving
│ └── fragment.glsl # Texture and alpha handling
├── utils/
│ └── sizes.js # Responsive camera/resizing logic
├── static/
│ └── flags/ # Flag images with optional alpha maps
├── public/
│ └── screenshot.webp
├── main.js # Entry point, sets up scene & GUI
└── index.html
- Flag icons sourced from flagdownload.com
- Realistic cloth simulation
- Environment reflection on pole
- Performance tuning for mobile
Feel free to reach out if you'd like to collaborate or give feedback!