Three.js Performance Optimization Recommendations

Based on your description of performance issues with your Three.js, GSAP ScrollTrigger, and video implementation, here are some optimization strategies that could help improve performance on low-end devices:

Three.js Optimizations

1. Renderer Management

When the Three.js section is off-screen, consider these approaches:

JAVASCRIPTCopied
// Option 1: Pause rendering completely
function handleVisibility(isVisible) {
  if (isVisible) {
    // Resume animation loop
    renderer.setAnimationLoop(animate);
  } else {
    // Stop animation loop completely
    renderer.setAnimationLoop(null);
  }
}

// Option 2: Lower resolution when off-screen or during scroll
function adjustResolution(isScrolling) {
  if (isScrolling) {
    // Lower resolution during scroll
    renderer.setPixelRatio(window.devicePixelRatio * 0.5);
  } else {
    // Restore resolution when static
    renderer.setPixelRatio(window.devicePixelRatio);
  }
}

2. Use OrbitControls Wisely

If you're using OrbitControls, disable them when not needed:

JAVASCRIPTCopied
// Only enable controls when the section is visible and interactive
controls.enabled = isVisible && !isScrolling;

3. Optimize Scene Complexity

JAVASCRIPTCopied
// Reduce geometry complexity for low-end devices
function optimizeForDevice() {
  const isLowEndDevice = checkIfLowEndDevice(); // Implement your detection logic
  
  if (isLowEndDevice) {
    // Use lower polygon models
    // Reduce particle counts
    // Simplify materials
  }
}

Video Optimizations

1. Adaptive Video Quality

JAVASCRIPTCopied
// Load appropriate video based on device capability
function loadAppropriateVideo() {
  const video = document.querySelector('video');
  const isLowEnd = checkIfLowEndDevice();
  
  if (isLowEnd) {
    video.src = 'low-res-video.mp4';
    video.setAttribute('playsinline', '');
  } else {
    video.src = 'high-res-video.mp4';
  }
}

2. Video Playback Control

JAVASCRIPTCopied
// Pause video when off-screen
const videoObserver = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    const video = entry.target;
    if (entry.isIntersecting) {
      video.play();
    } else {
      video.pause();
    }
  });
}, { threshold: 0.1 });

videoObserver.observe(document.querySelector('video'));

GSAP and General Optimizations

1. Throttle Scroll Events

JAVASCRIPTCopied
// Throttle scroll events to reduce CPU load
let scrollTimeout;
window.addEventListener('scroll', () => {
  if (!scrollTimeout) {
    scrollTimeout = setTimeout(() => {
      // Handle scroll updates here
      scrollTimeout = null;
    }, 16); // ~60fps
  }
});

2. Stagger Animations

JAVASCRIPTCopied
// Stagger animations to distribute CPU load
ScrollTrigger.create({
  trigger: ".section",
  start: "top center",
  onEnter: () => {
    // Stagger animations instead of starting all at once
    gsap.to(".element", {
      opacity: 1,
      y: 0,
      stagger: 0.1, // Stagger by 0.1 seconds
      duration: 0.8
    });
  }
});

3. Use requestIdleCallback for Non-Critical Operations

JAVASCRIPTCopied
// Defer non-critical operations
if ('requestIdleCallback' in window) {
  requestIdleCallback(() => {
    // Perform non-critical operations here
  });
} else {
  setTimeout(() => {
    // Fallback for browsers that don't support requestIdleCallback
  }, 1);
}

Additional Recommendations

1. Completely disable Three.js when off-screen: Yes, this is recommended. Beyond just stopping the animation loop, consider:

   • Setting renderer.domElement.style.display = 'none'
   • Disposing of resources when appropriate

2. Implement progressive enhancement: Start with basic functionality and add features based on device capability.

3. Monitor performance: Use the Performance API to measure and adjust based on real metrics.

These optimizations should help improve the performance of your parallax scrolling page, especially on low-end devices. The key is to be selective about when and how you use computational resources.