tldraw physics

This repo demonstrates a simple physics integration with tldraw. It uses Rapier, a rust-based physics engine compiled to WASM

Setup

yarn install
yarn dev

Multiplayer is supported* using yjs and partykit. To deploy:

yarn deploy

*Note that this is a terrible way to do multiplayer and there is no handling for multiple clients with overlapping physics sims. It's essentially the same as a single client manually moving many shapes each frame. If you find it's stalling on "Connecting..." you can disable multipayer by commenting out line 22 in App.tsx (store={store}). PRs for multiplayer fixes are very welcome!

Usage

Select shapes you wish to include in the physics simulation
Click the "Physics" button
Watch it go brrrrrrrrrr!
Click "Physics" again to stop the simulation

Rules

Currently, only GeoShapes and DrawShapes are supported. Physical properties are determined by the shape's props. The following are supported:

Black: Static Collider
All other colors: Rigidbody with gravity

Special Props

Grey: Zero gravity
Blue: Zero friction (i.e. ice)
Orange: High restitution coefficient (i.e. bouncy rubber)
Violet: character controller (move with arrow keys) - only works with oval shape for now

Groups You can group shapes to create compound rigidbodies. Physical properties will still work, so you can create shapes which are part ice and part rubber, for example.

Notes and Gotchas

All geo shapes are treated as convex hulls
Draw shapes use a very crude compound collider approach, where each vertex is turned into a sphere
There is no edge to the world, so rigidbodies will fall forever

Known Issues

Simulation speed is not always consistent
Multiplayer hangs on connecting sometimes, for some browsers (Safari/Firefox)
There's a bug with groups where the physics geometry doesn't match the tldraw geometry

Contributing

Please open an issue or PR if you have any suggestions or improvements! Especially looking for: