MuJoCo WASM

From Humanoid Robots Wiki
Jump to: navigation, search

Install emscripten[edit]

First, you need to install emscripten, which is a compiler toolchain for WebAssembly.

Get the emsdk repo[edit]

git clone https://github.com/emscripten-core/emsdk.git

Enter that directory[edit]

cd emsdk

Download and install the latest SDK tools[edit]

./emsdk install latest

Make the "latest" SDK "active"[edit]

./emsdk activate latest

Activate PATH and other environment variables[edit]

source ./emsdk_env.sh

These variables are set for the current terminal. If you want to make it for all terminals, you can add them to any terminal profile. Here they are:

The environment variables: EMSDK = < path to emsdk dir >

EM_CONFIG = ~/.emscripten

EMSDK_NODE = < path to emsdk dir >/node/12.9.1_64bit/bin/node

Now just try it![edit]

emcc


Build the mujoco_wasm Binary[edit]

First git clone https://github.com/zalo/mujoco_wasm

Next, you'll build the MuJoCo WebAssembly binary.

mkdir build
cd build
emcmake cmake ..
make


emcmake cmake ..


make

Tip: If you get an error with "undefined symbol: saveSetjmp/testSetjmp" at the build step, revert to: ./emsdk install 3.1.56 && ./emsdk activate 3.1.56 && source ./emsdk_env.sh

Running in Browser[edit]

Run this in your mujoco folder to start a server.

python -m http.server 8000

Then navigate to:

http://localhost:8000/index.html

MuJoCo running in browser


Running in Cloud/Cluster and Viewing on Local Machine[edit]

Add extra parameter to your ssh command:

ssh -L 8000:127.0.0.1:8000 my_name@my_cluster_ip

Then you can open it on the browser on your local machine!

Adding New Models[edit]

All the models are stored in the folder examples/scenes, as seen below:

Example folder.png

You can add your own model XML and meshes here. For example, here we add the stompy folder.

After adding the model files, run python generate_index.py to update file indexes.

Then copy all the content in index.json to mujocoUtils.js, as shown below:

Add model1.png

In the end, again at file mujocoUtils.js, add the name and scene file

Add model2.png

Then reload again and you can see new models have been added:

Add model3.png