Browser-based 3D planner for shade sails (Sonnensegel)
Visualizes shadow casting, sail orientation, and furniture shading at any time of day and year.
| Full Application | 3D View |
|---|---|
 |
 |
| Control Panel — Garden & Time | Posts & Sails |
|---|---|
 |
 |
| Furniture Settings | Shadow & Daily Analysis |
|---|---|
 |
 |
Screenshots: Shade sail over garden furniture, summer morning, Freudenstadt
| 🏡 Real garden | Width, depth, 4 individually adjustable wall heights, north offset |
| ☀️ Accurate sun | Astronomically correct via SunCalc — location, date, time |
| 🪵 6 anchor posts | Direct X/Y/H input, color-coded, toggleable 3D labels |
| ⛵ Up to 2 sails | Triangle or rectangle, any size and color |
| 🔵 Auto-orientation | Horn quaternion best-fit: sail hangs correctly between posts automatically |
| 📐 Shadow area | Live calculation in m² per sail, clipped to garden boundary |
| 📊 Daily analysis | Integrated shadow area 10–18h in m²·h per sail |
| 🪑 Furniture shading | Table, chairs, pergola: shows whether each piece is in shade or sun |
| 🧍 Person figure | Draggable human figure with adjustable height (default 1.9 m) for scale reference |
| 🖱️ Click-to-scroll | Click any 3D element to scroll the settings panel to its controls |
| 🔢 Comma decimals | All numeric inputs accept German-style comma decimal separator |
| 🎬 Time animation | Play shadow movement across 24 hours |
| 🌍 Multilingual | DE / EN / RU — switchable at runtime |
| 💾 Auto-save | localStorage + JSON export/import |
| 🎯 Sail optimizer | Auto-places sails for maximum shadow on seating area (sun-tilt, raster + hill-climb, two-phase) |
| 📐 Evaluation rectangle | Draw a custom seating zone; optimizer and analysis target it |
| 📊 Union shadow analysis | Overlapping sail areas counted only once; overlap waste shown as warning |
| 🔀 Diversification optimizer | Top-K best Sail-1 positions × best Sail-2 per Sail-1 for true joint coverage |
| ↩️ Undo / Redo | 40-step history ring buffer |
# Option A: open directly (Chrome recommended)
open index.html
# Option B: local server (if file:// issues in Safari)
python3 -m http.server 8080
# → Browser: http://localhost:8080No build tool, no npm, no installation.
Only requirement: internet connection on first open (CDN libraries).
→ nomiknomik.github.io/shade-sail-simulator
┌─────────────────────────────────────────────────────┐
│ index.html (everything in one file) │
│ │
│ ┌─────────────┐ ┌──────────────────────────┐ │
│ │ Control │ │ Three.js 3D Scene │ │
│ │ Panel │───▶│ Garden · Posts · Sails │ │
│ │ (left │ │ Furniture · Shadows │ │
│ │ side) │ │ │ │
│ └─────────────┘ └──────────────┬────────────┘ │
│ │ │
│ ┌──────────▼─────────┐ │
│ │ SunCalc Library │ │
│ │ Azimuth+Elevation │ │
│ │ (real-time) │ │
│ └────────────────────┘ │
└─────────────────────────────────────────────────────┘
| Action | Input |
|---|---|
| 🔄 Rotate camera | Left mouse button + drag |
| 🔍 Zoom | Mouse wheel |
Right mouse button + drag |
|
| ✋ Move sail | Left mouse button on sail + drag |
| ⟲ ⟳ Rotate corner assignment | Buttons in post panel |
| 🔁 Double-click slider | Reset to default value |
| 🖱️ Move furniture | Left mouse button on furniture + drag |
| 🧍 Move person | Left mouse button on person + drag |
| 🎯 Click → settings | Click any 3D element to scroll panel to its settings |
Each post is positioned relative to the reference point (fixed at garden corner 3, +X/+Y). Enter X offset, Y offset, and absolute height H in meters.
Post input:
X (m) — horizontal offset from reference point
Y (m) — depth offset from reference point
H (m) — absolute height above ground
Rope lengths are calculated outputs, not inputs — they update live as you adjust posts.
| Library | Version | Purpose |
|---|---|---|
| Three.js | 0.160 | 3D rendering, PCFSoft Shadow Maps |
| SunCalc | 1.9 | Astronomical sun position |
| Vanilla JS | ES2022 | No framework, no build tool |
Sail algorithm: Horn quaternion best-fit registration.
Minimizes residuals between post positions and sail corners while keeping sail dimensions fixed.
The root coordinate system is relative to the user-defined reference point — matching how laser distance meter measurements are naturally taken.
shade-sail-simulator/
├── index.html ← complete app (~1716 lines)
├── README.md ← this file
├── DEVELOPER.md ← technical reference for contributors
├── CLAUDE.md ← AI context for Claude Code
├── ToDo.md ← change-request queue
├── JSON/ ← saved garden setups (JSON export/import)
└── screenshots/ ← app screenshots (see SCREENSHOTS.md)
Garden: 9.5 × 9.5 m · all 4 walls 3 m · North 229°
Location: Freudenstadt, DE (48.4636° N / 8.4111° E)
Post 1 🔴 X= 0.0 Y= 0.0 H=2.9 m
Post 2 🟠 X= −7.0 Y= 0.0 H=3.0 m
Post 3 🟡 X= −9.5 Y= 0.0 H=3.0 m
Post 4 🟢 X= −6.2 Y= −9.5 H=2.5 m
Post 5 🔵 X= 0.0 Y= −9.5 H=2.5 m
Post 6 🟣 X= 2.5 Y= 7.5 H=3.0 m
Sail 1: Triangle 6.4 / 8.0 / 4.0 m · Posts 4–5–1
Sail 2: (disabled)
- Draggable posts — move posts with mouse (like sail drag)
- Triangle validation — warning for invalid side lengths (a+b < c)
- Rope slack warning — when sail is significantly smaller than post spacing
- Additional furniture / objects (parasol, plant pots)
- Obstacles (house wall, tree)
- Sail is a flat rigid panel — no sag/catenary (by design)
- Shadow area is clipped to garden boundary via Sutherland-Hodgman algorithm
- Furniture shade test uses one measurement point per object (not entire surface)
- Sail drag is horizontal only (no height change via mouse)
| Version | Changes |
|---|---|
| 5.8 | Diversification optimizer: Top-K best Sail-1 positions × best Sail-2 per Sail-1, maximises joint coverage; free-posts mode (optimizer doesn't force posts to garden wall) |
| 5.3 | Union-based shadow analysis — overlapping areas counted only once; overlap waste (m²·h) highlighted as warning |
| 5.2 | Coarse-to-fine KPI refinement (polishKPI) after optimizer: 0.30 → 0.15 → 0.05 m hill-climb on real KPI for sub-grid precision |
| 5.1 | Two-phase sail optimizer — Phase 1: free raster search + sun-tilt + hill-climb; Phase 2: auto-place posts on garden walls; regression guard |
| 5.0 | Post-assignment optimizer (brute-force best corner mapping); undo/redo (41-step ring buffer); configurable evaluation rectangle (draw seating area) |
| 4.x | Sail tilt toward sun direction; dimension/position arrows; post-label toggle |
| 3.9 | Person figure (draggable, adjustable height); click-to-scroll (click 3D element → panel scrolls to settings); comma decimal separator for all numeric inputs; highlight animation on scrolled card |
| 3.8 | Multilingual UI: DE / EN / RU; enlarged 3D labels (13px / 96px); shadow area clipped to garden boundary (Sutherland-Hodgman); persistent daily analysis HUD overlay |
| 3.6 | 4 individually adjustable wall heights; pivot-corner rotation for furniture; location selector (6 cities); daily shade analysis (10–18h, m²·h) |
| 3.5 | Initial GitHub publish; README.md + DEVELOPER.md added |
| 3.4 | Removed laser/polar input; fixed reference point at corner 3; label toggle; sail dimensions as number inputs; Pergola furniture; furniture drag; sail physics fix |
| 3.3 | Initial version: garden, 6 posts, 2 sails, furniture, Horn quaternion best-fit, drag, localStorage |
Private project. No public release.
Made with ☀️ in Freudenstadt, Germany