Game performance optimization — FPS, memory, GPU profiling, and LOD

class PerformanceMonitor {
  constructor() {
    this.frames = 0;
    this.lastFpsTime = performance.now();
    this.fps = 60;
    this.frameTimes = [];
  }

  frameStart() {
    this._start = performance.now();
  }

  frameEnd() {
    const elapsed = performance.now() - this._start;
    this.frameTimes.push(elapsed);
    if (this.frameTimes.length > 60) this.frameTimes.shift();
    this.frames++;

    const now = performance.now();
    if (now - this.lastFpsTime >= 1000) {
      this.fps = this.frames;
      this.frames = 0;
      this.lastFpsTime = now;
    }
  }

  get avgFrameTime() {
    return this.frameTimes.reduce((a,b) => a+b, 0) / this.frameTimes.length;
  }

  draw(ctx) {
    const color = this.fps >= 55 ? '#4caf50' : this.fps >= 30 ? '#ff9800' : '#f44336';
    ctx.font = '14px monospace';
    ctx.fillStyle = color;
    ctx.fillText(`FPS: ${this.fps} | Frame: ${this.avgFrameTime.toFixed(1)}ms`, 10, 20);
  }
}

// Usage in game loop:
const perf = new PerformanceMonitor();
function loop() {
  perf.frameStart();
  update(); render();
  perf.frameEnd();
  perf.draw(ctx);
  requestAnimationFrame(loop);
}

Target: frame time under 16.6ms. If it consistently exceeds that, you have a bottleneck to find.

class ObjectPool {
  constructor(factory, initialSize = 50) {
    this.factory = factory;
    this.pool = [];
    for (let i = 0; i < initialSize; i++)
      this.pool.push(factory());
  }

  acquire() {
    return this.pool.length > 0 ? this.pool.pop() : this.factory();
  }

  release(obj) {
    this.pool.push(obj);
  }
}

// Bullet pool — never allocate during gameplay
const bulletPool = new ObjectPool(() => ({
  x: 0, y: 0, vx: 0, vy: 0, active: false
}), 200);

function fireBullet(x, y, vx, vy) {
  const b = bulletPool.acquire();
  b.x = x; b.y = y; b.vx = vx; b.vy = vy; b.active = true;
  activeBullets.push(b);
}

function removeBullet(b) {
  b.active = false;
  bulletPool.release(b);
}

class SpatialGrid {
  constructor(cellSize) {
    this.cellSize = cellSize;
    this.grid = new Map();
  }

  clear() { this.grid.clear(); }

  _key(x, y) {
    const cx = Math.floor(x / this.cellSize);
    const cy = Math.floor(y / this.cellSize);
    return `${cx},${cy}`;
  }

  insert(entity) {
    const k = this._key(entity.x, entity.y);
    if (!this.grid.has(k)) this.grid.set(k, []);
    this.grid.get(k).push(entity);
  }

  getNearby(entity) {
    const cx = Math.floor(entity.x / this.cellSize);
    const cy = Math.floor(entity.y / this.cellSize);
    const nearby = [];
    for (let dx = -1; dx <= 1; dx++)
      for (let dy = -1; dy <= 1; dy++) {
        const k = `${cx+dx},${cy+dy}`;
        if (this.grid.has(k)) nearby.push(...this.grid.get(k));
      }
    return nearby;
  }
}

// Each frame:
const grid = new SpatialGrid(64);
grid.clear();
entities.forEach(e => grid.insert(e));
entities.forEach(e => {
  for (const other of grid.getNearby(e)) {
    if (other !== e) checkCollision(e, other);
  }
});

// 1. Instanced rendering for many identical objects
const geometry = new THREE.BoxGeometry(0.5, 0.5, 0.5);
const material = new THREE.MeshStandardMaterial({ color: 0x533483 });
const mesh = new THREE.InstancedMesh(geometry, material, 1000);
for (let i = 0; i < 1000; i++) {
  const m = new THREE.Matrix4();
  m.setPosition(Math.random()*50-25, 0.25, Math.random()*50-25);
  mesh.setMatrixAt(i, m);
}
scene.add(mesh); // 1 draw call for 1000 objects

// 2. LOD — swap to simpler models at distance
const lod = new THREE.LOD();
lod.addLevel(highDetailMesh, 0);    // close
lod.addLevel(medDetailMesh, 20);   // medium distance
lod.addLevel(lowDetailMesh, 50);   // far away
scene.add(lod);

// 3. Frustum culling (automatic in Three.js, but help it)
mesh.frustumCulled = true; // default

// 4. Texture atlases — fewer texture swaps = fewer draw calls
// Combine many small textures into one atlas image

// 5. Reduce shadow map updates
sun.shadow.autoUpdate = false;
// Manually update only when needed:
sun.shadow.needsUpdate = true;