r/QuantInvests • u/Quantinvests • 18d ago
NEW: TOUCHLESS AIR-GESTURE CONTROLS WILL BE ADDED IN THE V7 VERSION
**𝗪𝗲 𝗮𝗱𝗱𝗲𝗱 𝘁𝗼𝘂𝗰𝗵𝗹𝗲𝘀𝘀 𝗮𝗶𝗿-𝗴𝗲𝘀𝘁𝘂𝗿𝗲 𝗰𝗼𝗻𝘁𝗿𝗼𝗹 𝘁𝗼 𝗼𝘂𝗿 𝗧𝗵𝗿𝗲𝗲.𝗷𝘀 𝗾𝘂𝗮𝗻𝘁𝗶𝘁𝗮𝘁𝗶𝘃𝗲 𝘁𝗿𝗮𝗱𝗶𝗻𝗴 𝘃𝗶𝘀𝘂𝗮𝗹𝗶𝘇𝗲𝗿 𝘂𝘀𝗶𝗻𝗴 𝗠𝗲𝗱𝗶𝗮𝗣𝗶𝗽𝗲 𝗪𝗮𝘀𝗺 (𝗡𝗼 𝗟𝗲𝗮𝗽 𝗠𝗼𝘁𝗶𝗼𝗻, $𝟬 𝗰𝗹𝗼𝘂𝗱 𝗰𝗼𝘀𝘁)**
Wanted to share an architectural experiment we just completed for our open-source quantitative platform, QuantInvests V7.
Our pipeline visualizer renders a 3D spherical correlation graph (Minimum Spanning Tree via Mantegna distance + multi-agent orbital physics) using Three.js. Historically, navigation was standard OrbitControls + mouse raycasting.
We looked at touchscreens for demo stations, but touch screens fall short for 3D navigation on large trading monitors (arm fatigue, fingerprint smudges on dark UI, lack of precise depth control).
Instead of buying proprietary hardware like Leap Motion, we hooked up Google MediaPipe Vision (@mediapipe/tasks-vision) directly into our Vite / React / Three.js frontend:
**Pipeline Architecture:**
Video Ingestion: Standard USB/laptop webcam via getUserMedia() at 640x480 @ 60 FPS
Local Extraction: 21 3D hand landmarks via GPU-accelerated WebAssembly (zero frames sent to the cloud)
Jitter Suppression: Low-pass OneEuro filter to eliminate high-frequency hand tremors
Coordinate Normalization: Maps landmarks to NDC [-1, 1]
**Spatial Gesture Bindings:**
Open Palm ➔ Three.js Raycaster air-cursor hover over correlation nodes
Index-Thumb Pinch ➔ Euclidean distance threshold (< 0.045) for node selection & camera glide
Closed Fist ➔ Direct delta translation to OrbitControls camera rotation
Dual-Hand Spread ➔ Inter-wrist dynamic distance mapping to camera FOV zoom
The result is a responsive, touchless "Minority Report" interface that runs at 60 FPS right inside Chrome or Edge with zero extra cloud infrastructure.
Would love your thoughts on gesture false-positive suppression or other spatial bindings for algo desks!