Difference between revisions of "MuJoCo WASM"

From Humanoid Robots Wiki
Jump to: navigation, search
 
(13 intermediate revisions by 2 users not shown)
Line 1: Line 1:
== Building ==
+
== Install emscripten ==
 
 
=== 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 ====
+
=== 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 ====
+
=== Enter that directory ===
 
<code>
 
<code>
 
cd emsdk
 
cd emsdk
 
</code>
 
</code>
  
==== Download and install the latest SDK tools ====
+
=== Download and install the latest SDK tools ===
 
<code>
 
<code>
 
./emsdk install latest
 
./emsdk install latest
 
</code>
 
</code>
  
==== Make the "latest" SDK "active" ====
+
=== Make the "latest" SDK "active" ===
 
<code>
 
<code>
 
./emsdk activate latest
 
./emsdk activate latest
 
</code>
 
</code>
  
==== Activate PATH and other environment variables ====
+
=== Activate PATH and other environment variables ===
 
<code>
 
<code>
 
source ./emsdk_env.sh
 
source ./emsdk_env.sh
Line 40: Line 38:
 
</code>
 
</code>
  
==== Now just try it! ====
+
=== 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 50: Line 70:
 
</code>
 
</code>
  
=== 2. 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:
  
==== On Linux ====
 
 
<code>
 
<code>
mkdir build
+
http://localhost:8000/index.html
cd build
 
emcmake cmake ..
 
make
 
 
</code>
 
</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:
  
=== 2. Build the mujoco_wasm Binary ===
+
<code>
Next, you'll build the MuJoCo WebAssembly binary.
+
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