Share with the world your best moves - to the tune of the wonderful music made by JosSs!

VR devices, such as the Oculus Rift and the HTC Vive, have accurate systems to track the position and orientation of head and hands. On a-saturday-night, we wanted to create a fun experience around the idea of recording and reproducing tracking data. The mechanics are simple: Put your headset on, select an avatar, and dance. At the end of the countdown, and thanks to the magic of the Web, you will get a link like this one with the recorded dance that you can share instantly with anybody. The positions of the head and hands are sampled and persisted in a JSON format so they can be reproduced later.

Interactive animation tools

You can sample the position and orientation of a VR controller, while the application is running, and apply the recorded data immediately to any entity in the scene. We can, for instance, build an interactive animation tool for game characters and become a virtual puppeteer.

There will be two entities in the scene: one that records and the other replays.

One entity will generate the recording data. In the example above, it corresponds with one of the dancer's hand. We apply the motion-capture-recorder component to it and set recordingControls to true so that the recording/stopping will be driven by press-and-holding the trigger button on the controller.

An entity with a motion-capture-recorder can be used as a source of the component. This allows for interactive cycles of recording/replaying.

Test automation and development

The motion-capture components allow to emulate the presence of a VR headset and controllers. We can build test automation for VR experiences. One can replay the recorded user behavior and assert the state of the entities at the end. This can happen without any user intervention at all.

Recording user interactions

To record the user interactions, just drop the avatar-recorder component in your scene:

<a-scene avatar-recorder></a-scene>

The component will look for the camera and any entities using the tracked-controls component and apply the motion-capture-recorder to them. Remember to add an id to the controller entities, such that the recording information can be associated and the recording be replayed later.

The component can be configured in various ways:

Property

Description

autoRecord

The component starts recording at page load.

autoPlay

Replaying starts automatically when recording ends.

spectatorPlay

The recording replays from a third-person perspective camera.

spectatorPosition

The position of the spectator camera.

localStorage

Whether to persist the recording to window.localStorage (default: true).

saveFile

At the end of the recording, the dancer is prompted to download a JSON file with the data.

loop

The recording replays in loops after finishing.

Replaying user interactions

To replay the user's recorded motion, add the component to the scene and pass the URL to the recording data:

Final words

I hope after reading this blog post you are as excited as we are with the realization that your VR device at home is also a super-accurate motion-capture system. We cannot wait to hear your feedback about the motion-capture API and see what you do with it.