Progressive WebGL/WebGPU visualizations with foundation → expert learning path
-
10 demos
+
13 demos
@@ -627,30 +628,54 @@
},
{
"number": 3,
- "title": "Animated Lighting",
- "description": "Dynamic lighting with moving light sources",
- "path": "threejs_viz/threejs_viz_2.html",
+ "title": "Earth Orbit Simulator - Moon System Integration",
+ "description": "Interactive demo",
+ "path": "threejs_viz/threejs_viz_11.html",
"type": "Foundation",
"techniques": []
},
{
"number": 4,
- "title": "Three.js Particle Universe",
- "description": "Technique: GPU-accelerated particle system",
- "path": "threejs_viz/threejs_viz_3.html",
+ "title": "Earth Orbit Simulator - Kepler's Laws Visualization",
+ "description": "Interactive demo",
+ "path": "threejs_viz/threejs_viz_12.html",
"type": "Foundation",
"techniques": []
},
{
"number": 5,
- "title": "Material Gallery",
- "description": "Comparing Three.js material types",
- "path": "threejs_viz/threejs_viz_4.html",
+ "title": "Earth Orbit Simulator - Enhanced Visual Realism (Iteration 13)",
+ "description": "Interactive demo",
+ "path": "threejs_viz/threejs_viz_13.html",
"type": "Foundation",
"techniques": []
},
{
"number": 6,
+ "title": "Animated Lighting",
+ "description": "Dynamic lighting with moving light sources",
+ "path": "threejs_viz/threejs_viz_2.html",
+ "type": "Intermediate",
+ "techniques": []
+ },
+ {
+ "number": 7,
+ "title": "Three.js Particle Universe",
+ "description": "Technique: GPU-accelerated particle system",
+ "path": "threejs_viz/threejs_viz_3.html",
+ "type": "Intermediate",
+ "techniques": []
+ },
+ {
+ "number": 8,
+ "title": "Material Gallery",
+ "description": "Comparing Three.js material types",
+ "path": "threejs_viz/threejs_viz_4.html",
+ "type": "Intermediate",
+ "techniques": []
+ },
+ {
+ "number": 9,
"title": "Three.js Visualization 5: Geometry Morphing",
"description": "Dynamic geometry transformation and scaling",
"path": "threejs_viz/threejs_viz_5.html",
@@ -658,7 +683,7 @@
"techniques": []
},
{
- "number": 7,
+ "number": 10,
"title": "Texture Mapping & Filter Comparison",
"description": "TextureLoader, minFilter, magFilter comparison",
"path": "threejs_viz/threejs_viz_6.html",
@@ -666,7 +691,7 @@
"techniques": []
},
{
- "number": 8,
+ "number": 11,
"title": "Interactive Crystal Garden",
"description": "OrbitControls for immersive 3D exploration",
"path": "threejs_viz/threejs_viz_7.html",
@@ -674,7 +699,7 @@
"techniques": []
},
{
- "number": 9,
+ "number": 12,
"title": "Particle Wave System",
"description": "BufferGeometry with Points for dynamic particle waves",
"path": "threejs_viz/threejs_viz_8.html",
@@ -682,11 +707,11 @@
"techniques": []
},
{
- "number": 10,
+ "number": 13,
"title": "Geometry Gallery",
"description": "Multiple advanced geometries with varied materials",
"path": "threejs_viz/threejs_viz_9.html",
- "type": "Intermediate",
+ "type": "Advanced",
"techniques": []
}
],
diff --git a/screenshots/threejs_viz_threejs_viz_1.png b/screenshots/threejs_viz_threejs_viz_1.png
index c682d10..b32fb84 100644
Binary files a/screenshots/threejs_viz_threejs_viz_1.png and b/screenshots/threejs_viz_threejs_viz_1.png differ
diff --git a/screenshots/threejs_viz_threejs_viz_11.png b/screenshots/threejs_viz_threejs_viz_11.png
new file mode 100644
index 0000000..2cd8571
Binary files /dev/null and b/screenshots/threejs_viz_threejs_viz_11.png differ
diff --git a/screenshots/threejs_viz_threejs_viz_12.png b/screenshots/threejs_viz_threejs_viz_12.png
new file mode 100644
index 0000000..c685f8f
Binary files /dev/null and b/screenshots/threejs_viz_threejs_viz_12.png differ
diff --git a/screenshots/threejs_viz_threejs_viz_13.png b/screenshots/threejs_viz_threejs_viz_13.png
new file mode 100644
index 0000000..49ed1fa
Binary files /dev/null and b/screenshots/threejs_viz_threejs_viz_13.png differ
diff --git a/screenshots/threejs_viz_threejs_viz_2.png b/screenshots/threejs_viz_threejs_viz_2.png
index 6a0204a..b1a40bf 100644
Binary files a/screenshots/threejs_viz_threejs_viz_2.png and b/screenshots/threejs_viz_threejs_viz_2.png differ
diff --git a/screenshots/threejs_viz_threejs_viz_3.png b/screenshots/threejs_viz_threejs_viz_3.png
index b0fbb5d..aa626f6 100644
Binary files a/screenshots/threejs_viz_threejs_viz_3.png and b/screenshots/threejs_viz_threejs_viz_3.png differ
diff --git a/screenshots/threejs_viz_threejs_viz_4.png b/screenshots/threejs_viz_threejs_viz_4.png
index b7cf6e0..be16460 100644
Binary files a/screenshots/threejs_viz_threejs_viz_4.png and b/screenshots/threejs_viz_threejs_viz_4.png differ
diff --git a/screenshots/threejs_viz_threejs_viz_5.png b/screenshots/threejs_viz_threejs_viz_5.png
index 1332dba..dc6a789 100644
Binary files a/screenshots/threejs_viz_threejs_viz_5.png and b/screenshots/threejs_viz_threejs_viz_5.png differ
diff --git a/screenshots/threejs_viz_threejs_viz_6.png b/screenshots/threejs_viz_threejs_viz_6.png
index 7e20a75..43cd78b 100644
Binary files a/screenshots/threejs_viz_threejs_viz_6.png and b/screenshots/threejs_viz_threejs_viz_6.png differ
diff --git a/screenshots/threejs_viz_threejs_viz_7.png b/screenshots/threejs_viz_threejs_viz_7.png
index a438750..7541aa3 100644
Binary files a/screenshots/threejs_viz_threejs_viz_7.png and b/screenshots/threejs_viz_threejs_viz_7.png differ
diff --git a/screenshots/threejs_viz_threejs_viz_9.png b/screenshots/threejs_viz_threejs_viz_9.png
index 7a8273d..d50c2e2 100644
Binary files a/screenshots/threejs_viz_threejs_viz_9.png and b/screenshots/threejs_viz_threejs_viz_9.png differ
diff --git a/specs/earth_orbit_simulator.md b/specs/earth_orbit_simulator.md
new file mode 100644
index 0000000..cf9d0e4
--- /dev/null
+++ b/specs/earth_orbit_simulator.md
@@ -0,0 +1,959 @@
+# Earth Orbit Simulator - Astronomical Accuracy Specification
+
+## Core Challenge
+
+Create a **scientifically accurate Three.js simulation** of Earth's orbit around the Sun with precise astronomical parameters including obliquity, eccentricity, precession, rotation, and accurate solar illumination. The simulation must include time controls to visualize Earth's position and orientation at any point in time.
+
+## Project Overview
+
+Build a single-file HTML application that demonstrates:
+- **Accurate Orbital Mechanics**: Kepler's laws, elliptical orbit with correct eccentricity
+- **Earth's Rotation**: Sidereal day (23h 56m 4.0916s) at accurate rate
+- **Axial Tilt (Obliquity)**: ~23.44° (precisely 23.4392811° for J2000.0 epoch)
+- **Orbital Eccentricity**: ~0.0167 (Earth's orbit is slightly elliptical)
+- **Axial Precession**: ~26,000 year cycle (precession of the equinoxes)
+- **Realistic Lighting**: Sun as light source with accurate Earth day/night terminator
+- **Time Simulation**: Ability to speed up/slow down/reverse time
+- **Interactive Controls**: Slider to jump to any date/time
+
+## Output Requirements
+
+**File Naming**: `earth_orbit_simulator.html`
+
+**Content Structure**: Self-contained HTML file with astronomical simulation
+
+```html
+
+
+
+
+
+ Earth Orbit Simulator - Astronomical Accuracy
+
+
+
+
+
EARTH ORBITAL DATA
+
+ Current Date/Time:
+ -
+
+
+ Julian Date:
+ -
+
+
+ Days since J2000:
+ -
+
+
+ Rotation Angle:
+ -
+
+
+ Axial Tilt:
+ 23.4393°
+
+
+ Orbital Position:
+ -
+
+
+ Distance from Sun:
+ -
+
+
+ Orbital Velocity:
+ -
+
+
+ Precession Angle:
+ -
+
+
+ Season:
+ -
+
+
+
+
+
+
+
+
+
+
+
+
+ ← 1M days/sec
+ Paused
+ 1M days/sec →
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+## Astronomical Accuracy Requirements
+
+### 1. Orbital Mechanics (Kepler's Laws)
+
+**Elliptical Orbit:**
+- Semi-major axis: 149.598 million km (1 AU)
+- Eccentricity: 0.0167086
+- Perihelion: ~147.1 million km (early January)
+- Aphelion: ~152.1 million km (early July)
+
+**Orbital Period:**
+- Sidereal year: 365.256363004 days
+- Tropical year: 365.24219 days
+
+**Mathematical Implementation:**
+- Use Kepler's equation to solve for position: `M = E - e·sin(E)`
+- Calculate true anomaly from eccentric anomaly
+- Convert to Cartesian coordinates in orbital plane
+
+### 2. Earth's Rotation
+
+**Rotational Period:**
+- Sidereal day: 23h 56m 4.0916s (0.99726968 days)
+- NOT 24 hours (that's solar day)
+
+**Implementation:**
+- Rotation angle = (days since epoch / sidereal day) × 360°
+- Rotate Earth mesh around Y-axis
+
+### 3. Axial Tilt (Obliquity)
+
+**Current Value:**
+- 23.4392811° (J2000.0 epoch reference)
+- Changes slowly over time (~23.1° to 24.5° over 41,000 years)
+
+**Implementation:**
+- Apply tilt to Earth's rotation group
+- Tilt is relative to orbital plane normal
+- Keep tilt direction fixed in space (relative to stars)
+
+### 4. Axial Precession
+
+**Precession Period:**
+- ~25,772 years (precession of the equinoxes)
+- Earth's axis traces a cone in space
+
+**Implementation:**
+- Very slow wobble of tilt direction
+- Barely noticeable in simulation unless sped up significantly
+- Affects which star is the "North Star" over millennia
+
+### 5. Realistic Lighting
+
+**Sun as Point Light:**
+- Position at origin (0, 0, 0)
+- Intensity sufficient to light Earth realistically
+- Enable shadows for accurate terminator
+
+**Day/Night Terminator:**
+- Should be perpendicular to Sun-Earth line
+- Proper shadow mapping on Earth surface
+- Atmospheric scattering effect (optional enhancement)
+
+## UI/UX Requirements
+
+### Information Panel (Top Right)
+
+Display real-time astronomical data:
+- **Current Date/Time**: UTC format
+- **Julian Date**: Astronomical time standard
+- **Days since J2000**: Days since January 1, 2000, 12:00 TT
+- **Rotation Angle**: Current rotation in degrees
+- **Axial Tilt**: 23.4393° (display constant)
+- **Orbital Position**: Angle from perihelion in degrees
+- **Distance from Sun**: Current distance in million km
+- **Orbital Velocity**: Current orbital speed in km/s
+- **Precession Angle**: Current precession phase
+- **Season**: Northern/Southern hemisphere season
+
+### Time Controls (Bottom)
+
+**Date/Time Picker:**
+- Jump to any specific date/time
+- Use HTML5 ``
+
+**Time Speed Slider:**
+- Range: -1,000,000 to +1,000,000 (days per second)
+- Center (0): Paused
+- Negative: Reverse time
+- Positive: Forward time
+- Display current speed multiplier
+
+**Quick Control Buttons:**
+- **Reverse**: Go backwards at 1 day/second
+- **Slower**: Halve current speed
+- **Pause**: Stop time (speed = 0)
+- **Faster**: Double current speed
+- **Forward**: Go forward at 1 day/second
+- **Reset**: Return to current real-world time
+
+## Technical Implementation
+
+### Recommended Libraries/APIs
+
+#### Option 1: astronomy-engine (NPM package)
+```javascript
+// Highly accurate astronomical calculations
+// https://github.com/cosinekitty/astronomy
+import * as Astronomy from 'https://cdn.jsdelivr.net/npm/astronomy-engine@2.1.19/+esm'
+
+// Get Earth's position at specific time
+const time = new Astronomy.AstroTime(new Date());
+const earthPos = Astronomy.HelioVector(Astronomy.Body.Earth, time);
+```
+
+**Pros:**
+- Extremely accurate (JPL ephemeris quality)
+- Easy to use
+- Handles all orbital mechanics automatically
+
+#### Option 2: Manual Calculation (Recommended for learning)
+```javascript
+// Implement Kepler's laws manually
+// Uses mean orbital elements
+function calculateOrbitalPosition(date) {
+ // 1. Calculate Julian Date
+ // 2. Days since J2000 epoch
+ // 3. Mean anomaly = mean longitude - longitude of perihelion
+ // 4. Solve Kepler's equation iteratively for eccentric anomaly
+ // 5. Calculate true anomaly
+ // 6. Convert to Cartesian coordinates
+ // 7. Apply orbital plane inclination (0° for Earth)
+}
+```
+
+**Pros:**
+- Complete control
+- Educational value
+- No external dependencies beyond Three.js
+
+#### Option 3: NASA JPL Horizons API
+```javascript
+// Query NASA's HORIZONS system for precise ephemeris
+// https://ssd.jpl.nasa.gov/api/horizons.api
+fetch('https://ssd.jpl.nasa.gov/api/horizons.api?...')
+```
+
+**Pros:**
+- Most accurate possible
+- Official NASA data
+
+**Cons:**
+- Requires API calls (network dependency)
+- Rate limited
+- More complex setup
+
+### Coordinate Systems
+
+**Three.js Scene:**
+- Sun at origin (0, 0, 0)
+- Orbital plane in XZ plane (Y = 0)
+- +X axis: Vernal equinox direction
+- +Y axis: North ecliptic pole
+- +Z axis: 90° from vernal equinox
+
+**Earth Orientation:**
+- Use nested groups: Sun → Orbit → Tilt → Rotation → Earth
+- Orbit group: position along orbital path
+- Tilt group: apply 23.44° tilt around Z-axis
+- Rotation group: rotate around Y-axis (Earth's axis)
+
+### Texture Resources
+
+**Earth Textures:**
+- Day texture: `earth_atmos_2048.jpg` or `earth_daymap_4096.jpg`
+- Night texture (optional): `earth_nightmap_2048.jpg`
+- Normal/bump map: `earth_normal_2048.jpg`
+- Specular map (optional): `earth_specular_2048.jpg`
+
+**Sources:**
+- Three.js examples: `https://github.com/mrdoob/three.js/tree/dev/examples/textures/planets`
+- NASA Visible Earth: `https://visibleearth.nasa.gov/`
+- Solar System Scope: `https://www.solarsystemscope.com/textures/`
+
+## Quality Standards
+
+### Astronomical Accuracy
+
+**Required Precision:**
+- Orbital position: ±0.1° accuracy
+- Rotation angle: ±1° accuracy
+- Axial tilt: ±0.01° accuracy
+- Distance from Sun: ±0.1 million km
+
+**Validation Methods:**
+- Compare with JPL Horizons data for specific dates
+- Verify solstice/equinox dates align with real dates
+- Check perihelion/aphelion dates (Jan 3 / July 4)
+- Validate orbital velocity at known points
+
+### Performance
+
+**Target:**
+- 60fps smooth animation
+- Responsive time controls (no lag)
+- Smooth camera controls
+- Fast date jumping (no recalculation delay)
+
+### Visual Quality
+
+**Required:**
+- Realistic Earth texture with good resolution
+- Accurate day/night terminator
+- Smooth lighting falloff
+- No visual artifacts or popping
+- Clean, readable UI
+
+**Optional Enhancements:**
+- Atmospheric glow around Earth
+- Clouds layer (animated)
+- City lights on night side
+- Lens flare from Sun
+- Orbital trail visualization
+
+## Advanced Features (Optional)
+
+### 1. Multi-Body System
+- Add Moon with accurate orbit
+- Add other planets
+- Show relative positions
+
+### 2. Enhanced Accuracy
+- Nutation (nodding motion)
+- Lunar perturbations
+- Gravitational effects of other planets
+- General relativity corrections
+
+### 3. Educational Features
+- Highlight equinoxes and solstices
+- Show tropics and polar circles
+- Indicate subsolar point
+- Display constellation background
+- Show celestial equator
+
+### 4. Data Visualization
+- Plot orbital velocity over time
+- Graph distance from Sun
+- Show axial tilt variation over millennia
+- Display Earth-Sun-Moon geometry
+
+## Testing & Validation
+
+### Test Cases
+
+**Known Astronomical Events:**
+1. **March Equinox 2024**: March 20, 03:06 UTC
+ - Earth at ~90° from perihelion
+ - Day/night equal length
+
+2. **June Solstice 2024**: June 20, 20:51 UTC
+ - Earth at ~180° from perihelion (aphelion nearby)
+ - Maximum northern tilt toward Sun
+
+3. **September Equinox 2024**: September 22, 12:44 UTC
+ - Earth at ~270° from perihelion
+ - Day/night equal length
+
+4. **December Solstice 2024**: December 21, 09:21 UTC
+ - Earth near perihelion
+ - Maximum southern tilt toward Sun
+
+**Validation Procedure:**
+1. Set simulation to test date
+2. Verify orbital position matches expected angle
+3. Check tilt direction relative to Sun
+4. Validate distance from Sun
+5. Confirm season displayed correctly
+
+### Comparison Sources
+
+**Official Ephemeris:**
+- NASA JPL Horizons: `https://ssd.jpl.nasa.gov/horizons/`
+- US Naval Observatory: `https://aa.usno.navy.mil/data/`
+- IAU SOFA: `http://www.iausofa.org/`
+
+## Success Criteria
+
+A successful Earth orbit simulator must:
+
+1. ✅ **Accurate Orbital Motion**: Earth follows elliptical path with correct eccentricity
+2. ✅ **Correct Rotation**: Sidereal day (23h 56m 4s), not solar day
+3. ✅ **Precise Tilt**: 23.44° axial tilt maintained relative to stars
+4. ✅ **Realistic Lighting**: Day/night terminator perpendicular to Sun direction
+5. ✅ **Time Control**: Smooth forward/reverse/pause/jump controls
+6. ✅ **Live Data Display**: All orbital parameters updated in real-time
+7. ✅ **Validation**: Matches known astronomical events (solstices, equinoxes)
+8. ✅ **Performance**: 60fps with smooth animations
+9. ✅ **Self-Contained**: Single HTML file, works offline after initial load
+10. ✅ **Educational Value**: Clearly demonstrates astronomical concepts
+
+## Reference Implementation Notes
+
+### Kepler's Equation Solver
+```javascript
+function solveKeplerEquation(M, e, iterations = 10) {
+ // M = mean anomaly (radians)
+ // e = eccentricity
+ // Solve: M = E - e·sin(E) for E (eccentric anomaly)
+
+ let E = M; // Initial guess
+ for (let i = 0; i < iterations; i++) {
+ E = E - (E - e * Math.sin(E) - M) / (1 - e * Math.cos(E));
+ }
+ return E;
+}
+
+function eccentricToTrueAnomaly(E, e) {
+ // Convert eccentric anomaly to true anomaly
+ return 2 * Math.atan2(
+ Math.sqrt(1 + e) * Math.sin(E / 2),
+ Math.sqrt(1 - e) * Math.cos(E / 2)
+ );
+}
+```
+
+### Julian Date Conversion
+```javascript
+function dateToJulianDate(date) {
+ // Convert JavaScript Date to Julian Date
+ return (date.getTime() / 86400000) + 2440587.5;
+}
+
+function julianDateToDate(jd) {
+ // Convert Julian Date to JavaScript Date
+ return new Date((jd - 2440587.5) * 86400000);
+}
+```
+
+## Documentation Requirements
+
+The simulation should include:
+- Comments explaining astronomical concepts
+- References to equations used
+- Links to validation sources
+- Instructions for use in info panel
+
+## Future Enhancements
+
+Potential additions for advanced versions:
+- Apsidal precession (orbital ellipse rotation)
+- Milankovitch cycles visualization
+- Historical Earth positions (dinosaur era, ice ages)
+- Comparison with other planets
+- Accurate Moon system
+- Eclipse prediction
+- Satellite tracking
+
+---
+
+**Generate an astronomically accurate, interactive Earth orbit simulator that demonstrates the beauty of celestial mechanics and serves as both a scientific tool and educational resource.**
diff --git a/threejs_viz/test_simple.html b/threejs_viz/test_simple.html
new file mode 100644
index 0000000..bdb6e3e
--- /dev/null
+++ b/threejs_viz/test_simple.html
@@ -0,0 +1,67 @@
+
+
+
+ Simple Three.js Test
+
+
+
+
Simple Three.js Test - You should see a rotating cube