MuJoCo Web

sim.mp4

Table of Contents

• Introduction
• Status
• Installation
• Inspiration
• Project layout

Introduction

MuJoCo Web is a repository dedicated to compiling MuJoCo (Multi-Joint dynamics with Contact) into WebAssembly (WASM) for seamless execution within a React web application.

This project is tailored for Linux Ubuntu 22.04 and 24.04 environments and aims to facilitate interactive physics simulations directly in the browser.

Status

MuJoCo 3.2.5 builds currectly into WebAssembly with patches and pthread support.

The React application can load a Mujoco scene and run the simulation. PNG textures are not yet supported.

Installation

Please read the following document to install the two main components of this application:

• MuJoCo WASM

• React Web Application

Inspiration

This project draws inspiration and code from the following repositories:

https://github.com/stillonearth/MuJoCo-WASM

https://github.com/zalo/mujoco_wasm

These projects provided foundational insights and methodologies that have been adapted and expanded upon to suit the objectives of MuJoCo Web.

Project layout

• dist/: This folder (created on demand) contains the production-ready, compiled output of your project. After building the project (usually with Vite or another build tool), all the files required for deployment, including optimized JavaScript, CSS, and other assets, are placed in this directory. This is the folder that gets served to users in a live environment, such as GitHub Pages.

• mujoco/: This folder contains the patches and the CMake files to compile MuJoCo into WebAssembly.

• public/: This folder contains static assets used by the website such as images or HTML files.

• src/: This folder contains the React application's source code.

• eslint.config.js: This file contains the configuration for ESLint, a static code analysis tool used to identify and fix problems in JavaScript and TypeScript code. It defines linting rules, environments, and any custom settings for code quality enforcement.

• package.json: This is the core file for managing a Node.js project. It lists the project's metadata (name, version, etc.), dependencies, scripts, and configuration for the project, including the packages required to run and build the application.

• pnpm-lock.yaml: This file is automatically generated by pnpm. It locks the exact versions of dependencies used in the project, ensuring that the same dependency versions are installed each time, helping maintain consistency across different environments.

• tsconfig.app.json: This file is a TypeScript configuration specifically for the application's code. It typically extends the base tsconfig.json and customizes settings for compiling the main application code, such as module resolution and compiler options.

• tsconfig.json: The main TypeScript configuration file. It defines compiler options, file inclusions, and project-specific settings for TypeScript. It is often extended by other TypeScript configuration files for more specific use cases.

• tsconfig.node.json: This configuration file is tailored for Node.js-specific code in a TypeScript project. It includes settings and compiler options that are relevant when writing Node.js scripts or server-side code.

• vite.config.ts: This is the configuration file for Vite, the build tool and development server. It defines settings related to how Vite builds and serves the project, including plugins, paths, and optimizations tailored for your frontend framework (like React).