mobile-performance

Mobile Performance Optimization

When to Use

Use this skill when:

• Building Three.js games for mobile devices
• Optimizing existing games for mobile
• Implementing adaptive quality settings
• Dealing with thermal throttling
• Reducing battery consumption

Core Principles

1. Device Detection: Detect device capabilities and adjust accordingly
2. Quality Scaling: Implement multiple quality presets
3. Frame Rate Management: Adaptive FPS based on performance
4. Thermal Awareness: Reduce load when device heats up
5. Battery Optimization: Lower quality on battery power
6. Progressive Enhancement: Start low, scale up if possible

Implementation

1. Device Detector

export interface DeviceCapabilities {
  tier: 'low' | 'medium' | 'high';
  gpu: string;
  maxTextureSize: number;
  supportsWebGL2: boolean;
  isMobile: boolean;
  isIOS: boolean;
  isAndroid: boolean;
  memory: number; // GB
  cores: number;
  pixelRatio: number;
}

export class DeviceDetector {
  private capabilities: DeviceCapabilities;

  constructor() {
    this.capabilities = this.detect();
  }

  private detect(): DeviceCapabilities {
    const canvas = document.createElement('canvas');
    const gl = canvas.getContext('webgl2') || canvas.getContext('webgl');

    if (!gl) {
      throw new Error('WebGL not supported');
    }

    const debugInfo = gl.getExtension('WEBGL_debug_renderer_info');
    const gpu = debugInfo
      ? gl.getParameter(debugInfo.UNMASKED_RENDERER_WEBGL)
      : 'Unknown';

    const maxTextureSize = gl.getParameter(gl.MAX_TEXTURE_SIZE);
    const supportsWebGL2 = !!canvas.getContext('webgl2');

    // Device detection
    const ua = navigator.userAgent.toLowerCase();
    const isMobile = /mobile|android|iphone|ipad|ipod/.test(ua);
    const isIOS = /iphone|ipad|ipod/.test(ua);
    const isAndroid = /android/.test(ua);

    // Memory estimation (GB)
    const memory = (navigator as any).deviceMemory || this.estimateMemory(gpu);

    // CPU cores
    const cores = navigator.hardwareConcurrency || 4;

    // Pixel ratio (cap at 2 for performance)
    const pixelRatio = Math.min(window.devicePixelRatio, 2);

    // Determine device tier
    const tier = this.calculateTier(gpu, memory, cores, isMobile);

    return {
      tier,
      gpu,
      maxTextureSize,
      supportsWebGL2,
      isMobile,
      isIOS,
      isAndroid,
      memory,
      cores,
      pixelRatio,
    };
  }

  private estimateMemory(gpu: string): number {
    const gpuLower = gpu.toLowerCase();

    // High-end
    if (/adreno 6|mali-g7|apple a1[2-9]|m[1-9]/.test(gpuLower)) {
      return 6;
    }

    // Mid-range
    if (/adreno 5|mali-g5|apple a[9-11]/.test(gpuLower)) {
      return 4;
    }

    // Low-end
    return 2;
  }

  private calculateTier(
    gpu: string,
    memory: number,
    cores: number,
    isMobile: boolean
  ): 'low' | 'medium' | 'high' {
    const gpuLower = gpu.toLowerCase();

    // High-end devices
    if (
      memory >= 6 &&
      cores >= 6 &&
      (/adreno 6|mali-g7|apple a1[2-9]|m[1-9]|rtx|radeon rx/.test(gpuLower))
    ) {
      return 'high';
    }

    // Low-end devices
    if (
      memory <= 2 ||
      cores <= 4 ||
      /adreno [2-4]|mali-[4-5]|apple a[6-8]/.test(gpuLower)
    ) {
      return 'low';
    }

    // Medium by default
    return 'medium';
  }

  getCapabilities(): DeviceCapabilities {
    return this.capabilities;
  }

  getTier(): 'low' | 'medium' | 'high' {
    return this.capabilities.tier;
  }
}