An example of how to bring mocap data captured with Shopify's handy tool to the web.

You can run it by clicking this link.

The animation you see in the live demo was motion-captured using a Meta Quest 2 headset. The hands were captured using the hand-tracking feature of the headset, and the head simply follows the transform of the headset itself.

It's amazing how VR headsets are becoming capable motion capture platforms. With the Meta Quest Pro's eye and face tracking one could even capture facial expressions with high fidelity.

If you own a Meta Quest 1, 2 or Pro and are interested in using them for motion capture, check out Shopify's handy tool.

This project was written using C++ and OpenGL. It was then compiled to WebAssembly using Emscripten. The open source libraries it uses and their purposes are the following:

• GLFW is used to receive inputs.
• Dear ImGui is used for the user interface.
• GLAD is used to load pointers to OpenGL functions.
• GLM is used to do linear algebra.
• stb_image is used to load textures.
• cgltf is used to parse glTF files.
• Imath and Alembic are used to load motion capture data.
• handy was used to mocap.

The code that reads and plays Alembic files was written by i-saint. It can be found here.

The geisha mask was created by naxete. It can be found here.

The samurai mask was created by flioink. It can be found here.

This project can be built as a Windows desktop application, a macOS desktop application, and a website.

To build it as a Windows desktop application use the Visual Studio 2022 solution that's inside the VS2022_solution folder. Note that the solution can only be built in Release mode right now.

To build it as a macOS desktop application use the Xcode project that's inside the Xcode_Project folder.

To build it as a website you will first need to clone Emscripten, and then you will need to follow the steps below. Note that I have only tried this on macOS.

• In the root directory of your emscripten clone run this command:

source ./emsdk_env.sh

• Then navigate to the build folder that's in the root of this repository and run these commands:

emcmake cmake ..
make

• After that you can run a local webserver with this command:

python -m http.server

• That will allow you to see the project running here: http://localhost:8000/

If you observe linker errors when you try to build the project as a website, then you probably need to build the Imath and Alembic libraries using emcmake. Below are the steps I followed to do that. Note that I have only tried this on macOS.

To build Imath I did the following:

• Downloaded release 3.1.6
• Placed it in a folder called Imath-3.1.6
• Created a folder next to that one called Imath_build
• Created a folder next to the previous two called Imath_install
• In the root directory of my emscripten clone I ran this command:

source ./emsdk_env.sh

• Then I navigated to the Imath_build folder and ran these commands:

emcmake cmake -DIMATH_CXX_STANDARD=17 -DBUILD_SHARED_LIBS=OFF -DCMAKE_INSTALL_PREFIX=/Users/JaneDoe/Desktop/Imath_install /Users/JaneDoe/Desktop/Imath-3.1.6
emmake make install

• The output of the build could then be found in the Imath_install folder
• Finally, I updated the contents of these folders with the output:

<root_of_this_repository>/dependencies/Imath/inc/mac
<root_of_this_repository>/dependencies/Imath/lib/mac

To build Alembic I did the following:

• Cloned the Alembic repo into a folder called alembic
• Created a folder next to that one called alembic_build
• Created a folder next to the previous two called alembic_install
• Opened this file: /Users/JaneDoe/Desktop/alembic/cmake/AlembicIlmBase.cmake
• Added this line at the very top:

SET(Imath_DIR /Users/JaneDoe/Desktop/Imath_install/lib/cmake/Imath)

• In the root directory of my emscripten clone I ran this command:

source ./emsdk_env.sh

• Then I navigated to the alembic_build folder and ran these commands:

emcmake cmake -DALEMBIC_SHARED_LIBS=OFF -DCMAKE_INSTALL_PREFIX=/Users/JaneDoe/Desktop/alembic_install -DUSE_HDF5=OFF -DUSE_MAYA=OFF -DUSE_PYALEMBIC=OFF -DCMAKE_CXX_STANDARD=17 /Users/JaneDoe/Desktop/alembic
emmake make
emmake make install

• The output of the build could then be found in the alembic_install folder
• Finally, I updated the contents of these folders with the output:

<root_of_this_repository>/dependencies/Alembic/inc/mac/Alembic
<root_of_this_repository>/dependencies/Alembic/lib/mac