How to use ammo.js with Three.js?

Integrate by loading ammo.js as a script, then use the Ammo namespace to create physics bodies and sync them with Three.js meshes. The WebGL demos in the repo provide a starting point, but you'll need to handle the rendering loop manually.

ammo.js vs cannon.js – which is better for web games?

ammo.js offers full Bullet features like soft body physics, making it ideal for complex 3D simulations, while cannon.js is lighter and more JavaScript-friendly for simpler rigid body needs. Choose based on project scale: ammo.js for fidelity, cannon.js for ease.

How to reduce ammo.js build size?

Edit the ammo.idl file to remove unneeded interfaces like btIDebugDraw, or adjust build flags with -DCLOSURE=1 during cmake configuration. This requires familiarity with the Bullet codebase, as outlined in the README.

Can ammo.js handle 2D physics?

Yes, but it's overkill since ammo.js is a 3D engine ported from Bullet. For pure 2D physics, libraries like Matter.js or Box2D.js are more efficient and easier to use, as ammo.js adds unnecessary complexity.

Why am I getting 'Cannot read property ptr of undefined' in ammo.js?

This common error occurs when forgetting the 'new' keyword when creating objects, like var vec = Ammo.btVector3(1,2,3) instead of with 'new'. The troubleshooting section explicitly warns about this JavaScript pitfall.

How to run ammo.js in a web worker for better performance?

Load ammo.js in the worker script and use postMessage to communicate physics updates with the main thread. The example webgl_demo/worker.js shows this pattern, but note that memory sharing can be tricky with WebAssembly.

Open-Awesome

Ammo.js

NOASSERTIONC++

A direct port of the Bullet physics engine to JavaScript using Emscripten for web-based physics simulations.

GitHub

4.5k stars580 forks0 contributors

What is Ammo.js?

ammo.js is a direct port of the Bullet physics engine to JavaScript, compiled using Emscripten. It enables developers to integrate a full-featured, industry-standard physics engine into web applications, providing realistic simulations for games, interactive 3D experiences, and scientific visualizations without requiring a native plugin.

Target Audience

Web developers and game creators building browser-based 3D applications, simulations, or interactive experiences that require accurate physics, such as those using WebGL, Three.js, or other web graphics libraries.

Value Proposition

Developers choose ammo.js because it offers the complete functionality of the mature Bullet physics engine in a web-compatible format, eliminating the need to implement physics from scratch or rely on less capable alternatives, while maintaining performance through WebAssembly and asm.js builds.

Overview

Direct port of the Bullet physics engine to JavaScript using Emscripten

Use Cases

Best For

Adding rigid body physics to WebGL-based games
Creating interactive 3D simulations with collision detection
Implementing soft body physics like cloth or rope in web demos
Building vehicle physics systems for browser-based driving games
Developing educational physics visualizations for the web
Porting existing C++ Bullet projects to run in a browser

Not Ideal For

Projects needing only lightweight 2D physics without 3D features
Teams unfamiliar with C++ or Bullet's API who prefer JavaScript-native libraries
Quick prototypes where setup time and bundle size are critical constraints
Mobile-first web apps where large WebAssembly downloads could impact performance

Pros & Cons

Pros

Industry-Standard Feature Set

Provides the complete Bullet physics engine, including rigid body dynamics, collision detection, and soft body physics, as evidenced by the demos for cloth, ropes, and vehicles.

High Performance Options

Supports both WebAssembly and asm.js builds, allowing optimization for modern browsers while maintaining compatibility, as highlighted in the separate demo links.

Direct Bullet API Access

Autogenerated bindings expose the Bullet API via the Ammo.* namespace, enabling precise control identical to the C++ original, as shown in the example worker.js code.

Advanced Simulation Capabilities

Includes specialized systems for soft bodies, vehicles, and terrain, demonstrated in WebGL demos like the heightmap and vehicle examples.

Cons

Cumbersome JavaScript API

The autogenerated bindings require verbose getter/setter functions for member variables and careful use of 'new', leading to error-prone code, as noted in the troubleshooting section.

Complex Build Process

Building from source demands Emscripten and cmake setup, with options like closure compilation, which adds overhead compared to drop-in libraries.

Large Bundle Size

The full Bullet port results in substantial file sizes, and reducing them requires manual editing of ammo.idl or build flags, as admitted in the 'Reducing Build Size' section.

Sparse JavaScript Documentation

The README focuses on C++ porting and build instructions, with limited guidance for JavaScript users, relying heavily on example code that may not cover all use cases.

Frequently Asked Questions

Related Projects

Vue

This is the repo for Vue 2. For Vue 3, go to https://github.com/vuejs/core

Stars209,881

Forks33,861

Last commit1 year ago

Bootstrap

The most popular HTML, CSS, and JavaScript framework for developing responsive, mobile first projects on the web.

Stars174,308

Forks78,849

Last commit22 hours ago

electron

:electron: Build cross-platform desktop apps with JavaScript, HTML, and CSS

Stars121,570

Forks17,247

Last commit1 day ago

Bring data to life with SVG, Canvas and HTML. :bar_chart::chart_with_upwards_trend::tada:

Stars113,031

Forks22,720

Last commit11 days ago

Community-curated · Updated weekly · 100% open source

Found a gem we're missing?

Open-Awesome is built by the community, for the community. Submit a project, suggest an awesome list, or help improve the catalog on GitHub.

Submit a project Star on GitHub