Skip to main content
Renders debug overlays for MuJoCo simulation elements — geom wireframes, site markers, joint axes, contact forces, center of mass, and more.

​
Usage

<MujocoCanvas config={config}>
  <Debug showSites showJoints showContacts />
</MujocoCanvas>

​
Props

​
showGeoms
boolean
default:"false"
Show wireframe outlines of collision geoms.
​
showSites
boolean
default:"false"
Show MuJoCo sites as small octahedrons.
​
showJoints
boolean
default:"false"
Show joint axes as colored arrows.
​
showContacts
boolean
default:"false"
Show contact force vectors as arrows.
​
showCOM
boolean
default:"false"
Show center of mass markers for each body.
​
showInertia
boolean
default:"false"
Show inertia ellipsoids.
​
showTendons
boolean
default:"false"
Show tendon paths.
​
geomColor
string
default:"#00ff00"
Color for wireframe geoms.
​
siteColor
string
default:"#ff00ff"
Color for site markers.
​
contactColor
string
default:"#ff4444"
Color for contact force arrows.
​
comColor
string
default:"#ff0000"
Color for center of mass markers.

​
How It Works

  • Static geometry (geoms, sites, joints) is created once when the model loads
  • Positions are updated every frame using preallocated temp vectors to minimize GC pressure
  • Contact arrows use a pre-created pool of 50 ArrowHelper objects — they are shown/hidden and repositioned each frame rather than created and disposed

​
Example: Debug Panel Toggle

function App() {
  const [debug, setDebug] = useState({
    sites: false, joints: false, contacts: false,
  });

  return (
    <MujocoCanvas config={config}>
      <Debug
        showSites={debug.sites}
        showJoints={debug.joints}
        showContacts={debug.contacts}
      />
    </MujocoCanvas>
  );
}

​
Example: Custom Colors

<Debug
  showSites
  showContacts
  showCOM
  siteColor="#00ffff"
  contactColor="#ff8800"
  comColor="#ffff00"
/>