El Hareketiyle Kontrol Edilen 3D Web App

PROMPT:

Create an ultra-smooth, high-density 3D particle mesh system using Three.js + GPU shaders. The visual result must look like a living, breathing, deformable energy sphere, similar to a soft organic object made of thousands of glowing particles.

CORE SYSTEM

• Generate a high-resolution spherical point cloud (minimum 10k–50k particles).

• Use a custom GLSL vertex shader for:

  • Smooth displacement

  • Noise-driven deformation

  • Radius expansion & contraction

  • Organic wave oscillations

• Rendering should use additive blending and soft glow.

HAND TRACKING

• Detect two hands via webcam (MediaPipe or TensorFlow.js).

• Extract hand openness / tension as a value between 0–1.

• Map gestures directly to sphere deformation:

  • Open hand → sphere inflates, becomes smoother.

  • Closed hand → sphere contracts & collapses inward.

  • Micro-movements → subtle ripples and waves.

• Gestures must be extremely responsive with minimal latency.

• Add smoothing via:

  • lerp()

  • exponential damping

  • motion interpolation so the object feels fluid and alive.

VISUAL QUALITY

• Particles must form a continuous surface, not random scatter.

• Apply:

  • Perlin/Simplex noise on the sphere radius

  • Dynamic amplitude controlled by hand tension

  • Multi-layer noise for organic motion (“breathing effect”)

• Movement must feel soft, elastic, gelatin-like.

UI REQUIREMENTS

Create a minimal futuristic HUD with:

• Shape modes:

  • CORE (default sphere)

  • PEAK (spiky displacement)

  • WAVE (ripple modulation)

  • ATM (atmospheric glow shell)

  • RING (Saturn-like ring mode)

• A color selector that updates particle color instantly.

UI must be clean, modern, sci-fi, floating over the canvas.

PERFORMANCE

• Must run at 60 FPS.

• All particle motion must be computed in the vertex shader, not CPU.

• Reuse geometry buffers to avoid GC spikes.

FINAL RESULT

A Planet Zoom–style interactive 3D particle sphere that:

• Moves like a living organism

• Reacts instantly to hand gestures

• Morphs smoothly between shape modes

• Displays a clean futuristic control interface

Provide the full HTML + CSS + JavaScript + shaders in a single index.html file.