Globe Performance Optimization

The 3D Globe is designed to run smoothly on most devices. Learn how to optimize your browser and system for the best experience.

Performance Requirements

Minimum Requirements

Component	Minimum
Browser	Chrome 80+, Firefox 75+, Safari 13+, Edge 80+
RAM	4 GB
GPU	Any WebGL-capable
Internet	1 Mbps

Recommended Requirements

Component	Recommended
Browser	Latest Chrome or Firefox
RAM	8 GB+
GPU	Dedicated graphics
Internet	10 Mbps+

Best Experience

Component	Optimal
Display	1080p or higher
Refresh Rate	60Hz+
GPU	Modern dedicated
Internet	25 Mbps+

How the Globe Manages Performance

Marker Limits

The globe automatically limits the number of visible markers to maintain smooth rendering:

• Up to 50 active visitor markers at a time
• Older markers are removed as new visitors arrive
• This limit keeps frame rates stable regardless of traffic volume

Fallback Refresh Strategy

The globe uses a dual update strategy:

1. Real-time subscription: New visitors arrive immediately via a Supabase real-time channel
2. Short-interval polling: A fallback refresh runs every few seconds to catch visitors leaving (going stale), and only while the tab is visible

When the browser tab is hidden, the polling stops and the real-time subscription may be throttled, conserving resources.

Efficient Rendering

• The globe uses Mapbox GL JS, which leverages WebGL for GPU-accelerated rendering
• DiceBear avatars are generated as SVGs and cached
• City geocoding results are cached to avoid repeated API calls

Browser Optimization

Chrome Settings

For best Chrome performance:

1. Enable Hardware Acceleration

   • Settings > System > Use hardware acceleration

2. Update Chrome

   • Keep browser updated for WebGL improvements

3. Reduce Extensions

   • Disable unnecessary extensions
   • Some ad blockers may affect performance or block Mapbox tiles

Firefox Settings

For Firefox optimization:

1. Hardware Acceleration

   • Settings > General > Performance
   • Enable hardware acceleration

2. WebGL Settings

   • Type about:config in the address bar
   • Ensure webgl.disabled is false

Safari Settings

For Safari on Mac:

1. WebGL Support

   • Usually enabled by default
   • Update macOS for improvements

2. Developer Tools

   • Enable in Preferences > Advanced for debugging

Device-Specific Tips

Desktop Optimization

On desktop computers:

• Close unnecessary applications
• Use a dedicated GPU if available
• Keep at least 2GB RAM free
• Use a wired internet connection if possible

Laptop Optimization

On laptops:

• Plug in the power adapter (GPU may throttle on battery)
• Use High Performance power mode
• Ensure adequate ventilation
• Close background apps

Mobile Optimization

On mobile devices:

• Use WiFi instead of cellular
• Close background apps
• Consider landscape orientation for better viewing
• The globe works on mobile but 3D rendering is more demanding on smaller devices

Tablet Optimization

On tablets:

• Performance is generally better than phones
• Use WiFi for stable connections
• Landscape orientation recommended

Tab Behavior

When the Tab Is Active

• Real-time subscription delivers immediate visitor updates
• Short-interval fallback polling runs as a safety net
• Full rendering performance

When the Tab Is Backgrounded

• The browser may throttle the tab
• Real-time subscription continues but updates queue
• Fallback polling pauses (checks document.hidden)
• Rendering pauses to save resources
• When you return to the tab, data refreshes automatically

WebGL Troubleshooting

Checking WebGL

Verify WebGL is working:

1. Visit chrome://gpu (Chrome) or about:support (Firefox)
2. Look for "WebGL" status
3. Should show "Hardware accelerated"

WebGL Not Working

If WebGL is disabled:

1. Update graphics drivers
2. Enable hardware acceleration in browser settings
3. Update your browser to the latest version
4. Try a different browser

Common WebGL Issues

Symptom	Likely Cause	Fix
Globe doesn't load	WebGL disabled	Enable hardware acceleration
Black screen	GPU driver issue	Update graphics drivers
Very slow rendering	Software fallback	Check GPU is being used
Tiles not loading	Network issue	Check internet connection

Power Management

Battery Usage

On battery-powered devices:

• The globe uses more power due to 3D rendering
• Consider closing the globe when not actively monitoring
• Plug in for extended viewing sessions

Background Behavior

When the tab is backgrounded:

• Rendering pauses to save battery
• Real-time subscription may be throttled by the browser
• Minimal resource usage
• Full functionality resumes when the tab is foregrounded

Diagnosing Issues

Common Issues and Fixes

Symptom	Likely Cause	Fix
Choppy rotation	Low GPU performance	Close other tabs, enable hardware acceleration
Markers not appearing	Real-time connection issue	Click Reload button, check browser console
High memory usage	Too many open tabs	Close unnecessary tabs
Slow initial load	Network speed	Check internet connection, wait for tiles to cache
Globe crashes	Insufficient memory	Close other applications, restart browser

Browser Console

If you experience issues, check the browser developer console (F12) for error messages. Common things to look for:

• WebGL errors
• Network request failures
• Supabase connection issues

Best Practices

General Tips

1. Use a modern browser with hardware acceleration enabled
2. Keep your browser and graphics drivers updated
3. Close unnecessary tabs when viewing the globe
4. Use a stable internet connection

For Presentations

1. Test the globe before presenting
2. Close all other applications
3. Use fullscreen mode for best visual impact
4. Prefer a wired internet connection

For Daily Use

1. Keep the globe tab in the foreground for real-time updates
2. The fallback refresh handles brief disconnections automatically
3. Click Reload if data seems stale
4. Keep your browser updated

Next Steps

• Learn about real-time updates
• Share the Globe and embed visitor widgets
• Customize Globe appearance