Difference between revisions of "MuJoCo WASM"
| (12 intermediate revisions by 2 users not shown) | |||
| Line 1: | Line 1: | ||
| − | == | + | == Install emscripten == |
First, you need to install emscripten, which is a compiler toolchain for WebAssembly. | First, you need to install emscripten, which is a compiler toolchain for WebAssembly. | ||
| − | === | + | === Get the emsdk repo === |
<code> | <code> | ||
git clone https://github.com/emscripten-core/emsdk.git | git clone https://github.com/emscripten-core/emsdk.git | ||
</code> | </code> | ||
| − | === | + | === Enter that directory === |
<code> | <code> | ||
cd emsdk | cd emsdk | ||
</code> | </code> | ||
| − | === | + | === Download and install the latest SDK tools === |
<code> | <code> | ||
./emsdk install latest | ./emsdk install latest | ||
</code> | </code> | ||
| − | === | + | === Make the "latest" SDK "active" === |
<code> | <code> | ||
./emsdk activate latest | ./emsdk activate latest | ||
</code> | </code> | ||
| − | === | + | === Activate PATH and other environment variables === |
<code> | <code> | ||
source ./emsdk_env.sh | source ./emsdk_env.sh | ||
| Line 38: | Line 38: | ||
</code> | </code> | ||
| − | === | + | === Now just try it! === |
<code> | <code> | ||
emcc | emcc | ||
</code> | </code> | ||
| + | |||
| + | |||
| + | |||
| + | == Build the mujoco_wasm Binary == | ||
| + | |||
| + | First git clone | ||
| + | <code> https://github.com/zalo/mujoco_wasm </code> | ||
| + | |||
| + | Next, you'll build the MuJoCo WebAssembly binary. | ||
| + | <syntaxhighlight lang="bash"> | ||
| + | mkdir build | ||
| + | cd build | ||
| + | emcmake cmake .. | ||
| + | make | ||
| + | </syntaxhighlight> | ||
| + | |||
| + | |||
| + | |||
| + | [[File:Carbon (1).png|800px|thumb|none|emcmake cmake ..]] | ||
| + | |||
| + | |||
| + | [[File:Carbon (2).png|400px|thumb|none|make]] | ||
'''Tip:''' If you get an error with "undefined symbol: saveSetjmp/testSetjmp" at the build step, revert to: | '''Tip:''' If you get an error with "undefined symbol: saveSetjmp/testSetjmp" at the build step, revert to: | ||
| Line 48: | Line 70: | ||
</code> | </code> | ||
| − | == | + | == Running in Browser == |
| − | + | ||
| + | Run this in your mujoco folder to start a server. | ||
| + | |||
| + | <code> | ||
| + | python -m http.server 8000 | ||
| + | </code> | ||
| + | |||
| + | Then navigate to: | ||
| + | |||
| + | <code> | ||
| + | http://localhost:8000/index.html | ||
| + | </code> | ||
| + | [[File:Wasm screenshot13-40-40.png|800px|thumb|none|MuJoCo running in browser]] | ||
| + | |||
| + | |||
| + | == Running in Cloud/Cluster and Viewing on Local Machine == | ||
| + | Add extra parameter to your ssh command: | ||
| + | |||
| + | <code> | ||
| + | ssh -L 8000:127.0.0.1:8000 my_name@my_cluster_ip | ||
| + | </code> | ||
| + | |||
| + | Then you can open it on the browser on your local machine! | ||
| + | |||
| + | == Adding New Models == | ||
| + | All the models are stored in the folder examples/scenes, as seen below: | ||
| + | [[File:Example folder.png|400px|thumb|none]] | ||
| + | You can add your own model XML and meshes here. For example, here we add the stompy folder. | ||
| − | + | After adding the model files, run | |
<code> | <code> | ||
| − | + | python generate_index.py | |
| − | |||
| − | |||
| − | |||
</code> | </code> | ||
| + | to update file indexes. | ||
| + | |||
| + | Then copy all the content in <code>index.json</code> to <code> mujocoUtils.js</code>, as shown below: | ||
| + | [[File:Add model1.png|400px|thumb|none]] | ||
| + | |||
| + | In the end, again at file <code> mujocoUtils.js</code>, add the name and scene file | ||
| + | [[File:Add model2.png|600px|thumb|none]] | ||
| + | |||
| + | Then reload again and you can see new models have been added: | ||
| + | [[File:Add model3.png|800px|thumb|none]] | ||
Latest revision as of 23:09, 27 May 2024
Contents
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
.png)
.png)
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
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:
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:
In the end, again at file mujocoUtils.js, add the name and scene file
Then reload again and you can see new models have been added:
