refactor: replace PointsMaterial with custom ShaderMaterial to support dynamic particle energy and explosion effects

Author: yogender-ai

app.min.js

@@ -7,6 +7,7 @@ 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 = PERF_TIER >= 1.4 ? 20000 : (PERF_TIER >= 0.9 ? 16000 : 12000);
+const BATTLE_PARTICLE_SCALE = 0.65;
 const SWARM_FORCE = 0.5;
 const SHAPE_FORCE = 0.2;
 const DAMPING = 0.96;
@@ -32,12 +33,15 @@ 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 HAND_PERSIST_MS = 400; // keep hand "active" for 400ms after loss
+const MAX_GPU_EXPLOSIONS = 4;
 
 // --- State ---
 let currentShape = 'swarm';
 let width = window.innerWidth;
 let height = window.innerHeight;
 let isSwarmMode = true;
+let activeParticleCount = PARTICLE_COUNT;
+let targetActiveParticleCount = PARTICLE_COUNT;
 let isPinching = false;
 let pinchDistance = 0;
 let handCenter = new THREE.Vector3();
@@ -179,11 +183,97 @@ for (let i = 0; i < PARTICLE_COUNT; i++) {
 
 geometry.setAttribute('position', new THREE.BufferAttribute(pPos, 3));
 geometry.setAttribute('color', new THREE.BufferAttribute(pCol, 3));
+geometry.attributes.position.setUsage(THREE.DynamicDrawUsage);
+geometry.attributes.color.setUsage(THREE.DynamicDrawUsage);
+geometry.setDrawRange(0, activeParticleCount);
+
+const particleUniforms = {
+    uMap: { value: glowTexture },
+    uPointSize: { value: 4.0 },
+    uOpacity: { value: 0.85 },
+    uPixelRatio: { value: renderer.getPixelRatio() },
+    uHandLeft: { value: new THREE.Vector3() },
+    uHandRight: { value: new THREE.Vector3() },
+    uBeamP1Origin: { value: new THREE.Vector3() },
+    uBeamP1Head: { value: new THREE.Vector3() },
+    uBeamP2Origin: { value: new THREE.Vector3() },
+    uBeamP2Head: { value: new THREE.Vector3() },
+    uExplosionCount: { value: 0 },
+    uExplosions: { value: Array.from({ length: MAX_GPU_EXPLOSIONS }, () => new THREE.Vector4()) },
+    uExplosionColors: { value: Array.from({ length: MAX_GPU_EXPLOSIONS }, () => new THREE.Vector3()) }
+};
+
+const particleVertexShader = `
+    uniform float uPointSize;
+    uniform float uPixelRatio;
+    uniform vec3 uHandLeft;
+    uniform vec3 uHandRight;
+    uniform vec3 uBeamP1Head;
+    uniform vec3 uBeamP2Head;
+    uniform int uExplosionCount;
+    uniform vec4 uExplosions[${MAX_GPU_EXPLOSIONS}];
+    attribute vec3 color;
+    varying vec3 vColor;
+    varying float vEnergy;
+
+    void main() {
+        vec3 worldPos = position;
+        float energy = 0.0;
+
+        float leftDistSq = dot(worldPos - uHandLeft, worldPos - uHandLeft);
+        float rightDistSq = dot(worldPos - uHandRight, worldPos - uHandRight);
+        float beam1DistSq = dot(worldPos - uBeamP1Head, worldPos - uBeamP1Head);
+        float beam2DistSq = dot(worldPos - uBeamP2Head, worldPos - uBeamP2Head);
+
+        energy += 1.0 / (1.0 + leftDistSq * 0.00008);
+        energy += 1.0 / (1.0 + rightDistSq * 0.00008);
+        energy += 1.3 / (1.0 + beam1DistSq * 0.00012);
+        energy += 1.3 / (1.0 + beam2DistSq * 0.00012);
+
+        for (int i = 0; i < ${MAX_GPU_EXPLOSIONS}; i++) {
+            if (i >= uExplosionCount) break;
+            vec3 delta = worldPos - uExplosions[i].xyz;
+            float distSq = dot(delta, delta);
+            float radiusSq = uExplosions[i].w * uExplosions[i].w;
+            if (distSq < radiusSq) {
+                energy += 1.5 * (1.0 - distSq / max(radiusSq, 1.0));
+            }
+        }
 
-const material = new THREE.PointsMaterial({
-    size: 4.0, map: glowTexture, vertexColors: true,
-    blending: THREE.AdditiveBlending, depthTest: false,
-    transparent: true, opacity: 0.85
+        vColor = color;
+        vEnergy = clamp(energy, 0.0, 2.0);
+
+        vec4 mvPosition = modelViewMatrix * vec4(worldPos, 1.0);
+        gl_Position = projectionMatrix * mvPosition;
+        gl_PointSize = uPointSize * uPixelRatio * (320.0 / max(-mvPosition.z, 1.0)) * (1.0 + vEnergy * 0.2);
+    }
+`;
+
+const particleFragmentShader = `
+    uniform sampler2D uMap;
+    uniform float uOpacity;
+    varying vec3 vColor;
+    varying float vEnergy;
+
+    void main() {
+        vec4 glow = texture2D(uMap, gl_PointCoord);
+        vec3 outColor = vColor + vEnergy * 0.08;
+        if (vEnergy > 0.4) {
+            outColor = mix(outColor, vec3(1.0), clamp((vEnergy - 0.4) * 0.35, 0.0, 0.35));
+        }
+        gl_FragColor = vec4(outColor, glow.a * uOpacity);
+    }
+`;
+
+const material = new THREE.ShaderMaterial({
+    uniforms: particleUniforms,
+    vertexShader: particleVertexShader,
+    fragmentShader: particleFragmentShader,
+    vertexColors: true,
+    blending: THREE.AdditiveBlending,
+    depthTest: false,
+    depthWrite: false,
+    transparent: true
 });
 const particles = new THREE.Points(geometry, material);
 scene.add(particles);
@@ -220,6 +310,41 @@ const origin = new THREE.Vector3(0, 0, 0);
 const singleForceOut = { vx: 0, vy: 0, vz: 0 };
 function clamp(v, mn, mx) { return Math.max(mn, Math.min(mx, v)); }
 function lerpValue(a, b, t) { return a + (b - a) * t; }
+function setActiveParticleTarget(shape) {
+    const battleCount = Math.max(BATTLE_PROJECTILE_COUNT * 2 + 512, Math.floor(PARTICLE_COUNT * BATTLE_PARTICLE_SCALE));
+    targetActiveParticleCount = (shape === 'battle') ? battleCount : PARTICLE_COUNT;
+}
+function syncActiveParticleCount() {
+    if (activeParticleCount === targetActiveParticleCount) return activeParticleCount;
+    const delta = targetActiveParticleCount - activeParticleCount;
+    const step = Math.max(96, Math.ceil(Math.abs(delta) * 0.18));
+    activeParticleCount += Math.sign(delta) * Math.min(Math.abs(delta), step);
+    geometry.setDrawRange(0, activeParticleCount);
+    return activeParticleCount;
+}
+function updateParticleUniforms() {
+    particleUniforms.uPixelRatio.value = renderer.getPixelRatio();
+    particleUniforms.uHandLeft.value.copy(hands.left.pos);
+    particleUniforms.uHandRight.value.copy(hands.right.pos);
+    particleUniforms.uBeamP1Origin.value.copy(battle.p1.beam.origin);
+    particleUniforms.uBeamP1Head.value.copy(battle.p1.beam.head);
+    particleUniforms.uBeamP2Origin.value.copy(battle.p2.beam.origin);
+    particleUniforms.uBeamP2Head.value.copy(battle.p2.beam.head);
+    const count = Math.min(battle.explosions.length, MAX_GPU_EXPLOSIONS);
+    particleUniforms.uExplosionCount.value = count;
+    for (let i = 0; i < MAX_GPU_EXPLOSIONS; i++) {
+        const posUniform = particleUniforms.uExplosions.value[i];
+        const colorUniform = particleUniforms.uExplosionColors.value[i];
+        if (i < count) {
+            const exp = battle.explosions[i];
+            posUniform.set(exp.pos.x, exp.pos.y, exp.pos.z, exp.radius + 120);
+            colorUniform.set(exp.color.r, exp.color.g, exp.color.b);
+        } else {
+            posUniform.set(0, 0, 0, 0);
+            colorUniform.set(0, 0, 0);
+        }
+    }
+}
 
 function resetSupernova() { supernova.state = 'IDLE'; supernova.charge = 0; supernova.explosionTime = 0; supernova.epicenter.set(0, 0, 0); }
 function resetBattle() {
@@ -381,9 +506,8 @@ function updateBeam(fighter, enemy) {
         const dx = beam.head.x - enemy.pos.x;
         const dy = beam.head.y - enemy.pos.y;
         const dz = beam.head.z - enemy.pos.z;
-        const dist = Math.sqrt(dx * dx + dy * dy + dz * dz);
         const hitRadius = (enemy.shielding && enemy.shieldStrength > 0.25) ? BATTLE_SHIELD_RADIUS : BATTLE_HIT_RADIUS;
-        if (dist < hitRadius) {
+        if (dx * dx + dy * dy + dz * dz < hitRadius * hitRadius) {
             if (enemy.shielding && enemy.shieldStrength > 0.25) {
                 spawnExplosion(beam.head, { r: 0.4, g: 0.8, b: 1.0 }, 0.6);
                 finishBattleBeam(beam, beam.head, true);
@@ -414,8 +538,7 @@ function updateBeam(fighter, enemy) {
         const dx = beam.head.x - otherBeam.head.x;
         const dy = beam.head.y - otherBeam.head.y;
         const dz = beam.head.z - otherBeam.head.z;
-        const dist = Math.sqrt(dx * dx + dy * dy + dz * dz);
-        if (dist < BATTLE_HIT_RADIUS) {
+        if (dx * dx + dy * dy + dz * dz < BATTLE_HIT_RADIUS * BATTLE_HIT_RADIUS) {
             const midX = (beam.head.x + otherBeam.head.x) * 0.5;
             const midY = (beam.head.y + otherBeam.head.y) * 0.5;
             const midZ = (beam.head.z + otherBeam.head.z) * 0.5;
@@ -726,6 +849,7 @@ window.setShape = (shape) => {
     const btn = document.querySelector('#ui button[data-mode="' + shape + '"]');
     if (btn) btn.classList.add('active');
 
+    setActiveParticleTarget(shape);
     for (let i = 0; i < PARTICLE_COUNT * 3; i++) pVel[i] *= 0.1;
 
     if (isBattleMode) flashHud('⚔ BATTLE MODE');
@@ -1038,7 +1162,6 @@ let time = 0;
 function animate() {
     requestAnimationFrame(animate);
     time += 0.01;
-    material.color.setHex(0xffffff);
 
     updateAudioAnalysis();
     updateCombo();
@@ -1050,16 +1173,18 @@ function animate() {
     const isBattleMode = currentShape === 'battle';
     const hasTwoHands = hands.left.active && hands.right.active;
     const handMotion = hasTwoHands ? clamp((hands.left.speed + hands.right.speed) / 36, 0, 1) : 0;
+    const activeCount = syncActiveParticleCount();
+    const handIdle = Date.now() - lastHandTime > 1000;
 
-    material.size = (isDuelMode || isBattleMode)
+    particleUniforms.uPointSize.value = (isDuelMode || isBattleMode)
         ? 4.4 + handMotion * 1.4 + bassEnergy * 4.2 + beatPulse * 2.6
         : 4.8 + bassEnergy * 5.2 + beatPulse * 3.0;
-    material.opacity = (isDuelMode || isBattleMode)
+    particleUniforms.uOpacity.value = (isDuelMode || isBattleMode)
         ? 0.82 + handMotion * 0.12 + trebleEnergy * 0.06
         : 0.7 + trebleEnergy * 0.3;
     scene.fog.density = 0.0006 + midEnergy * 0.0008;
 
-    if (isSwarmMode && Date.now() - lastHandTime > 1000) {
+    if (isSwarmMode && handIdle) {
         indexFingerTip.lerp(origin, 0.05);
         isPinching = false;
     }
@@ -1071,14 +1196,15 @@ function animate() {
         const ax = hands.right.pos.x - hands.left.pos.x;
         const ay = hands.right.pos.y - hands.left.pos.y;
         const az = hands.right.pos.z - hands.left.pos.z;
-        const rawDist = Math.sqrt(ax * ax + ay * ay + az * az);
+        const distSq = ax * ax + ay * ay + az * az;
         const mx = (hands.left.pos.x + hands.right.pos.x) * 0.5;
         const my = (hands.left.pos.y + hands.right.pos.y) * 0.5;
         const mz = (hands.left.pos.z + hands.right.pos.z) * 0.5;
         if (supernova.state !== 'EXPLODING' && supernova.state !== 'COOLDOWN') {
-            if (rawDist < SUPERNOVA_DETONATE_DIST) {
+            if (distSq < SUPERNOVA_DETONATE_DIST * SUPERNOVA_DETONATE_DIST) {
                 triggerSupernova(positions, colors, new THREE.Vector3(mx, my, mz));
-            } else if (rawDist < SUPERNOVA_TRIGGER_DIST) {
+            } else if (distSq < SUPERNOVA_TRIGGER_DIST * SUPERNOVA_TRIGGER_DIST) {
+                const rawDist = Math.sqrt(distSq);
                 supernova.state = 'CHARGING';
                 supernova.charge = 1 - (rawDist / SUPERNOVA_TRIGGER_DIST);
                 supernova.epicenter.set(mx, my, mz);
@@ -1096,7 +1222,7 @@ function animate() {
 
     const timeScale = time * 3.0;
 
-    for (let i = 0; i < PARTICLE_COUNT; i++) {
+    for (let i = 0; i < activeCount; i++) {
         const ix = i * 3, iy = i * 3 + 1, iz = i * 3 + 2;
         let px = positions[ix], py = positions[iy], pz = positions[iz];
         let vx = pVel[ix], vy = pVel[iy], vz = pVel[iz];
@@ -1399,7 +1525,7 @@ function animate() {
                 }
             }
         } else if (isSwarmMode) {
-            if (Date.now() - lastHandTime > 1000) {
+            if (handIdle) {
                 const distSq = px * px + py * py + pz * pz;
                 const dist = Math.sqrt(distSq) || 1;
                 const orbitSpeed = 8.0 / Math.pow(dist, 0.4);
@@ -1487,6 +1613,7 @@ function animate() {
         pVel[ix] = vx; pVel[iy] = vy; pVel[iz] = vz;
     }
 
+    updateParticleUniforms();
     particles.geometry.attributes.position.needsUpdate = true;
     particles.geometry.attributes.color.needsUpdate = true;