diff --git a/js/galaxy-background.js b/js/galaxy-background.js index cdf1ae3..7bdecc0 100644 --- a/js/galaxy-background.js +++ b/js/galaxy-background.js @@ -1,7 +1,17 @@ // Galaxy background - moonlit terrain with floating stars +// Includes FPS monitoring and fallback to simple background (function initGalaxy(){ console.clear(); + // FPS monitoring + let lastTime = performance.now(); + let frameCount = 0; + let fps = 60; + let lowFpsCount = 0; + const FPS_THRESHOLD = 27; + const LOW_FPS_SAMPLES = 5; // Switch after 5 consecutive low FPS readings + let isSimpleMode = false; + var ww = window.innerWidth, wh = window.innerHeight; @@ -127,10 +137,98 @@ function render(a) { requestAnimationFrame(render); - for(var i = 0; i < starsAmount; i++) { - updateStar(stars.children[i], i); + + // FPS monitoring + frameCount++; + const currentTime = performance.now(); + const delta = currentTime - lastTime; + + if (delta >= 1000) { // Update FPS every second + fps = Math.round((frameCount * 1000) / delta); + frameCount = 0; + lastTime = currentTime; + + // Check if FPS is consistently low + if (fps < FPS_THRESHOLD) { + lowFpsCount++; + if (lowFpsCount >= LOW_FPS_SAMPLES && !isSimpleMode) { + console.warn(`Low FPS detected (${fps}). Switching to simple background...`); + switchToSimpleBackground(); + isSimpleMode = true; + } + } else { + lowFpsCount = 0; // Reset counter if FPS improves + } } - renderer.render(scene, camera); + + if (!isSimpleMode) { + for(var i = 0; i < starsAmount; i++) { + updateStar(stars.children[i], i); + } + renderer.render(scene, camera); + } + } + + function switchToSimpleBackground() { + // Stop rendering 3D scene + const canvas = document.querySelector('#galaxy-canvas'); + canvas.style.display = 'none'; + + // Create simple gradient background + const overlay = document.querySelector('#background-overlay'); + overlay.style.background = 'linear-gradient(180deg, #0a1628 0%, #001a2d 50%, #000d1a 100%)'; + overlay.style.backdropFilter = 'none'; + + // Add simple animated stars + createSimpleStars(); + + console.log('Simple background mode activated'); + } + + function createSimpleStars() { + const starsContainer = document.createElement('div'); + starsContainer.id = 'simple-stars'; + starsContainer.style.cssText = ` + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + z-index: 1; + pointer-events: none; + `; + + // Create 50 simple star divs + for (let i = 0; i < 50; i++) { + const star = document.createElement('div'); + star.style.cssText = ` + position: absolute; + width: 2px; + height: 2px; + background: white; + border-radius: 50%; + top: ${Math.random() * 100}%; + left: ${Math.random() * 100}%; + opacity: ${Math.random() * 0.5 + 0.3}; + animation: twinkle ${Math.random() * 3 + 2}s infinite ease-in-out; + `; + starsContainer.appendChild(star); + } + + // Add twinkle animation + if (!document.querySelector('#simple-stars-style')) { + const style = document.createElement('style'); + style.id = 'simple-stars-style'; + style.textContent = ` + @keyframes twinkle { + 0%, 100% { opacity: 0.3; } + 50% { opacity: 1; } + } + `; + document.head.appendChild(style); + } + + document.body.appendChild(starsContainer); } function onResize() {