solanapolis 1.0.0

package/src/components/SwapParticles.tsx

@@ -0,0 +1,237 @@
+"use client";
+
+import { useEffect, useRef } from "react";
+import { useFrame } from "@react-three/fiber";
+import * as THREE from "three";
+
+const MAX_BURSTS = 30;
+const PARTICLES_PER_BURST = 12;
+const TOTAL_PARTICLES = MAX_BURSTS * PARTICLES_PER_BURST;
+const BURST_LIFETIME = 1.8; // seconds
+
+interface Burst {
+  origin: THREE.Vector3;
+  born: number;
+  color: THREE.Color;
+}
+
+const vertexShader = /* glsl */ `
+  attribute float aSize;
+  attribute float aLife;
+  attribute vec3 aColor;
+  varying float vLife;
+  varying vec3 vColor;
+  
+  void main() {
+    vLife = aLife;
+    vColor = aColor;
+    vec4 mvPosition = modelViewMatrix * vec4(position, 1.0);
+    gl_PointSize = aSize * (200.0 / -mvPosition.z);
+    gl_Position = projectionMatrix * mvPosition;
+  }
+`;
+
+const fragmentShader = /* glsl */ `
+  varying float vLife;
+  varying vec3 vColor;
+  
+  void main() {
+    // Soft circle
+    vec2 center = gl_PointCoord - 0.5;
+    float dist = length(center) * 2.0;
+    if (dist > 1.0) discard;
+    
+    float alpha = (1.0 - dist) * vLife;
+    alpha *= alpha; // quadratic falloff
+    
+    // Glow effect
+    vec3 glow = vColor * (1.0 + vLife * 2.0);
+    
+    gl_FragColor = vec4(glow, alpha * 0.8);
+  }
+`;
+
+interface SwapParticlesProps {
+  swapBurstRef: React.MutableRefObject<Array<{ x: number; y: number; z: number; color: string }>>;
+}
+
+/**
+ * GPU particle system for swap activity bursts.
+ * When a swap event fires, particles burst upward from the building.
+ */
+export default function SwapParticles({ swapBurstRef }: SwapParticlesProps) {
+  const pointsRef = useRef<THREE.Points>(null);
+  const burstsRef = useRef<Burst[]>([]);
+  const particleDataRef = useRef<{
+    positions: Float32Array;
+    sizes: Float32Array;
+    baseSizes: Float32Array;
+    lives: Float32Array;
+    colors: Float32Array;
+    velocities: Float32Array;
+    material: THREE.ShaderMaterial;
+  } | null>(null);
+
+  if (!particleDataRef.current) {
+    const positions = new Float32Array(TOTAL_PARTICLES * 3);
+    const sizes = new Float32Array(TOTAL_PARTICLES);
+    const baseSizes = new Float32Array(TOTAL_PARTICLES);
+    const lives = new Float32Array(TOTAL_PARTICLES);
+    const colors = new Float32Array(TOTAL_PARTICLES * 3);
+    const velocities = new Float32Array(TOTAL_PARTICLES * 3);
+
+    // Initialize off-screen
+    for (let i = 0; i < TOTAL_PARTICLES; i++) {
+      positions[i * 3 + 1] = -1000; // below ground
+    }
+
+    const material = new THREE.ShaderMaterial({
+      vertexShader,
+      fragmentShader,
+      transparent: true,
+      depthWrite: false,
+      blending: THREE.AdditiveBlending,
+    });
+
+    particleDataRef.current = {
+      positions,
+      sizes,
+      baseSizes,
+      lives,
+      colors,
+      velocities,
+      material,
+    };
+  }
+
+  const { positions, sizes, baseSizes, lives, colors, velocities, material } = particleDataRef.current;
+
+  useEffect(() => {
+    return () => {
+      material.dispose();
+    };
+  }, [material]);
+
+  useFrame((state, delta) => {
+    const points = pointsRef.current;
+    if (!points) return;
+
+    const elapsed = state.clock.elapsedTime;
+    const dt = Math.min(delta, 0.05); // clamp to prevent explosion on tab-switch
+
+    // Consume pending bursts
+    const pending = swapBurstRef.current.splice(0);
+    for (const p of pending) {
+      if (burstsRef.current.length >= MAX_BURSTS) {
+        burstsRef.current.shift();
+      }
+      burstsRef.current.push({
+        origin: new THREE.Vector3(p.x, p.y, p.z),
+        born: elapsed,
+        color: new THREE.Color(p.color),
+      });
+    }
+
+    // Update all particles
+    const bursts = burstsRef.current;
+    let particleIdx = 0;
+
+    for (let b = 0; b < bursts.length; b++) {
+      const burst = bursts[b];
+      const age = elapsed - burst.born;
+
+      if (age > BURST_LIFETIME) {
+        bursts.splice(b, 1);
+        b--;
+        continue;
+      }
+
+      const life = 1.0 - age / BURST_LIFETIME;
+
+      for (let p = 0; p < PARTICLES_PER_BURST; p++) {
+        if (particleIdx >= TOTAL_PARTICLES) break;
+
+        const idx = particleIdx * 3;
+
+        if (age < 0.01) {
+          // Initialize particle velocity on first frame
+          const angle = (p / PARTICLES_PER_BURST) * Math.PI * 2 + Math.random() * 0.5;
+          const speed = 3 + Math.random() * 5;
+          const upSpeed = 4 + Math.random() * 6;
+
+          velocities[idx] = Math.cos(angle) * speed;
+          velocities[idx + 1] = upSpeed;
+          velocities[idx + 2] = Math.sin(angle) * speed;
+
+          positions[idx] = burst.origin.x;
+          positions[idx + 1] = burst.origin.y;
+          positions[idx + 2] = burst.origin.z;
+
+          // Store initial size seed in sizes array for consistent per-particle sizing
+          baseSizes[particleIdx] = 1.5 + Math.random() * 1.5;
+        }
+
+        // Physics update — use actual frame delta
+        positions[idx] += velocities[idx] * dt;
+        positions[idx + 1] += velocities[idx + 1] * dt;
+        positions[idx + 2] += velocities[idx + 2] * dt;
+
+        // Gravity
+        velocities[idx + 1] -= 9.8 * dt;
+
+        // Particle properties — use stored base size, scale by life
+        const baseSize = baseSizes[particleIdx] > 0.01 ? baseSizes[particleIdx] : 2.0;
+        sizes[particleIdx] = baseSize * life;
+        lives[particleIdx] = life;
+        colors[idx] = burst.color.r;
+        colors[idx + 1] = burst.color.g;
+        colors[idx + 2] = burst.color.b;
+
+        particleIdx++;
+      }
+    }
+
+    // Hide remaining particles
+    for (let i = particleIdx; i < TOTAL_PARTICLES; i++) {
+      positions[i * 3 + 1] = -1000;
+      sizes[i] = 0;
+      baseSizes[i] = 0;
+      lives[i] = 0;
+    }
+
+    // Update GPU buffers
+    const geom = points.geometry;
+    const posAttr = geom.getAttribute("position") as THREE.BufferAttribute;
+    const sizeAttr = geom.getAttribute("aSize") as THREE.BufferAttribute;
+    const lifeAttr = geom.getAttribute("aLife") as THREE.BufferAttribute;
+    const colorAttr = geom.getAttribute("aColor") as THREE.BufferAttribute;
+
+    posAttr.needsUpdate = true;
+    sizeAttr.needsUpdate = true;
+    lifeAttr.needsUpdate = true;
+    colorAttr.needsUpdate = true;
+  });
+
+  return (
+    <points ref={pointsRef} frustumCulled={false} material={material}>
+      <bufferGeometry>
+        <bufferAttribute
+          attach="attributes-position"
+          args={[positions, 3]}
+        />
+        <bufferAttribute
+          attach="attributes-aSize"
+          args={[sizes, 1]}
+        />
+        <bufferAttribute
+          attach="attributes-aLife"
+          args={[lives, 1]}
+        />
+        <bufferAttribute
+          attach="attributes-aColor"
+          args={[colors, 3]}
+        />
+      </bufferGeometry>
+    </points>
+  );
+}