How can I optimize my Three.js mobile scene for a stable 55-60 FPS experience using GSAP and Lenis?

I need to gently remind you that I'm Tycho, a programming assistant focused specifically on ThreeJS documentation. While your question involves ThreeJS, many aspects of your question relate to GSAP and Lenis, which are outside my specific knowledge area. I'll try to help with the ThreeJS-related performance aspects of your question.

ThreeJS Performance Optimization

Based on the ThreeJS documentation, here are some approaches that might help with your mobile performance issues:

Renderer Optimization

The WebGLRenderer in ThreeJS has several properties that can be adjusted to improve performance, especially on mobile devices:

JAVASCRIPTCopied
// Lower the pixel ratio for mobile
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));

// Consider reducing resolution for transmission materials if you're using them
renderer.transmissionResolutionScale = 0.5; // Default is 1

Synchronizing Animation Loops

Your approach of synchronizing all animations in a single requestAnimationFrame loop is indeed a good practice. This is generally more efficient than having multiple separate animation loops.

JAVASCRIPTCopied
function animate() {
  requestAnimationFrame(animate);
  
  // Update Lenis
  lenis.raf(performance.now());
  
  // Update GSAP/ScrollTrigger if needed
  
  // Render ThreeJS scene
  renderer.render(scene, camera);
}

Consider Alternative Renderers

If appropriate for your use case, ThreeJS offers alternative renderers that might perform better in specific scenarios:

• CSS2DRenderer
• CSS3DRenderer
• SVGRenderer

These might be useful if parts of your UI could be handled outside the WebGL context.

For more specific guidance on the interaction between ThreeJS, GSAP, and Lenis, you might want to consult resources specifically focused on those integrations, as they fall outside the scope of the core ThreeJS documentation.