Loading XR::COSMOS...
“Modern XR headsets replace physical plastic controllers with direct optical hand tracking. The WebXR Hand Input Module exposes 25 anatomical joint poses per hand (wrist, palm, thumb, index, middle, ring, pinky tips and knuckles) allowing precise natural pinch and grab interactions.”
25-joint hand skeleton tracking, index finger raycasting, and direct pinch gesture detection.
// Detecting Index-Thumb Pinch Gesture
function checkPinch(frame, hand, refSpace) {
const thumbTip = frame.getJointPose(hand.get('thumb-tip'), refSpace);
const indexTip = frame.getJointPose(hand.get('index-finger-tip'), refSpace);
if (thumbTip && indexTip) {
const dx = thumbTip.transform.position.x - indexTip.transform.position.x;
const dy = thumbTip.transform.position.y - indexTip.transform.position.y;
const dz = thumbTip.transform.position.z - indexTip.transform.position.z;
const distance = Math.sqrt(dx*dx + dy*dy + dz*dz);
if (distance < 0.02) { // Less than 20mm = Pinch Active!
return true;
}
}
return false;
}Camera neural networks track 3D landmarks of human hands in real-time
WebXR exposes inputSource.hand containing 25 XRJointSpace nodes
App queries frame.getJointPose(hand.get("index-finger-tip"), refSpace)
Computes Euclidean distance between index tip and thumb tip: distance < 20mm triggers Pinch
Fires spatial raycast from eye through pinch midpoint into 3D UI panels
Applying a 1-Euro smoothing filter to joint coordinates eliminates high-frequency sensor jitter while preserving instantaneous gesture response.