An interactive 3D visualization of the universe spanning 65 orders of magnitude, from quantum scales (-35) to cosmic scales (+30). Built with Three.js, this project combines physics simulations, real-time rendering, and educational content to explore the universe at every scale.
- Orbital Mechanics: Realistic Kepler's laws with orbital precession
- Relativistic Effects: Time dilation and gravitational lensing at extreme scales
- Quantum Mechanics: Wave function visualization and quantum tunneling
- Collision Physics:
- Sphere-sphere collision detection with spatial hashing
- Elastic and inelastic collision responses
- Real-time collision visualization with markers
- Live collision statistics tracking
- Scale Navigation: Explore 24 universe scales from quantum to cosmic
- Real-time Rendering: 65 orders of magnitude with smooth LOD (Level of Detail) culling
- Search & Bookmarks: Find scales instantly and save favorites locally
- Dynamic Visualization: Objects scale, rotate, and adapt based on viewing scale
- Performance Monitoring: Real-time FPS, memory, and collision statistics
- Educational Database: Facts and information for all 24 scales
- Procedurally Generated Textures: All textures created in real-time without external files
- Gradient Starfield: Deep-space atmosphere with 8,000+ stars
- Advanced UI:
- Responsive panels (Education, Advanced Features, Performance)
- Scale slider with real-time feedback
- Smooth menu scrolling with color-coded scrollbars
- Glowing neon-style aesthetics
- Desktop: Full keyboard and mouse controls
- Mobile/Tablet: Touch gestures (drag to rotate, pinch to zoom)
- Responsive Design: Adapts to any screen size
- Download or clone the repository
- Open
universe.htmlin any modern web browser - No dependencies, installations, or build processes required!
- Modern web browser (Chrome, Firefox, Safari, Edge)
- WebGL 2.0 support
- Recommended: 2GB RAM, dedicated GPU for best performance
| Key | Action |
|---|---|
| ↑/↓ | Rotate up/down |
| ←/→ | Rotate left/right |
| +/- | Zoom in/out |
| S | Open search |
| B | Toggle bookmark |
| R | Reset view |
| E | Education panel |
| A | Advanced features |
| P | Performance stats |
| ? | Help menu |
| Action | Effect |
|---|---|
| Drag | Rotate 360° in any direction |
| Scroll | Zoom in/out smoothly |
| Click Dots | Jump to specific scale |
| Gesture | Effect |
|---|---|
| 1 Finger Drag | Rotate the universe |
| 2 Finger Pinch | Zoom in/out |
| Tap | Interact with UI elements |
The simulation includes 24 distinct scales:
| Scale | Range | Examples |
|---|---|---|
| Quantum | -35 to -15 | Planck scale, electrons, atoms |
| Atomic | -14 to -8 | Molecules, DNA, proteins |
| Microscopic | -7 to -2 | Cells, bacteria, dust |
| Human | -1 to 3 | People, buildings, mountains |
| Planetary | 4 to 8 | Earth, Jupiter, solar system |
| Galactic | 9 to 18 | Milky Way, galaxy clusters |
| Cosmic | 19 to 30 | Observable universe |
Each scale features:
- Realistic physics simulation
- Orbital mechanics and dynamics
- Educational information
- Scale-appropriate visual effects
- Lighting and atmosphere adjustments
- Real-time Detection: Efficient spatial hashing grid (5-unit cells)
- Collision Types:
- Elastic: 0.85 coefficient of restitution
- Inelastic: Velocity damping with object separation
- Visual Feedback: Red additive-blended collision markers
- Statistics: Active collisions, total count, marker tracking
- LOD Culling: Automatically hides distant objects
- Spatial Hashing: Optimized broad-phase collision detection
- Adaptive Rendering: Frame-rate aware rendering adjustments
- Memory Management: Proper garbage collection and resource disposal
- 24 Scales: Complete scale information and facts
- Physics Explanations: Real-time physics parameters display
- Visual Learning: Interactive 3D visualization of concepts
- localStorage: Persistent bookmarks and settings
- Three.js r128: 3D rendering engine
- WebGL 2.0: Hardware-accelerated graphics
- Vanilla JavaScript: No external dependencies
- HTML5 Canvas: Procedural texture generation
- localStorage API: Persistent user preferences
- Kepler Mechanics: Elliptical orbit calculations
- Relativistic Physics: Lorentz transformations, time dilation
- Quantum Mechanics: Wave function simulation, probability clouds
- Collision Detection: AABB + sphere collision with spatial hashing
- Collision Response: Momentum conservation, friction simulation
- Spatial partitioning for O(1) collision detection
- Dynamic LOD system based on camera distance
- Memory pooling for recurring objects
- GPU-accelerated particle rendering
- Efficient buffer geometry usage
Edit the CSS variables in the <style> section:
:root {
--primary: #00f3ff; /* Cyan accent */
--accent: #ff0055; /* Magenta accent */
--bg: #0a0a12; /* Dark background */
--secondary: #00ffaa; /* Green accent */
}Modify physics constants in the collision system:
this.collisionConfig = {
elasticity: 0.85, // Coefficient of restitution
friction: 0.15, // Friction coefficient
damping: 0.95, // Velocity damping
minCollisionDist: 0.1, // Minimum collision distance
maxCollisionsPerFrame: 1000
};Edit scale data in the SCALES array:
{
name: "Scale Name",
description: "Scale description",
physics: { /* physics params */ },
objects: [ /* 3D objects */ ]
}Real-time monitoring displays:
- FPS: Frames per second
- Memory: GPU and CPU memory usage
- Objects: Active object count
- Collisions: Per-frame and total collision count
- Markers: Visible collision indicators
Typical Performance:
- Desktop: 60 FPS at 1080p with 1000+ objects
- Mobile: 30-45 FPS with adaptive rendering
- Memory: 150-300 MB depending on scale
- Ensure WebGL 2.0 is enabled in your browser
- Try updating your graphics drivers
- Check browser console for errors (F12)
- Close other applications to free memory
- Reduce browser zoom level
- Disable "Advanced Features" for better performance
- Use a dedicated GPU instead of integrated graphics
- Reload the page (Ctrl+R)
- Check if objects are hidden (Press 'A' for advanced panel)
- Verify collision system is disabled if too many objects
This project demonstrates:
- Astronomy: Planetary motion, orbital mechanics
- Physics: Relativity, quantum mechanics, collisions
- Computer Graphics: 3D rendering, LOD, particle systems
- Algorithms: Spatial hashing, collision detection
- Web Development: Canvas API, WebGL, performance optimization
- Three.js Documentation: https://threejs.org/docs
- WebGL Specifications: https://www.khronos.org/webgl/
- Physics Simulations: Khan Academy Physics
- Astronomy: NASA, ESA resources
- No Data Collection: All processing happens locally
- localStorage Only: Bookmarks stored in browser only
- No External APIs: Self-contained application
- No Tracking: Complete privacy guaranteed
Planned features:
- Black hole visualization and gravitational effects
- Multiverse branching visualization
- Advanced particle physics
- Multiplayer collaboration
- VR/AR support
- Export scenes as images/videos
- Custom universe builder
- Time acceleration/reversal controls
Improvements welcome! Areas for contribution:
- Performance optimizations
- Additional physics simulations
- Educational content expansion
- UI/UX improvements
- Bug fixes and testing
- Documentation enhancements
This project is provided as-is for educational and personal use.
Created as an interactive 3D physics simulation and educational tool.
- Three.js community for the powerful 3D engine
- WebGL specifications and standards
- Physics education resources and inspiration
- All contributors and testers
For issues, questions, or suggestions:
- Check the help menu (Press '?')
- Review the console for error messages (F12)
- Verify browser compatibility
- Ensure system meets requirements
Explore the universe at any scale. From the quantum realm to the cosmic horizon. 🌌
Version: 1.0.0
Last Updated: December 2025
Status: Fully Functional & Optimized ✅