Microgestures

QUEST BROWSER

Microgestures are a Meta’s OpenXR hand-tracking extension, available on Quest 2/Pro/3/3S and supported only in Quest Browser, that expose five boolean inputs per hand—a thumb tap plus four D-pad-like swipes along the index finger—for low-effort navigation, selection, and scrolling without big arm movements.

The five boolean input states per hand are the following: swipe-left, swipe-right, swipe-forward, swipe-backward, tap-thumb. Additionally, the left hand exposes a menu gesture activated by a pinch.

The image below shows how to perform each microgesture:

To enable microgestures, the online controllers repository must be disabled until the oculus-hand profile becomes available through the WebXR controller profiles repository. With the online repository disabled, the profile will be loaded locally, allowing applications to access the Oculus hand input definitions.

<Scene
    xrDefaultExperienceOptions={{
        inputOptions: {
            disableOnlineControllerRepository: true
        }
    }}
/>

Then you can use the Microgestures component by passing gesture callbacks via props.

The following example displays the microgesture you just performed on screen.

<>
    <Microgestures
        onMenu={() => setMicrogesture('menu')}
        onTapThumb={() => setMicrogesture('tap-thumb')}
        onSwipeLeft={() => setMicrogesture('swipe-left')}
        onSwipeRight={() => setMicrogesture('swipe-right')}
        onSwipeForward={() => setMicrogesture('swipe-forward')}
        onSwipeBackward={() => setMicrogesture('swipe-backward')}
    />
    <plane name='plane' position={new Vector3(0, 1, 2)} />
    <advancedDynamicTexture kind='createForMesh' createForMesh={{ mesh: 'plane' }}>
        <textBlock name='microgesture' text={microgesture} color='white' fontSize={100} />
    </advancedDynamicTexture>
</>

Video captured with Oculus Quest 3.

Learn More

For additional info, please refer to Babylon.js documentation: https://doc.babylonjs.com/features/featuresDeepDive/webXR/WebXRSelectedFeatures/WebXRHandTracking#microgestures.