Screen width in pixels
Whether device is mobile (from user-agent detection)
Performance settings object
// Standard mobile (iPhone SE)
const settings = getPerformanceSettings(375, true);
// { maxParticles: 40, shadowMapSize: 1024, dpr: [1, 2], ... }
// High-res mobile (Motorola Edge 60 Pro)
const settingsHD = getPerformanceSettings(2712, true);
// { maxParticles: 50, shadowMapSize: 1536, dpr: [1, 3.5], ... }
// Desktop
const settingsDesktop = getPerformanceSettings(1920, false);
// { maxParticles: 100, shadowMapSize: 2048, dpr: [1, 2], ... }
<Canvas
dpr={settings.dpr}
gl={{ antialias: settings.antialias }}
/>
Get performance settings for current device
Properly handles high-resolution mobile devices (2K+, Super HD) by using the isMobile flag from user-agent detection before screen width classification.
This ensures devices like Motorola Edge 60 Pro (2712x1220) get mobile-optimized settings with proper dpr support up to 3.5x for their Super HD displays.