https://github.com/drumath2237/babylon-body-tracking-testbed

webxr body tracking feature testbed with babylon.js
https://github.com/drumath2237/babylon-body-tracking-testbed

babylonjs webxr

Last synced: 3 months ago
JSON representation

webxr body tracking feature testbed with babylon.js

• Host: GitHub
• URL: https://github.com/drumath2237/babylon-body-tracking-testbed
• Owner: drumath2237
• License: apache-2.0
• Created: 2024-04-20T18:41:26.000Z (9 months ago)
• Default Branch: main
• Last Pushed: 2024-06-02T10:09:50.000Z (7 months ago)
• Last Synced: 2024-09-27T12:02:59.435Z (3 months ago)
• Topics: babylonjs, webxr
• Language: TypeScript
• Homepage: https://drumath2237.github.io/babylon-body-tracking-testbed/
• Size: 37.1 KB
• Stars: 2
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE.md

Awesome Lists containing this project

README

        
# Babylon.js WebXR Body Tracking Testbed

[![Deploy](https://github.com/drumath2237/babylon-body-tracking-testbed/actions/workflows/deploy.yml/badge.svg)](https://github.com/drumath2237/babylon-body-tracking-testbed/actions/workflows/deploy.yml)

https://github.com/drumath2237/babylon-body-tracking-testbed/assets/11372210/d4ac4dcb-dd70-4fa1-adb9-44b938b8226b

## About

An experiment for implementing Babylon.js WebXR Body Tracking Feature.

## Environment

- Meta Quest v65.0.0.546.596219110

- Quest Browser 33.2.0.74.167.602488549

- Babylon.js 7.3.1

## Usage

```bash

# install dependencies

pnpm install

# start dev server

pnpm dev

# build projects

pnpm build

```

> [!IMPORTANT]

> You need to enable WebXR Experiments flag on Quest Browser (for body-tracking).

> To do this, access chrome://flags and serach "webxr" in serch bar.

[>> Demo Page <<](https://drumath2237.github.io/babylon-body-tracking-testbed/)

## API Spec

```ts

const xr = await scene.createDefaultXRExperienceAsync({

  uiOptions: {

    sessionMode: "immersive-ar",

    referenceSpaceType: "bounded-floor",

  },

});

const { featuresManager, sessionManager } = xr.baseExperience;

// init body-tracking feature

const bodyTracking = featuresManager.enableFeature(

  WebXRBodyTracking.Name,

  "latest",

  {

    mirrorZ: true, // swap z-direction

    baseXRSpace: sessionManager.referenceSpace, // base XRSPace

  }

) as WebXRBodyTracking;

// acquire body joints data from event

bodyTracking.onBodyTrackedObservable.add((joints) => {

  // acquire body joints count

  const jointCount = joints.size;

  // usage of acquire specific joint pose

  const headJoint = joints.get("head");

  if (headJoint) {

    headJoint.position;

    headJoint.rotation;

  }

  // you can iterate joints by for-statement

  for (const [jointName, { position, rotation }] of joints) {

  }

  // or...

  joints.forEach(({ position, rotation }, jointName) => {});

});

// you can also use Frame capture loop

sessionManager.onXRFrameObservable.add(() => {

  if (bodyTracking.size === 0) return;

  const joints = bodyTracking.joints;

});

```

## Author

@drumath2237