new project

Prompt

Role: Senior Graphics Programmer & Creative Technologist Objective: Build a high-performance, interactive 3D WebGL particle simulation in a single-page web application using Three.js and MediaPipe Hands. The simulation must dynamically morph particles between various complex 3D shapes based on real-time hand gestures tracked via webcam. The visual feedback, animations, and UI must look production-ready, ultra-smooth (60 FPS+), and built by a senior creative developer. --- ### TECH STACK & LIBRARIES 1. 3D Engine: Three.js (r128+ or latest ES module version) 2. Hand Tracking: `@mediapipe/camera_utils` & `@mediapipe/hands` (or `@tensorflow-models/hand-pose-detection`) 3. Post-Processing: Three.js `EffectComposer`, `RenderPass`, and `UnrealBloomPass` 4. UI / Controls: lil-gui (or dat.gui) for debugging + Tailwind CSS / Vanilla CSS for clean overlay components 5. Math & Physics: Custom WebGL GLSL Shaders or GPU-based BufferGeometry morph targets with lerped attribute transitions --- ### CORE FEATURES & SHAPE FORMATIONS #### 1. Particle Formations (Minimum 5 Shapes) Generate mathematically calculated 3D coordinates for at least 20,000+ particles for each shape: - Sphere (Fibonacci sphere distribution) - Torus Knot / Donut - Cube / Hypercube outline grid - Spiral Galaxy / Double Helix - Heart shape or Saturn Ring #### 2. Hand Gesture Mapping Track webcam video in real-time and map gestures smoothly: - Open Palm (Fingers Spread): Expands / Scatters particles outward (Explosion effect). - Closed Fist: Concentrates particles into a high-density core (Gravity Well). - Pinch (Index Finger + Thumb tip distance < threshold): Triggers shape morphing transition to the next shape. - Two-Finger Point / Victory Sign: Controls rotation speed and axis vector based on hand inclination. - Hand Movement (X/Y position): Translates the central focal point / gravitational pull in screen space. - Hand Distance / Pinch Scale: Scales overall particle system size. --- ### PERFORMANCE & ANIMATION POLISH (CRITICAL) 1. Smooth Transitions (Lerping): - Never pop or snap particle positions instantly. Use spring physics or exponential decay lerping (`position.lerp(targetPosition, delta * speed)`) in GLSL vertex shaders or WebGL attributes. - Include smooth ease-in-out easing curves for shape morphs. 2. WebGL & Shader Architecture: - Use `THREE.BufferGeometry` with custom Float32Array attributes (`aTargetPosition`, `aSourcePosition`, `aSpeed`, `aRandomOffset`). - Write custom GLSL Vertex and Fragment Shaders for `THREE.ShaderMaterial`. - Fragment Shader: Soft glowing circular point sprites with radial falloff, dynamic color gradients (e.g., Cyberpunk Cyan-to-Magenta or Deep Space Neon Gold-to-Violet), and alpha blending (`THREE.AdditiveBlending`). 3. Post-Processing & Lighting: - Implement `UnrealBloomPass` with configurable strength (~0.8), radius (~0.5), and threshold (~0.2) to give particles a vibrant neon glow without crushing contrast. 4. Frame-Rate Independence: - Compute movement using `clock.getDelta()` to maintain identical speed regardless of screen refresh rate (60 Hz, 120 Hz, 144 Hz). --- ### USER INTERFACE & VISUAL FEEDBACK 1. Glassmorphism HUD Overlay: - Small webcam video feed in the corner with a togglable overlay showing tracking keypoints. - Live gesture status indicator badge (e.g., "Gesture Detected: Closed Fist - Gravity Well"). - Sleek shape selector controls (clickable buttons + key bindings as a fallback). 2. UX & Fallbacks: - Include a smooth loading state while MediaPipe models load. - Fallback mouse/touch controls if camera access is denied or unavailable (Mouse X/Y position acts as attractor, Click morphs shape). --- ### CODE QUALITY & STRUCTURE REQUIREMENTS - Output modular, modern ES6 JavaScript/TypeScript code. - Clean separation of concerns: `ParticleSystem`, `HandTracker`, `PostProcessingManager`, and `UIController`. - Fully handle window resizing smoothly with proper camera aspect ratio and renderer updates (`renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))`). - Complete code implementation without placeholder comments like `// implement logic here`.

A system prompt was added to support web rendering