MyoHeat: a 186-muscle biomechanics sim in three.js, solved every frame

Showcase
1

MyoHeat is a browser simulator that shows which muscles carry the load in a gym exercise:

Some of the three.js side, in case it’s useful:

  • Muscles are fibre strands along each muscle’s path, re-sampled every frame by arc length, plus sculpted sheets for the broad muscles. One BufferGeometry, one draw call. A patched MeshStandardMaterial (onBeforeCompile) blends the heat colour per vertex and adds fibre shading with fwidth so it doesn’t alias.
  • Bones come from published OpenSim models (Rajagopal 2015, Thoracoscapular Shoulder Model), converted from .vtp into one binary buffer and mirrored for the left side at load.
  • The head is a Draco-compressed scan of Michelangelo’s David (CC BY 4.0 mesh of a CC0 scan) in place of the skull.
  • Physics: inverse dynamics plus a bounded least-squares solve over 186 muscle bundles, every frame on the main thread (~5 ms). The per-muscle ranking of all 52 exercises is precomputed in a Web Worker.
  • Camera mode runs MediaPipe Pose Landmarker on the device and retargets the landmarks onto the skeleton live.

Happy to go deeper on any of it. Feedback on the rendering is very welcome.

2 Likes
2

The head seems a little too small, and the muscles don’t always match the skeleton.
Otherwise, it’s a fun experiment.
In some of the exercises, the equipment goes through the body—that definitely shouldn’t happen.