Performance Tips

import { Perf } from 'r3f-perf';

<Canvas>
  <Perf position="top-left" />
  {/* Your scene */}
</Canvas>

<Terrain lodLevels={3} lodDistances={[50, 150, 400]} />
<TreeInstances lodLevels={4} billboardDistance={200} />
<GrassInstances fadeStart={80} fadeEnd={100} />

// ❌ Bad: Individual meshes
{trees.map(t => <TreeMesh position={t.pos} />)}

// ✅ Good: Instanced rendering
<TreeInstances count={trees.length} positions={treePositions} />

// Mobile
<Terrain resolution={32} chunkSize={64} viewDistance={2} />

// Desktop
<Terrain resolution={64} chunkSize={32} viewDistance={4} />

// Mobile - disable expensive effects
<Water
  segments={64}
  reflections={false}
  caustics={false}
/>

// Desktop - enable effects
<AdvancedWater
  segments={128}
  reflections
  reflectionResolution={512}
  caustics
/>

// Mobile
<VolumetricFogMesh steps={16} animated={false} />

// Desktop
<VolumetricFogMesh steps={32} animated />

// Mobile
<ProceduralSky stars={false} moon={false} />

// Desktop
<ProceduralSky stars starCount={5000} moon />

import { useDevice } from 'strata-game-library/capacitor';

function AdaptiveScene() {
  const device = useDevice();
  const isMobile = device.deviceType === 'mobile';

  const quality = isMobile ? {
    grassCount: 3000,
    treeCount: 100,
    waterReflections: false,
    volumetricSteps: 16,
  } : {
    grassCount: 15000,
    treeCount: 500,
    waterReflections: true,
    volumetricSteps: 32,
  };

  return (
    <Canvas dpr={isMobile ? 1 : [1, 2]}>
      <GrassInstances count={quality.grassCount} />
      <TreeInstances count={quality.treeCount} />
      <Water reflections={quality.waterReflections} />
      <VolumetricFogMesh steps={quality.volumetricSteps} />
    </Canvas>
  );
}