Jump to content

Connect SuperML | Leeroopedia MCP: Equip your AI agents with best practices, code verification, and debugging knowledge. Powered by Leeroo — building Organizational Superintelligence. Contact us at founders@leeroo.com.

Implementation:Google deepmind Mujoco WASM Demo App

From Leeroopedia
Knowledge Sources
Domains WebAssembly, 3D Visualization, Demo Application
Last Updated 2026-02-15 04:00 GMT

Overview

Implements a TypeScript demo application that uses MuJoCo WASM with Three.js to render a particle physics simulation in the browser.

Description

app.ts is a browser-based demo that loads the MuJoCo WASM module (loadMujoco) and renders a 3D physics simulation using Three.js with OrbitControls. It defines an inline MJCF XML model featuring a particle system with 10x10x10 replicated bodies, ground plane, bounding walls, and a mocap capsule. The demo initializes a WebGL scene with directional lighting, haze effects, shadow mapping, and uses the MuJoCo simulation loop to update particle positions each frame. This serves as a reference implementation for integrating MuJoCo WASM into web applications.

Usage

Run as a standalone web application (via Vite dev server or production build) to demonstrate MuJoCo WASM capabilities in a browser environment with real-time 3D rendering.

Code Reference

Source Location

Key Functions

import * as THREE from "three"
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js"
import loadMujoco from "../dist/mujoco_wasm.js"

declare function loadMujoco(): Promise<MainModule>;

let mujoco: any;

const modelXml = `<mujoco model="Particle"> ... </mujoco>`;

Import

import * as THREE from "three"
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js"
import loadMujoco from "../dist/mujoco_wasm.js"

I/O Contract

Inputs

Name Type Required Description
mujoco_wasm.js WASM module Yes Compiled MuJoCo WASM module loaded at startup
modelXml string Yes Inline MJCF XML string defining the particle simulation model

Outputs

Name Type Description
WebGL canvas HTMLCanvasElement Rendered 3D scene with real-time physics simulation
Three.js scene THREE.Scene 3D scene graph with particle geometry and lighting

Related Pages

Page Connections

Double-click a node to navigate. Hold to expand connections.
Principle
Implementation
Heuristic
Environment