JavaScript

From Pixels to Physics: 10 JS Engines That Make Stuff Actually Move (for 2D and 3D)

Hazem Abbas

Jun 23, 2025 — 9 min read

Table of Content

What Is a JS Physics Engine? And Why You Might Actually Need One

If you’ve ever made something interactive, a game, a simulation, an animated visual, and wanted things to move like they do in real life , you’ve probably hit a wall trying to fake gravity, bouncing, or collisions.

Enter: the JavaScript (JS) physics engine .

Think of it as your secret weapon for making stuff move right, without reinventing physics from scratch.

What Does It Do?

A JS physics engine is a library that simulates real-world movement in 2D or 3D space. It handles:

Simulating Gravity – things fall down (or sideways if you're feeling wild)
Velocity & acceleration – how fast things go and how they speed up/slow down
Collision detection & response – knowing when things hit each other, and what happens next
Rigid bodies – objects that don’t bend or break when they crash
Friction – how slippery or grabby surfaces are
Kinematic bodies – things you control directly, like a character or moving platform
Ray casting – shooting invisible beams to detect what’s ahead (great for AI or aiming)
Joints – connecting objects like ropes, hinges, and springs
Lines and shapes – used to define object boundaries and interactions

You don’t have to code all this yourself — the engine does the math so you can focus on building cool stuff.

Why Bother Using One?

Because realism = immersion.

I’ve built games where blocks tumble, chains swing, and players actually feel the weight of their actions, all because I plugged in a physics engine like Matter.js , p2.js , or a web-ready version of Box2D .

Beyond games, I've used them for:

Interactive data visuals where nodes bounce and repel
Product demos with parts that snap and rotate like real machines
Digital art pieces where motion feels alive and natural

In short: If your project moves, collides, or reacts, and needs to feel real, a physics engine isn’t just nice to have. It’s a must.

The Real Win: Less Headache, More Flow

Sure, you can fake physics. But doing it well takes more time than using a solid tool that already works.

These engines are tested, fast, and open-source, meaning fewer bugs, better performance, and more room for creativity.

So next time you're building something interactive, ask yourself:

Do I want to simulate physics… or just make it look like I did?

Your answer might be a JS physics engine away.

But which engine you need for your project, well that depends.

Therefore, we built this list for you.

1- Matter.js

Matter.js is a standalone free and open-source 2D Physics engine for the web. It comes with many features, rich documentations and tutorial set, and several demos.

It supports:

Rigid bodies
Compound bodies
Composite bodies
Concave and convex hulls
Physical properties (mass, area, density etc.)
Restitution (elastic and inelastic collisions)
Collisions (broad-phase, mid-phase and narrow-phase)
Stable stacking and resting
Conservation of momentum
Friction and resistance
Events
Constraints
Gravity
Sleeping and static bodies

2- Cannon-es

This is a free and open-source lightweight and simple 3D physics engine for the web. It is built on top of Three.js and can be easily integrated with Three.js projects.

It has a comprehensive docs and dozens of free and open-source demo with readable code. If you are looking for a Three.js compatible library, Cannon-es is your to go engine.

cannon-es

A lightweight 3D physics engine written in JavaScript.

Stefan Hedman (schteppe)

3- Oimo.js (3D Physics)

Oimo.js is a lightweight 3d physics engine for JavaScript. It's a full javascript conversion of OimoPhysics. While it is originally created for ActionScript, This old JavaScript port is still highly usable. You can enjoy exploring many demos, and creating 3D world easily with Oimo.js.

But the question here is, will it work easily with VR or not, only a true tester can tell.

4- Planck.js (2D Physics Engine)

Planck.js is a JavaScript/ TypeScript version of the Box2D physics engine. It brings accurate 2D physics to web and mobile games. Built for readability and performance, it offers a clean API, making it easy to use in HTML5 games and interactive apps across platforms.

5- p2-es (2D)

p2-es is a 2D rigid body physics engine written entirely in JavaScript. Features include collision detection, contacts, friction, restitution, motors, springs, advanced constraints and various shape types.

It is an ideal solution if you are looking for a simple, lightweight yet powerful to integrate in your 2D app or game!

6- Propel-js

Propel-js is a tiny, open-source physics library for TypeScript, designed for game developers. It offers basic shapes, joints, and compound bodies, with a focus on serializable state — perfect for networked games and lightweight physics needs in web projects.

7- 2D Rigidbody Physics Engine

This is a TypeScript-written physics engine featuring rigid bodies, convex polygons, circles, and real-time interactive simulation. Uses density-based body definitions and includes advanced collision detection (broad/narrow phase), AABB trees, GJK distance computation, and EPA contact generation.

Key Features

Real-time physics simulation
Rigid body dynamics
Shape support: convex polygons, circles
Density-based mass properties
Broad-phase & narrow-phase collision detection
Dynamic AABB tree for efficient spatial queries
GJK algorithm for shape distance calculation
EPA for contact manifold generation
Collision resolution
- Impulse-based collision response
- Friction and restitution
- Iterative solver (Sequential impulses)
- Collision callbacks
Constraint-based simulation
- Contact constraint
- Joints: Revolute, Prismatic, Distance, Max distance, Weld, Motor, Line, Angle and Grab
- Soft constraints
- 2-contact LCP solver (Block solver)
Optimization
- Constraint islanding
- Island(Rigid body) sleeping

8- p2.js (2D)

p2.js is a 2D physics engine for JavaScript with support for rigid bodies, constraints, collisions, and advanced shapes. It includes demos like buoyancy, vehicles, and ragdolls, plus examples for Canvas and Pixi.js, making it ideal for games, simulations, and interactive web apps with realistic physics behavior.

9- ammo.js (3D)

ammo.js is a direct, auto-converted port of the Bullet physics engine to JavaScript using Emscripten. It brings high-performance 3D physics to the web, enabling realistic simulations and games with minimal effort and maximum power.

ammo.js is built for game devs, simulation creators, and performance-driven coders.

ammo.js features:

Run high-performance physics simulations using WebAssembly or asm.js
Access the full Bullet API through auto-generated JavaScript bindings
Work with JavaScript or TypeScript — no C++ knowledge required
Create complex physics scenes with rigid bodies, soft bodies, vehicles, cloth, rope, and more
Integrate seamlessly with WebGL for real-time 3D visuals and games
Reduce file size by removing unused features and optimizing builds
Test your implementations easily using built-in AVA test scripts
Extend and customize the API by modifying IDL definitions and contributing via PRs
Debug physics interactions visually using the debug drawer and WebGL demos
Build and deploy live physics-based demos as web apps or desktop wallpapers
Use real-world 3D physics in the browser powered by the proven Bullet engine
Deploy powerful simulations without sacrificing performance or flexibility
Use modern tooling like Docker and npm to build and customize your workflow

10- Physics-js (2D)

This is an amazing real-time 2D physics showcase built with a custom JavaScript engine. Features dynamic snowfall, growing snowdrifts, interactive smoke particles, and procedurally generated terrain. It comes with six time-of-day themes that sync with your local sun position for an immersive experience.