Record & Replay: Motion Capture for A-Frame

No time for blog posts today? Skip the line and get to the trendiest club of the Metaverse through the VIP access:

  1. Make sure you have a webvr enabled browser
  2. Fix your hair.
  3. Hop right into the dance floor
  4. Share with the world your best moves to the tune of the wonderful music made by joss !

VR devices like 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 position of head and hands is sampled and persisted in JSON format so it can be reproduced later.

Make your own motion capture experience

With a-saturday-night we’re also releasing a set of a-frame components for anybody to record, replay and persist the user’s motion and interactions. The data can be saved as aJSON file and reused anywhere. There are plenty of interesting applications

Interactive animation tools

You can sample the position and orientation of the 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 user’s hand. We apply the motion-capture-recorder component to it and set recordingControls to true so the start/stop recording will be driven by the press + hold of the trigger on the controller:

There are other properties that can be configured:

Property Description
autoRecord The component start recording at page load
recordingControls Start / Stop of the recording is driven by the controller
visibleStroke The motion of the entity is visible while recording. Useful to provide feedback for interactive tools
  • The other entity will replay the data recorded from the controller. We setup the motion-capture-replayer on it with the recorderEl property pointing to the entity that records the data:

Property Description
spectatorPosition The position of the spectator camera
src The recording data can be hosted in a URL
recorderEl An entity with a motion-capture-recorder can be used as a source of the component. This allows for interactive cycles of record / replay

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 with no user intervention at all.

We can also record user interactions and develop on the go where there’s no VR hardware available. One can iterate over the visual aspect or behavior of the experience using the recorded user input.

Recording user interactions

To record the user interactions just drop the avatar-recorder component in your 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 so the recording information can be associated with them and replayed later.

The component can be configured in different ways:

Property Description
autoRecord The component starts recording at page load
autoPlay Replaying starts automatically when recording ends
spectatorPlay The recording replays from a 3rd person perspective camera
spectatorPosition The position of the spectator camera
localStorage The recording is stored in localStorage
saveFile At the end of the recording the user 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:


These are the different options that the component provides:

Property Description
src The url that points to the recorded data
loop If the recording will be replayed in a loop
spectatorMode If the recording is replayed using a 3rd person camera
spectatorPosition The position of the spectator camera

Final Words

I hope after reading this blog post you are as excited as we are with the realization that your VR device 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.

MozVR Blog稿源:MozVR Blog (源链) | 关于 | 阅读提示

本站遵循[CC BY-NC-SA 4.0]。如您有版权、意见投诉等问题,请通过eMail联系我们处理。
酷辣虫 » 手机数码 » Record & Replay: Motion Capture for A-Frame

喜欢 (0)or分享给?

专业 x 专注 x 聚合 x 分享 CC BY-NC-SA 4.0

使用声明 | 英豪名录