perf: optimize engine performance by scaling particle counts, resolution, and hand tracking frequency based on device tier

Author: yogender-ai

app.min.js

@@ -6,8 +6,8 @@
 const DEVICE_THREAD_HINT = navigator.hardwareConcurrency || 4;
 const DEVICE_MEMORY_HINT = navigator.deviceMemory || 4;
 const PERF_TIER = Math.min(2, DEVICE_THREAD_HINT / 4) * Math.min(1.5, DEVICE_MEMORY_HINT / 4);
-const PARTICLE_COUNT = 8000;
-const BATTLE_PARTICLE_SCALE = PERF_TIER >= 1.5 ? 0.58 : 0.5;
+const PARTICLE_COUNT = PERF_TIER >= 1.5 ? 6000 : 4200;
+const BATTLE_PARTICLE_SCALE = PERF_TIER >= 1.5 ? 0.46 : 0.36;
 const SWARM_FORCE = 0.5;
 const SHAPE_FORCE = 0.2;
 const DAMPING = 0.96;
@@ -32,7 +32,8 @@ const COLOR_NEBULA = { r: 0.72, g: 0.32, b: 1.0 };
 const COLOR_NEBULA_CORE = { r: 0.96, g: 0.9, b: 1.0 };
 const COLOR_FLASH = { r: 1.0, g: 1.0, b: 1.0 };
 const COLOR_BATTLE = { r: 1.0, g: 0.9, b: 0.2 };
-const RENDER_PIXEL_RATIO = Math.min(window.devicePixelRatio || 1, PERF_TIER >= 1.4 ? 1.15 : 1.0);
+const RENDER_PIXEL_RATIO = Math.min(window.devicePixelRatio || 1, PERF_TIER >= 1.5 ? 1.0 : 0.85);
+const HAND_TRACK_INTERVAL_MS = PERF_TIER >= 1.5 ? 38 : 55;
 const HAND_PERSIST_MS = 900; // keep hand "active" briefly after tracker flicker
 const MAX_GPU_EXPLOSIONS = 4;
 
@@ -69,15 +70,15 @@ const particleOwner = new Uint8Array(PARTICLE_COUNT);
 for (let i = 0; i < PARTICLE_COUNT; i++) particleOwner[i] = i % 2;
 
 // === BATTLE / KAMEHAMEHA 2.0 — Two-Player Combat ===
-const BATTLE_PROJECTILE_COUNT = Math.floor(PARTICLE_COUNT * (PERF_TIER >= 1.5 ? 0.065 : 0.05));
+const BATTLE_PROJECTILE_COUNT = Math.floor(PARTICLE_COUNT * (PERF_TIER >= 1.5 ? 0.05 : 0.038));
 const BATTLE_SHIELD_RADIUS = 155;
-const BATTLE_PROJECTILE_SPEED = 24;
+const BATTLE_PROJECTILE_SPEED = 18;
 const BATTLE_HIT_RADIUS = 60;
 const BATTLE_ARROW_LENGTH = 520;
 const BATTLE_ARROW_HEAD = 170;
 const BATTLE_ARROW_RECOVER_TIME = 0.22;
 const BATTLE_DESPAWN_MARGIN = 360;
-const BATTLE_EXPLOSION_MASK = 15;
+const BATTLE_EXPLOSION_MASK = PERF_TIER >= 1.5 ? 31 : 63;
 const BATTLE_TINT_P1 = { r: 0.44, g: 0.36, b: 1.0 };
 const BATTLE_TINT_P2 = { r: 0.82, g: 0.28, b: 1.0 };
 const BATTLE_EXPLOSION_DEFAULT = { r: 1, g: 0.7, b: 0.2 };
@@ -213,7 +214,7 @@ scene.add(particles);
 
 // --- Starfield ---
 const starGeo = new THREE.BufferGeometry();
-const STAR_COUNT = 5000;
+const STAR_COUNT = PERF_TIER >= 1.5 ? 3500 : 2200;
 const sPos = new Float32Array(STAR_COUNT * 3);
 const sCol = new Float32Array(STAR_COUNT * 3);
 for (let i = 0; i < STAR_COUNT; i++) {
@@ -555,8 +556,7 @@ function chooseSingleHandSide(d) {
 
 function applyHandDetection(side, d, now) {
     const targetHand = hands[side];
-    // Much snappier lerp so particles feel like they follow the finger instantly
-    const lerpFactor = (now - targetHand.lastSeen > 250) ? 0.7 : 0.82;
+    const lerpFactor = (now - targetHand.lastSeen > 280) ? 0.45 : 0.56;
     const prevX = targetHand.pos.x;
     const prevY = targetHand.pos.y;
     const prevZ = targetHand.pos.z;
@@ -572,7 +572,7 @@ function applyHandDetection(side, d, now) {
     if (hadPrevious) {
         targetHand.vel.set(targetHand.pos.x - prevX, targetHand.pos.y - prevY, targetHand.pos.z - prevZ);
         const frameSpeed = targetHand.vel.length() * (16.67 / dt);
-        targetHand.speed += (frameSpeed - targetHand.speed) * 0.35;
+        targetHand.speed += (frameSpeed - targetHand.speed) * 0.22;
     } else {
         targetHand.vel.set(0, 0, 0);
         targetHand.speed = 0;
@@ -1097,17 +1097,20 @@ function onResults(results) {
 
 const handTracker = new Hands({ locateFile: (file) => `https://cdn.jsdelivr.net/npm/@mediapipe/hands/${file}` });
 // Lower confidence so single extended index finger is reliably detected
-handTracker.setOptions({ maxNumHands: 2, modelComplexity: 1, minDetectionConfidence: 0.35, minTrackingConfidence: 0.3 });
+handTracker.setOptions({ maxNumHands: 2, modelComplexity: PERF_TIER >= 1.5 ? 1 : 0, minDetectionConfidence: 0.35, minTrackingConfidence: 0.3 });
 handTracker.onResults(onResults);
 let isProcessingFrame = false;
+let lastHandFrameAt = 0;
 const cameraUtils = new Camera(videoElement, {
     onFrame: async () => {
-        if (isProcessingFrame) return;
+        const now = performance.now();
+        if (isProcessingFrame || now - lastHandFrameAt < HAND_TRACK_INTERVAL_MS) return;
+        lastHandFrameAt = now;
         isProcessingFrame = true;
         try { await handTracker.send({ image: videoElement }); } catch (e) {}
         finally { isProcessingFrame = false; }
     },
-    width: 640, height: 480
+    width: 480, height: 360
 });
 cameraUtils.start();
 
@@ -1124,25 +1127,25 @@ function updateBattleState(hasTwoHands) {
         battle.p2.targetTimer = (battle.p2.targetTimer || 0) - 1;
         const cpuDx = battle.p2.targetPos.x - battle.p2.pos.x;
         const cpuDy = battle.p2.targetPos.y - battle.p2.pos.y;
-        if (battle.p2.targetTimer <= 0 || cpuDx * cpuDx + cpuDy * cpuDy < 9000) {
-            battle.p2.targetPos.set((Math.random() - 0.5) * width * 0.55, (Math.random() - 0.5) * height * 0.5, 0);
-            battle.p2.targetTimer = 140 + Math.floor(Math.random() * 120);
+        if (battle.p2.targetTimer <= 0 || cpuDx * cpuDx + cpuDy * cpuDy < 6400) {
+            battle.p2.targetPos.set((Math.random() - 0.5) * width * 0.42, (Math.random() - 0.5) * height * 0.38, 0);
+            battle.p2.targetTimer = 220 + Math.floor(Math.random() * 160);
         }
-        battle.p2.pos.lerp(battle.p2.targetPos, 0.018);
+        battle.p2.pos.lerp(battle.p2.targetPos, 0.01);
 
         if (!battle.roundOver && battle.p1.active) {
-            if (!battle.p2.charging && Math.random() < 0.006) battle.p2.charging = true;
+            if (!battle.p2.charging && Math.random() < 0.004) battle.p2.charging = true;
             if (battle.p2.charging) {
                 battle.p2.chargeAmount = Math.min(1, battle.p2.chargeAmount + 0.012);
-                if (battle.p2.chargeAmount > 0.72 && Math.random() < 0.025) {
+                if (battle.p2.chargeAmount > 0.78 && Math.random() < 0.018) {
                     const attacks = ['normal', 'volley', 'fireball'];
                     fireBattleBeam(battle.p2, battle.p1, attacks[Math.floor(Math.random()*attacks.length)]);
                 }
             } else {
                 battle.p2.chargeAmount *= 0.9;
-                if (Math.random() < 0.006) battle.p2.shielding = true;
-                if (battle.p2.shielding && Math.random() < 0.035) battle.p2.shielding = false;
-                battle.p2.shieldStrength += ((battle.p2.shielding ? 1.0 : 0) - battle.p2.shieldStrength) * 0.18;
+                if (Math.random() < 0.004) battle.p2.shielding = true;
+                if (battle.p2.shielding && Math.random() < 0.025) battle.p2.shielding = false;
+                battle.p2.shieldStrength += ((battle.p2.shielding ? 1.0 : 0) - battle.p2.shieldStrength) * 0.12;
             }
         }
     } else {
@@ -1161,11 +1164,11 @@ function updateBattleState(hasTwoHands) {
             battle.p2.targetTimer = (battle.p2.targetTimer || 0) - 1;
             const dx = battle.p2.targetPos.x - battle.p2.pos.x;
             const dy = battle.p2.targetPos.y - battle.p2.pos.y;
-            if (battle.p2.targetTimer <= 0 || dx * dx + dy * dy < 6400) {
-                battle.p2.targetPos.set(width * (0.18 + Math.random() * 0.22), (Math.random() - 0.5) * height * 0.45, 0);
-                battle.p2.targetTimer = 160 + Math.floor(Math.random() * 140);
+            if (battle.p2.targetTimer <= 0 || dx * dx + dy * dy < 4900) {
+                battle.p2.targetPos.set(width * (0.16 + Math.random() * 0.18), (Math.random() - 0.5) * height * 0.36, 0);
+                battle.p2.targetTimer = 240 + Math.floor(Math.random() * 160);
             }
-            battle.p2.pos.lerp(battle.p2.targetPos, 0.012);
+            battle.p2.pos.lerp(battle.p2.targetPos, 0.008);
         }
     }
 

index.html

@@ -115,7 +115,7 @@
 
     <div id="footer">Created by <b>Yogender</b> · Quantum Flux v2.1</div>
 
-    <script src="app.min.js?v=2.3.4"></script>
+    <script src="app.min.js?v=2.3.5"></script>
 </body>
 
 </html>