Difference between revisions of "MuJoCo WASM"

From Humanoid Robots Wiki
Jump to: navigation, search
m (Reorg)
 
(11 intermediate revisions by 2 users not shown)
Line 42: Line 42:
 
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>
  
== Build the mujoco_wasm Binary ==
+
== Running in Browser ==
Next, you'll build the MuJoCo WebAssembly binary.
+
 
 +
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.
  
=== On Linux ===
+
After adding the model files, run
 
<code>
 
<code>
mkdir build
+
python generate_index.py
cd build
 
emcmake cmake ..
 
make
 
 
</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

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