Optimizing Video Textures in Three.js for Mobile Safari

When dealing with performance issues related to video textures in Three.js, especially on mobile Safari, there are several specific considerations to keep in mind.

Common Issues with Video Textures on Mobile

Based on your description, you're experiencing stuttering when using video textures with GSAP animations on mobile Safari. This is a common challenge due to how iOS handles video playback and GPU resources.

Optimization Suggestions

Here are some targeted approaches to improve performance:

1. Video Texture Handling

Consider using the appropriate texture type for your needs:

• Use VideoTexture for standard video mapping
• Consider VideoFrameTexture for more precise frame control

JAVASCRIPTCopied
// Standard approach
const video = document.createElement('video');
video.src = 'your-video.mp4';
video.loop = true;
video.muted = true;
video.playsInline = true; // Important for iOS
video.autoplay = true;
const texture = new THREE.VideoTexture(video);

2. iOS-Specific Optimizations

Safari on iOS has specific requirements for video playback:

JAVASCRIPTCopied
// iOS-specific video setup
video.playsInline = true;
video.muted = true; // Often required for autoplay
video.setAttribute('playsinline', ''); // Double ensure playsinline
video.setAttribute('webkit-playsinline', ''); // For older iOS versions

// Often needed to trigger playback on iOS
document.addEventListener('touchstart', () => {
  video.play();
}, { once: true });

3. Performance Considerations

• Use power-of-two dimensions for your video (e.g., 512×512, 1024×512)
• Consider using mp4 format with H.264 encoding for best compatibility
• Reduce the framerate of your video to 24fps or lower for mobile
• Use requestVideoFrameCallback if available for better synchronization

4. GSAP and Three.js Integration

When using GSAP with Three.js on mobile:

JAVASCRIPTCopied
// Use RAF for smoother animation
function animate() {
  requestAnimationFrame(animate);
  
  // Update texture if video is playing
  if (video.readyState >= video.HAVE_CURRENT_DATA) {
    texture.needsUpdate = true;
  }
  
  renderer.render(scene, camera);
}
animate();

5. Renderer Optimization

JAVASCRIPTCopied
// Optimize renderer
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2)); // Limit pixel ratio
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.powerPreference = "high-performance";

Consider investigating if the reference site you mentioned might be using image sequences instead of video textures, which can sometimes perform better on mobile devices.

Let me know if you'd like more specific advice about any of these approaches!