Enhance FPS monitoring and implement animations disable feature in low FPS mode
This commit is contained in:
@@ -138,35 +138,38 @@
|
||||
function render(a) {
|
||||
requestAnimationFrame(render);
|
||||
|
||||
// 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
|
||||
}
|
||||
}
|
||||
|
||||
if (!isSimpleMode) {
|
||||
// FPS monitoring (only when not in simple mode)
|
||||
frameCount++;
|
||||
const currentTime = performance.now();
|
||||
const delta = currentTime - lastTime;
|
||||
|
||||
if (delta >= 500) { // Update FPS every 500ms
|
||||
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) {
|
||||
console.warn(`Low FPS detected (${fps}). Switching to simple background...`);
|
||||
switchToSimpleBackground();
|
||||
isSimpleMode = true;
|
||||
// Stop monitoring - mode persists until page refresh
|
||||
}
|
||||
} else {
|
||||
lowFpsCount = 0; // Reset counter if FPS improves
|
||||
}
|
||||
}
|
||||
|
||||
// Render 3D scene
|
||||
for(var i = 0; i < starsAmount; i++) {
|
||||
updateStar(stars.children[i], i);
|
||||
}
|
||||
renderer.render(scene, camera);
|
||||
}
|
||||
// If in simple mode, just keep the animation frame loop running but do nothing
|
||||
}
|
||||
|
||||
function switchToSimpleBackground() {
|
||||
@@ -179,10 +182,58 @@
|
||||
overlay.style.background = 'linear-gradient(180deg, #0a1628 0%, #001a2d 50%, #000d1a 100%)';
|
||||
overlay.style.backdropFilter = 'none';
|
||||
|
||||
// Disable all animations and transitions
|
||||
disableAnimations();
|
||||
|
||||
// Add simple animated stars
|
||||
createSimpleStars();
|
||||
|
||||
console.log('Simple background mode activated');
|
||||
console.log('Simple background mode activated - animations disabled for performance');
|
||||
}
|
||||
|
||||
function disableAnimations() {
|
||||
// Create a style tag to disable animations
|
||||
const style = document.createElement('style');
|
||||
style.id = 'low-fps-mode';
|
||||
style.textContent = `
|
||||
/* Disable all animations and transitions in low FPS mode */
|
||||
*, *::before, *::after {
|
||||
animation-duration: 0s !important;
|
||||
animation-delay: 0s !important;
|
||||
transition-duration: 0s !important;
|
||||
transition-delay: 0s !important;
|
||||
}
|
||||
|
||||
/* Remove hover effects and transforms */
|
||||
.service-card:hover,
|
||||
.card:hover {
|
||||
transform: none !important;
|
||||
box-shadow: 0 4px 12px rgba(79,70,229,0.3) !important;
|
||||
}
|
||||
|
||||
.control-btn:hover,
|
||||
.theme-toggle:hover,
|
||||
#ddg-search-btn:hover {
|
||||
transform: none !important;
|
||||
}
|
||||
|
||||
/* Disable status dot animations */
|
||||
.status-dot {
|
||||
animation: none !important;
|
||||
}
|
||||
|
||||
/* Disable shimmer effects */
|
||||
.service-card::before,
|
||||
.card::before {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* Simplify search input focus */
|
||||
#search-input:focus {
|
||||
box-shadow: 0 0 0 2px rgba(79,70,229,0.3) !important;
|
||||
}
|
||||
`;
|
||||
document.head.appendChild(style);
|
||||
}
|
||||
|
||||
function createSimpleStars() {
|
||||
|
||||
Reference in New Issue
Block a user