> The library and utility are designed to simplify the creation of applications using hand gesture recognition. They also include other useful features for working with virtual reality headsets.

Source: https://doc.babylonjs.com/communityExtensions/WebXRExtension

# WebXR Extension

## Introduction
The package provides a set of various features for working with hand gestures and organizing spaces in immersive mode.

## Installation
Just install the package `@clickon/xr-extension` with npm:
```shell
npm i @clickon/xr-extension
```

## Usage

### Initiation and exit
Now you can initialize and use the service provided by the package. The service uses the standard WebXRDefaultExperience and does not interfere with its operation. This means you can continue using any standard WebXR features provided by BabylonJS.
```typescript
const xrService = new XRService();
await xrService.init(scene, options);
```

The service will be initialized with the options you provide.

```typescript
export type TXRServiceOptions = {
	mode: 'immersive-vr' | 'immersive-ar';
	features?: TXRFeaturesConfig;
	needBabylonUIEnterButton?: boolean;
	floors?: string[];
	enableColliding?: boolean;
	debugConfig?: TClickLoggerOptions & {
		outSlotName: string;
		isLoggerDeactivated?: boolean;
	};
};
```
Some of these values will be passed to the standard BabylonJS functions that handle XR,
while others will configure the XRService itself.

*IXRService* and *TXRFeaturesConfig* define the capabilities of the service.

Example of entering and exiting immersive mode after initialization:
```typescript
isOk = await xrService.activateXR();
// do some
xrService.exitFromXR();
```

### Access to features
Primarily, _XRService_ is used to access XR feature wrappers or the features 
themselves and work with them. The set of features and their initial configuration 
are defined by the _features?:TXRFeaturesConfig_ field in _TXRServiceOptions_.

```typescript
const handTrackingFeatureEnv = xrService.extractFeatureEnv('HAND_TRACKING');
if(handTrackingFeatureEnv){
    // interract with feature wrapper
}
```
All feature wrappers implement _IXRFeatEnv_ and provide access to native XR features of Babylon.js.
Prefer the functions and attributes of the wrappers whenever they are provided.
All functions and attributes are described by corresponding interfaces for each wrapper.
```typescript
export interface IXRFeatEnv<NATIVE_FEAT_TYPE extends IWebXRFeature = IWebXRFeature>{
	//...
	readonly nativeFeature: NATIVE_FEAT_TYPE | undefined;
	//...
}
```

## Videos

- [Typical workflow](https://youtu.be/QT25wo62S24?si=G1kU0pTgHXFeqFqZ)
- [Recording hand gesture](https://youtu.be/-vC6TPvXMiE?si=Zrk68DTNObeGfORC)
- [Gesture recognition](https://youtu.be/brveNlSEnns?si=pBVsPjkFmYvB5cHc)
- [Space markup. Restriction](https://youtu.be/syFqnBxBcNU?si=CiomZiafmc9kuhxb)
- [Stairs](https://youtu.be/MKc1mn3_eRU?si=VUiIPphVfnKhPlDe)
- [Set the possible direction](https://youtu.be/ti8ViO6BcgI?si=ibzFOYs-oQuUyphb)
- [Teleportation](https://youtu.be/MFa_kNC7smo?si=sa5okqG6BJF5GwK6)
- [Slopes](https://youtu.be/5XaNzpdk2B8?si=C76XkHajSJu0wJ-b)
- [VUE3 based 3D GUI with gestures](https://youtu.be/tTbBMga-RVc?si=t6UtGdEUfTD-KGEd)

## Further reading

- [Article](https://medium.com/@drblax/gesture-recognition-babylonjs-webxr-a5d286c62c8f)
- [Live demos and utility](https://webxr.projects.clickon.pro)

## Pages in this section

- [WebXR extension / Gesture recognition](https://doc.babylonjs.com/communityExtensions/WebXRExtension/gestureRecognition.md): Gesture and combination recognition
- [WebXR extension / Hands Animation](https://doc.babylonjs.com/communityExtensions/WebXRExtension/handsAnimation.md): Hand animations: recording and playback
- [WebXR extension / Space markup](https://doc.babylonjs.com/communityExtensions/WebXRExtension/spaceMarkUp.md): Space markup in immersive mode