Física para jogos web

A simulação de física dá vida aos jogos — objetos caindo, bolas quicando, ragdolls, veículos e ambientes destrutíveis. Este guia aborda as principais bibliotecas de física disponíveis para jogos web, com exemplos reais de código e uma avaliação sincera dos prós e contras.

Visão geral

Mecanismo	Dimensão	Desempenho	Tamanho	Dificuldade	Corpos deformáveis	Veículos	CCD	Determinismo
Rapier	2D/3D	⭐⭐⭐⭐⭐	1,4 MB	Média	—	✅	✅	✅
Cannon-es	3D	⭐⭐⭐	150 KB	Fácil	—	—	—	—
Ammo.js	3D	⭐⭐⭐⭐⭐	1–2 MB	Difícil	✅	✅	✅	⚠️
Jolt	3D	⭐⭐⭐⭐⭐	—	Difícil	✅	✅	✅	✅
Oimo.js	3D	⭐⭐⭐	100 KB	Fácil	—	—	—	—
Matter.js	2D	⭐⭐⭐	80 KB	Fácil	—	—	—	⚠️
Planck.js	2D	⭐⭐⭐⭐	120 KB	Média	—	—	✅	⚠️
p2-es	2D	⭐⭐⭐	100 KB	Média	—	—	—	—
Box2D WASM	2D	⭐⭐⭐⭐⭐	300 KB	Difícil	—	—	✅	✅

Legenda:

CCD = detecção contínua de colisão (impede que objetos rápidos atravessem paredes)
⚠️ Determinismo = possível com um passo de tempo fixo, mas não é garantido entre plataformas

Recomendações rápidas

Sua situação	Melhor escolha
Jogo 3D para produção	Rapier — melhor desempenho, API moderna e desenvolvimento ativo
Aprendizado/protótipo	Cannon-es (3D) ou Matter.js (2D) — APIs simples e depuração fácil
Física de veículos	Rapier ou Ammo.js — ambos têm controladores de veículos por ray cast
Corpos deformáveis, tecidos e cordas	Ammo.js ou Jolt (JoltPhysics.js) — ambos oferecem suporte a tecidos e corpos deformáveis; o port WASM do Jolt recebe manutenção mais ativa
Jogo de plataforma 2D preciso	Planck.js — algoritmos do Box2D, determinístico com passo de tempo fixo
Desempenho máximo em 2D	Box2D WASM — velocidade nativa no navegador
Menor tamanho de bundle	Oimo.js (3D) ou Matter.js (2D)

Comparação detalhada

Mecanismos de física 3D

Mecanismo	Linguagem	Tamanho	Desempenho	Melhor para
Rapier	Rust/WASM	~1,4 MB	Excelente	Jogos para produção, simulações complexas
Cannon-es	JavaScript	~150 KB	Bom	Protótipos, jogos simples
Ammo.js	C++/WASM	~1–2 MB	Excelente	Recursos AAA, corpos deformáveis, veículos
Jolt	C++/WASM	WASM	Excelente	Recursos AAA com manutenção ativa
Oimo.js	JavaScript	~100 KB	Bom	Jogos simples, protótipos rápidos

Mecanismos de física 2D

Mecanismo	Linguagem	Tamanho	Desempenho	Melhor para
Matter.js	JavaScript	~80 KB	Bom	Jogos visuais, protótipos
Planck.js	JavaScript	~120 KB	Bom	Jogos de plataforma, física precisa
p2-es	JavaScript	~100 KB	Bom	Restrições, mecanismos
Box2D WASM	C++/WASM	~300 KB	Excelente	Grandes quantidades de corpos

Mecanismos de física 3D

Rapier — A escolha moderna

Rapier é um mecanismo de física em Rust com bindings para JavaScript/WASM. É a opção de maior desempenho para jogos web em 2025–2026, com melhorias de velocidade de 2 a 5 vezes em relação à sua versão de 2024.

Instalação:

bash

npm install @dimforge/rapier3d
# Or with SIMD (faster, requires modern browsers):
npm install @dimforge/rapier3d-simd

Configuração básica:

import RAPIER from '@dimforge/rapier3d'

// Initialize (async required for WASM)
await RAPIER.init()

// Create world with gravity
const gravity = { x: 0, y: -9.81, z: 0 }
const world = new RAPIER.World(gravity)

// Create ground (static body)
const groundDesc = RAPIER.RigidBodyDesc.fixed()
const groundBody = world.createRigidBody(groundDesc)
const groundCollider = RAPIER.ColliderDesc.cuboid(50, 0.1, 50)
world.createCollider(groundCollider, groundBody)

// Create falling box (dynamic body)
const boxDesc = RAPIER.RigidBodyDesc.dynamic()
  .setTranslation(0, 10, 0)
const boxBody = world.createRigidBody(boxDesc)
const boxCollider = RAPIER.ColliderDesc.cuboid(0.5, 0.5, 0.5)
  .setDensity(1.0)
  .setRestitution(0.5)
world.createCollider(boxCollider, boxBody)

Integração com o loop do jogo:

const FIXED_TIMESTEP = 1 / 60

function physicsStep() {
  world.step()
}

function gameLoop() {
  physicsStep()
  
  // Sync render objects with physics
  const position = boxBody.translation()
  const rotation = boxBody.rotation()
  
  // Update your Three.js/Babylon mesh
  mesh.position.set(position.x, position.y, position.z)
  mesh.quaternion.set(rotation.x, rotation.y, rotation.z, rotation.w)
  
  requestAnimationFrame(gameLoop)
}

Detecção de colisões:

// Event-based collision detection
world.contactPairsWith(boxCollider, (otherCollider) => {
  console.log('Box is touching:', otherCollider)
})

// Ray casting
const ray = new RAPIER.Ray({ x: 0, y: 10, z: 0 }, { x: 0, y: -1, z: 0 })
const hit = world.castRay(ray, 100, true)
if (hit) {
  const hitPoint = ray.pointAt(hit.timeOfImpact)
  console.log('Hit at:', hitPoint)
}

Juntas:

// Create a hinge joint (door)
const jointData = RAPIER.JointData.revolute(
  { x: 0, y: 0, z: 0 },  // Anchor on body1
  { x: -1, y: 0, z: 0 }, // Anchor on body2
  { x: 0, y: 1, z: 0 }   // Rotation axis
)
world.createImpulseJoint(jointData, body1, body2, true)

Controlador de veículo:

// Create chassis rigid body
const chassisDesc = RAPIER.RigidBodyDesc.dynamic()
  .setTranslation(0, 2, 0)
const chassis = world.createRigidBody(chassisDesc)
const chassisCollider = RAPIER.ColliderDesc.cuboid(1, 0.5, 2)
  .setDensity(100)
world.createCollider(chassisCollider, chassis)

// Create vehicle controller
const vehicle = world.createVehicleController(chassis)

// Add wheels (front-left, front-right, rear-left, rear-right)
const suspensionRestLength = 0.3
const wheelRadius = 0.4

// Front wheels (steering)
vehicle.addWheel(
  { x: -0.8, y: 0, z: 1.2 },   // Connection point
  { x: 0, y: -1, z: 0 },       // Suspension direction
  { x: -1, y: 0, z: 0 },       // Axle direction
  suspensionRestLength,
  wheelRadius
)
vehicle.addWheel(
  { x: 0.8, y: 0, z: 1.2 },
  { x: 0, y: -1, z: 0 },
  { x: -1, y: 0, z: 0 },
  suspensionRestLength,
  wheelRadius
)

// Rear wheels (drive)
vehicle.addWheel(
  { x: -0.8, y: 0, z: -1.2 },
  { x: 0, y: -1, z: 0 },
  { x: -1, y: 0, z: 0 },
  suspensionRestLength,
  wheelRadius
)
vehicle.addWheel(
  { x: 0.8, y: 0, z: -1.2 },
  { x: 0, y: -1, z: 0 },
  { x: -1, y: 0, z: 0 },
  suspensionRestLength,
  wheelRadius
)

// Configure suspension for all wheels
for (let i = 0; i < 4; i++) {
  vehicle.setWheelSuspensionStiffness(i, 30)
  vehicle.setWheelSuspensionCompression(i, 4.4)
  vehicle.setWheelSuspensionRelaxation(i, 2.3)
  vehicle.setWheelMaxSuspensionTravel(i, 0.5)
  vehicle.setWheelFrictionSlip(i, 2)
}

// In game loop
function updateVehicle(steering, engineForce, brakeForce) {
  // Steering (front wheels only)
  vehicle.setWheelSteering(0, steering)
  vehicle.setWheelSteering(1, steering)
  
  // Engine (rear wheels)
  vehicle.setWheelEngineForce(2, engineForce)
  vehicle.setWheelEngineForce(3, engineForce)
  
  // Brakes (all wheels)
  for (let i = 0; i < 4; i++) {
    vehicle.setWheelBrake(i, brakeForce)
  }
  
  // Update vehicle physics
  vehicle.updateVehicle(world.timestep)
}

Prós:

Melhor desempenho (WASM + SIMD)
Excelente precisão na detecção de colisões
Determinismo multiplataforma (mesmas entradas = mesmas saídas)
Desenvolvimento ativo e API moderna
Detecção contínua de colisão (sem atravessamento)
Controladores de personagem e de veículo integrados

Contras:

Bundle maior (~1,4 MB)
Requer inicialização assíncrona
API mais complexa do que as alternativas em JavaScript puro
A depuração de WASM pode ser complicada

Cannon-es — Simples e eficaz

Cannon-es é o fork mantido do Cannon.js. Escrito em JavaScript puro, é fácil de entender e excelente para aprendizado e protótipos.

Instalação:

bash

npm install cannon-es

Configuração básica:

import * as CANNON from 'cannon-es'

// Create world
const world = new CANNON.World({
  gravity: new CANNON.Vec3(0, -9.81, 0)
})

// Ground
const groundBody = new CANNON.Body({
  type: CANNON.Body.STATIC,
  shape: new CANNON.Plane()
})
groundBody.quaternion.setFromEuler(-Math.PI / 2, 0, 0)
world.addBody(groundBody)

// Falling sphere
const sphereBody = new CANNON.Body({
  mass: 1,
  shape: new CANNON.Sphere(0.5),
  position: new CANNON.Vec3(0, 10, 0)
})
sphereBody.linearDamping = 0.1
world.addBody(sphereBody)

Loop do jogo:

const TIMESTEP = 1 / 60

function animate() {
  world.step(TIMESTEP)
  
  // Sync with Three.js
  mesh.position.copy(sphereBody.position)
  mesh.quaternion.copy(sphereBody.quaternion)
  
  requestAnimationFrame(animate)
}

Eventos de colisão:

sphereBody.addEventListener('collide', (event) => {
  const contact = event.contact
  const impactVelocity = contact.getImpactVelocityAlongNormal()
  
  if (Math.abs(impactVelocity) > 5) {
    console.log('Hard impact!')
  }
})

Restrições:

// Distance constraint (rope-like)
const constraint = new CANNON.DistanceConstraint(
  bodyA, bodyB, 
  2 // distance
)
world.addConstraint(constraint)

// Hinge constraint
const hinge = new CANNON.HingeConstraint(bodyA, bodyB, {
  pivotA: new CANNON.Vec3(1, 0, 0),
  axisA: new CANNON.Vec3(0, 1, 0),
  pivotB: new CANNON.Vec3(-1, 0, 0),
  axisB: new CANNON.Vec3(0, 1, 0)
})
world.addConstraint(hinge)

Prós:

JavaScript puro, sem a complexidade do WASM
Bundle pequeno (~150 KB)
Fácil de aprender e depurar
Funciona em qualquer lugar
Excelente integração com Three.js
Boa documentação

Contras:

Mais lento do que as alternativas em WASM
Tem dificuldades com muitos corpos (>100)
Suporte limitado a malhas trianguladas
Sem CCD integrado (objetos podem atravessar superfícies)
Desenvolvimento menos ativo

Ammo.js — Todo o poder do Bullet Physics

Ammo.js é o mecanismo Bullet Physics compilado para WebAssembly. Oferece o conjunto máximo de recursos, incluindo corpos deformáveis, veículos e restrições avançadas.

Instalação:

bash

npm install ammo.js
# Or use from CDN

Configuração básica:

import Ammo from 'ammo.js'

let physicsWorld

async function initPhysics() {
  await Ammo()
  
  const collisionConfig = new Ammo.btDefaultCollisionConfiguration()
  const dispatcher = new Ammo.btCollisionDispatcher(collisionConfig)
  const broadphase = new Ammo.btDbvtBroadphase()
  const solver = new Ammo.btSequentialImpulseConstraintSolver()
  
  physicsWorld = new Ammo.btDiscreteDynamicsWorld(
    dispatcher, broadphase, solver, collisionConfig
  )
  physicsWorld.setGravity(new Ammo.btVector3(0, -9.81, 0))
}

function createBox(mass, width, height, depth, x, y, z) {
  const transform = new Ammo.btTransform()
  transform.setIdentity()
  transform.setOrigin(new Ammo.btVector3(x, y, z))
  
  const motionState = new Ammo.btDefaultMotionState(transform)
  const shape = new Ammo.btBoxShape(
    new Ammo.btVector3(width / 2, height / 2, depth / 2)
  )
  
  const localInertia = new Ammo.btVector3(0, 0, 0)
  if (mass > 0) {
    shape.calculateLocalInertia(mass, localInertia)
  }
  
  const rbInfo = new Ammo.btRigidBodyConstructionInfo(
    mass, motionState, shape, localInertia
  )
  const body = new Ammo.btRigidBody(rbInfo)
  
  physicsWorld.addRigidBody(body)
  return body
}

Corpos deformáveis (tecido):

function createCloth(width, height, segments) {
  const softBodyHelpers = new Ammo.btSoftBodyHelpers()
  
  const corner00 = new Ammo.btVector3(-width/2, height, 0)
  const corner10 = new Ammo.btVector3(width/2, height, 0)
  const corner01 = new Ammo.btVector3(-width/2, 0, 0)
  const corner11 = new Ammo.btVector3(width/2, 0, 0)
  
  const softBody = softBodyHelpers.CreatePatch(
    physicsWorld.getWorldInfo(),
    corner00, corner10, corner01, corner11,
    segments, segments,
    0, true
  )
  
  const sbConfig = softBody.get_m_cfg()
  sbConfig.set_viterations(10)
  sbConfig.set_piterations(10)
  
  softBody.setTotalMass(0.9, false)
  Ammo.castObject(softBody, Ammo.btCollisionObject)
    .getCollisionShape().setMargin(0.05)
  
  physicsWorld.addSoftBody(softBody, 1, -1)
  return softBody
}

Física de veículos:

function createVehicle(chassisBody) {
  const tuning = new Ammo.btVehicleTuning()
  const rayCaster = new Ammo.btDefaultVehicleRaycaster(physicsWorld)
  const vehicle = new Ammo.btRaycastVehicle(tuning, chassisBody, rayCaster)
  
  vehicle.setCoordinateSystem(0, 1, 2)
  physicsWorld.addAction(vehicle)
  
  // Add wheels
  const wheelRadius = 0.4
  const wheelWidth = 0.3
  const suspensionRestLength = 0.3
  
  const wheelDirectionCS = new Ammo.btVector3(0, -1, 0)
  const wheelAxleCS = new Ammo.btVector3(-1, 0, 0)
  
  function addWheel(isFront, pos) {
    const wheelInfo = vehicle.addWheel(
      pos, wheelDirectionCS, wheelAxleCS,
      suspensionRestLength, wheelRadius, tuning, isFront
    )
    wheelInfo.set_m_suspensionStiffness(20)
    wheelInfo.set_m_wheelsDampingRelaxation(2.3)
    wheelInfo.set_m_wheelsDampingCompression(4.4)
    wheelInfo.set_m_frictionSlip(1000)
    wheelInfo.set_m_rollInfluence(0.1)
  }
  
  addWheel(true, new Ammo.btVector3(1, 0, 1.5))   // Front left
  addWheel(true, new Ammo.btVector3(-1, 0, 1.5))  // Front right
  addWheel(false, new Ammo.btVector3(1, 0, -1.5)) // Rear left
  addWheel(false, new Ammo.btVector3(-1, 0, -1.5))// Rear right
  
  return vehicle
}

Prós:

Conjunto de recursos mais completo
Corpos deformáveis, tecidos e cordas
Física avançada de veículos
Amplamente testado em produção (usado em muitos jogos AAA)
Altamente configurável Contras:
API complexa e verbosa
Tamanho de bundle grande
Exige gerenciamento de memória (destruir objetos)
Curva de aprendizado acentuada
Documentação dispersa
Não é determinístico entre plataformas (apenas no mesmo dispositivo e com configuração cuidadosa)

Jolt — física 3D moderna de nível AAA

O Jolt Physics é o motor por trás de jogos como Horizon Forbidden West, e o JoltPhysics.js o leva ao navegador como um port para WASM. Ele é um excelente meio-termo entre Rapier e Ammo.js: oferece mais recursos que o Rapier (corpos macios, tecidos e um controlador de veículos com rodas), além da manutenção ativa que falta ao Ammo.js. O pacote npm é jolt-physics, e há integrações prontas para React Three Fiber (@react-three/jolt) e Babylon.js.

bash

npm install jolt-physics

Assim como o Rapier, ele usa WASM com inicialização assíncrona e tem uma API verbosa, porém completa, que espelha a interface em C++. Escolha o Jolt quando quiser recursos do nível do Bullet (corpos macios e veículos), mas preferir uma base de código moderna e mantida em vez do Ammo.js.

Oimo.js — leve e rápido

O Oimo.js é um motor de física 3D leve. É excelente para jogos simples que não precisam de recursos avançados.

Instalação:

bash

npm install oimo

Configuração básica:

import * as OIMO from 'oimo'

const world = new OIMO.World({
  timestep: 1/60,
  iterations: 8,
  broadphase: 2, // 1: força bruta, 2: varredura e poda, 3: árvore de volumes
  worldscale: 1,
  random: true,
  gravity: [0, -9.8, 0]
})

// Criar o chão
world.add({
  type: 'box',
  size: [100, 1, 100],
  pos: [0, -0.5, 0],
  move: false
})

// Criar uma esfera em queda
const sphere = world.add({
  type: 'sphere',
  size: [1],
  pos: [0, 10, 0],
  move: true,
  density: 1,
  friction: 0.4,
  restitution: 0.2
})

Loop do jogo:

function animate() {
  world.step()
  
  // Obter posição/rotação
  const pos = sphere.getPosition()
  const rot = sphere.getQuaternion()
  
  mesh.position.set(pos.x, pos.y, pos.z)
  mesh.quaternion.set(rot.x, rot.y, rot.z, rot.w)
  
  requestAnimationFrame(animate)
}

Prós:

Muito pequeno (~100 KB)
API simples
Bom desempenho em cenas básicas
Suporte integrado ao Babylon.js

Contras:

Formas limitadas (apenas primitivas)
Sem corpos macios
Documentação escassa
Desenvolvimento menos ativo
Opções limitadas de juntas

Motores de física 2D

Matter.js — bonito e intuitivo

O Matter.js é um motor de física 2D repleto de recursos, com excelentes ferramentas de renderização e depuração.

Instalação:

bash

npm install matter-js

Configuração básica:

import Matter from 'matter-js'

const { Engine, Render, World, Bodies, Runner } = Matter

// Criar o motor
const engine = Engine.create()

// Criar o renderizador (opcional, ótimo para depuração)
const render = Render.create({
  element: document.body,
  engine: engine,
  options: {
    width: 800,
    height: 600,
    wireframes: false
  }
})

// Criar corpos
const ground = Bodies.rectangle(400, 580, 810, 60, { 
  isStatic: true 
})

const box = Bodies.rectangle(400, 200, 80, 80, {
  restitution: 0.8,
  friction: 0.5
})

const circle = Bodies.circle(300, 100, 40, {
  restitution: 0.9
})

// Adicionar ao mundo
World.add(engine.world, [ground, box, circle])

// Executar
Render.run(render)
Runner.run(Runner.create(), engine)

Eventos de colisão:

Matter.Events.on(engine, 'collisionStart', (event) => {
  event.pairs.forEach(pair => {
    console.log('Colisão entre:', pair.bodyA.label, pair.bodyB.label)
  })
})

Restrições:

// Restrição de pino
const pin = Matter.Constraint.create({
  pointA: { x: 400, y: 100 },
  bodyB: box,
  stiffness: 0.9
})

// Mola entre corpos
const spring = Matter.Constraint.create({
  bodyA: box,
  bodyB: circle,
  stiffness: 0.01,
  length: 100
})

World.add(engine.world, [pin, spring])

Interação com o mouse:

const mouse = Matter.Mouse.create(render.canvas)
const mouseConstraint = Matter.MouseConstraint.create(engine, {
  mouse: mouse,
  constraint: {
    stiffness: 0.2,
    render: { visible: false }
  }
})
World.add(engine.world, mouseConstraint)

Prós:

Bela renderização padrão
Ótimo para aprender e criar protótipos
API intuitiva
Boa documentação
Comunidade ativa
Determinístico por padrão — o Matter.Runner agora usa um passo de tempo fixo e determinístico (o passo de tempo não fixo foi removido na v0.20.0)

Contras:

Sem CCD (objetos rápidos podem atravessar outros — use subpassos para atenuar o problema)
Problemas de desempenho com muitos corpos
Sem opção em WASM
Precisão limitada em simulações complexas

Planck.js — Box2D para JavaScript

O Planck.js é uma reescrita completa do Box2D em JavaScript. Oferece física testada em produção e é determinístico ao usar um passo de tempo fixo.

Instalação:

bash

npm install planck

Configuração básica:

import { World, Vec2, Box, Circle, Edge } from 'planck'

// Criar o mundo
const world = new World({
  gravity: Vec2(0, -10)
})

// Criar o chão
const ground = world.createBody()
ground.createFixture({
  shape: Edge(Vec2(-40, 0), Vec2(40, 0))
})

// Criar uma caixa dinâmica
const box = world.createBody({
  type: 'dynamic',
  position: Vec2(0, 10)
})
box.createFixture({
  shape: Box(1, 1),
  density: 1,
  friction: 0.3,
  restitution: 0.5
})

Loop do jogo com passo de tempo fixo:

const TIMESTEP = 1 / 60
const VELOCITY_ITERATIONS = 8
const POSITION_ITERATIONS = 3

function gameLoop() {
  world.step(TIMESTEP, VELOCITY_ITERATIONS, POSITION_ITERATIONS)
  
  // Percorrer todos os corpos
  for (let body = world.getBodyList(); body; body = body.getNext()) {
    const pos = body.getPosition()
    const angle = body.getAngle()
    // Atualize seus sprites...
  }
  
  requestAnimationFrame(gameLoop)
}

Callbacks de colisão:

world.on('begin-contact', (contact) => {
  const fixtureA = contact.getFixtureA()
  const fixtureB = contact.getFixtureB()
  console.log('Contato iniciado')
})

world.on('end-contact', (contact) => {
  console.log('Contato encerrado')
})

world.on('pre-solve', (contact, oldManifold) => {
  // É possível desativar o contato aqui
  // contact.setEnabled(false)
})

Juntas:

import { RevoluteJoint, DistanceJoint, PrismaticJoint } from 'planck'

// Junta de revolução (dobradiça)
const joint = world.createJoint(RevoluteJoint({
  bodyA: ground,
  bodyB: box,
  localAnchorA: Vec2(0, 5),
  localAnchorB: Vec2(-1, 0),
  enableMotor: true,
  maxMotorTorque: 1000,
  motorSpeed: 2
}))

// Junta de distância (mola)
world.createJoint(DistanceJoint({
  bodyA: boxA,
  bodyB: boxB,
  localAnchorA: Vec2(0, 0),
  localAnchorB: Vec2(0, 0),
  length: 5,
  stiffness: 10,
  damping: 0.5
}))

Prós:

Determinístico com passo de tempo fixo
Bem documentado (a documentação do Box2D também se aplica)
Bom desempenho
Suporte a TypeScript
Bundle pequeno

Contras:

O CCD não funciona com juntas, portanto objetos rápidos conectados por juntas podem se esticar
Curva de aprendizado mais acentuada que a do Matter.js
Sem renderizador integrado
Peculiaridades do Box2D (a escala das unidades importa)

p2-es — física 2D flexível

O p2-es é o fork mantido do p2.js. É excelente para jogos que precisam de restrições e mecanismos complexos.

Instalação:

bash

npm install p2-es

Configuração básica:

import * as p2 from 'p2-es'

const world = new p2.World({
  gravity: [0, -9.81]
})

// Chão
const groundBody = new p2.Body({
  mass: 0, // estático
  position: [0, -1]
})
groundBody.addShape(new p2.Plane())
world.addBody(groundBody)

// Círculo dinâmico
const circleBody = new p2.Body({
  mass: 1,
  position: [0, 5]
})
circleBody.addShape(new p2.Circle({ radius: 0.5 }))
world.addBody(circleBody)

Restrições avançadas:

// Restrição de engrenagem
const gear = new p2.GearConstraint(bodyA, bodyB, {
  ratio: 2 // bodyB gira duas vezes mais rápido
})
world.addConstraint(gear)

// Restrição prismática (deslizante)
const prismatic = new p2.PrismaticConstraint(bodyA, bodyB, {
  localAnchorA: [0, 0],
  localAnchorB: [0, 0],
  localAxisA: [1, 0],
  disableRotationalLock: false
})
world.addConstraint(prismatic)

// Restrição de bloqueio (solda)
const lock = new p2.LockConstraint(bodyA, bodyB)
world.addConstraint(lock)

Materiais de contato:

const ice = new p2.Material()
const rubber = new p2.Material()

const iceRubber = new p2.ContactMaterial(ice, rubber, {
  friction: 0.1,
  restitution: 0.9
})
world.addContactMaterial(iceRubber)

// Aplicar às formas
iceBody.shapes[0].material = ice
rubberBody.shapes[0].material = rubber

Prós:

Sistema de restrições completo
Materiais de contato
Bom para mecanismos e máquinas
Corpos em repouso (melhora o desempenho)
Módulos ES e suporte a tree shaking

Contras:

Sem renderizador integrado
Alguns pares de formas não são compatíveis
Menos ativo que as alternativas
Lacunas na documentação

Dicas de desempenho

1. Use um passo de tempo fixo

const TIMESTEP = 1 / 60
let accumulator = 0

function gameLoop(deltaTime) {
  accumulator += deltaTime
  
  while (accumulator >= TIMESTEP) {
    world.step(TIMESTEP)
    accumulator -= TIMESTEP
  }
  
  // Interpolar para obter uma renderização suave
  const alpha = accumulator / TIMESTEP
  // lerp(previousState, currentState, alpha)
}

2. Coloque corpos inativos em repouso

A maioria dos motores oferece suporte ao repouso. Ative-o:

// Cannon-es
world.allowSleep = true
body.allowSleep = true
body.sleepSpeedLimit = 0.1
body.sleepTimeLimit = 1

// Rapier
bodyDesc.setCanSleep(true)

3. Use formas de colisão simples

// BOM: primitivas simples
const sphere = new CANNON.Sphere(1)
const box = new CANNON.Box(new CANNON.Vec3(1, 1, 1))

// EVITE: trimesh complexo para corpos dinâmicos
const trimesh = new CANNON.Trimesh(vertices, indices) // Lento!

4. Reduza as iterações do solver (com cuidado)

// Cannon-es
world.solver.iterations = 5 // Padrão: 10

// Rapier - configurado na criação do mundo

5. Execute a física em um Web Worker

// main.js
const worker = new Worker('physics-worker.js')

worker.postMessage({ type: 'step', deltaTime: 1/60 })
worker.onmessage = (e) => {
  const { positions, rotations } = e.data
  // Atualizar objetos de renderização
}

// physics-worker.js
importScripts('cannon-es.js')
const world = new CANNON.World()

onmessage = (e) => {
  if (e.data.type === 'step') {
    world.step(e.data.deltaTime)
    postMessage({
      positions: bodies.map(b => b.position.toArray()),
      rotations: bodies.map(b => b.quaternion.toArray())
    })
  }
}

Quando usar cada opção

Cenário	Recomendação	Motivo
Jogo 3D para produção	Rapier	Melhor desempenho, API moderna e veículos
Protótipo de jogo 3D	Cannon-es	Simples e fácil de depurar
Corpos macios, tecidos e cordas	Ammo.js ou Jolt	Ambos oferecem suporte a tecidos e corpos macios; o port para WASM do Jolt (JoltPhysics.js) recebe manutenção mais ativa
Jogo 3D simples para navegador	Oimo.js	Minúsculo e suficiente
Game jam de jogos 2D	Matter.js	Configuração rápida e renderização integrada
Jogo de plataforma preciso	Planck.js	Determinismo com passo de tempo fixo e boa documentação
Mecanismos 2D complexos	p2-es	Sistema de restrições completo
Jogo 2D crítico em desempenho	Box2D WASM	Opção 2D mais rápida e CCD verdadeiro

Integração com renderizadores

Three.js + Rapier

import * as THREE from 'three'
import RAPIER from '@dimforge/rapier3d'

await RAPIER.init()

const scene = new THREE.Scene()
const world = new RAPIER.World({ x: 0, y: -9.81, z: 0 })

const bodies = new Map() // corpo físico -> malha

function createPhysicsBox(x, y, z) {
  // Física
  const bodyDesc = RAPIER.RigidBodyDesc.dynamic().setTranslation(x, y, z)
  const body = world.createRigidBody(bodyDesc)
  const collider = RAPIER.ColliderDesc.cuboid(0.5, 0.5, 0.5)
  world.createCollider(collider, body)
  
  // Renderização
  const mesh = new THREE.Mesh(
    new THREE.BoxGeometry(1, 1, 1),
    new THREE.MeshStandardMaterial({ color: 0x00ff00 })
  )
  scene.add(mesh)
  
  bodies.set(body, mesh)
  return body
}

function syncPhysics() {
  bodies.forEach((mesh, body) => {
    const pos = body.translation()
    const rot = body.rotation()
    mesh.position.set(pos.x, pos.y, pos.z)
    mesh.quaternion.set(rot.x, rot.y, rot.z, rot.w)
  })
}

PixiJS + Matter.js

import * as PIXI from 'pixi.js'
import Matter from 'matter-js'

const app = new PIXI.Application({ width: 800, height: 600 })
document.body.appendChild(app.view)

const engine = Matter.Engine.create()
const bodies = new Map()

function createPhysicsSprite(texture, x, y, width, height) {
  // Física
  const body = Matter.Bodies.rectangle(x, y, width, height)
  Matter.World.add(engine.world, body)
  
  // Renderização
  const sprite = new PIXI.Sprite(texture)
  sprite.anchor.set(0.5)
  app.stage.addChild(sprite)
  
  bodies.set(body, sprite)
  return body
}

app.ticker.add(() => {
  Matter.Engine.update(engine, 1000 / 60)
  
  bodies.forEach((sprite, body) => {
    sprite.position.set(body.position.x, body.position.y)
    sprite.rotation = body.angle
  })
})

Armadilhas comuns

A escala importa

Os motores de física funcionam melhor com uma escala do mundo real (1 unidade = 1 metro). Não use coordenadas em pixels diretamente.

// RUIM: usar posições em pixels
const body = Bodies.circle(400, 300, 50) // Raio de 50 pixels?

// BOM: usar um fator de escala
const SCALE = 50 // 50 pixels por metro
const body = Bodies.circle(8, 6, 1) // Raio de 1 metro
// Depois, multiplicar por SCALE ao renderizar

Vazamentos de memória com motores WASM

Sempre faça a limpeza dos corpos ao removê-los:

// Rapier
world.removeRigidBody(body)

// Ammo.js
physicsWorld.removeRigidBody(body)
Ammo.destroy(body)
Ammo.destroy(shape)
Ammo.destroy(motionState)

Tunelamento (objetos atravessando uns aos outros)

Objetos em movimento rápido podem atravessar paredes finas. Soluções:

// Rapier: ativar CCD
const bodyDesc = RAPIER.RigidBodyDesc.dynamic().setCcdEnabled(true)

// Cannon-es: usar passos de tempo menores ou paredes mais grossas
world.step(1/120) // 120 Hz em vez de 60

Relacionados

Fundamentos de WebGL para desenvolvedores de jogos
Web Workers para lógica de jogos — transfira a física para uma thread de Worker
Publique um jogo web que carregue rápido
Loop de jogo com Canvas 2D — o padrão de passo de tempo fixo usado por todos os motores de física
Stack tecnológico de jogos web em 2026 — como os motores de física se encaixam no stack mais amplo
Comparação de motores de jogos web — motores com suporte integrado a física

Recursos externos

Documentação do Rapier — documentação oficial e exemplos de física do Rapier
Documentação do Cannon-es — referência da API e guias
Documentação do Matter.js — referência completa da API
Documentação do Planck.js — Box2D para JavaScript

Física para jogos web ​

Visão geral ​

Recomendações rápidas ​

Comparação detalhada ​

Mecanismos de física 3D ​

Mecanismos de física 2D ​

Mecanismos de física 3D ​

Rapier — A escolha moderna ​

Cannon-es — Simples e eficaz ​

Ammo.js — Todo o poder do Bullet Physics ​

Jolt — física 3D moderna de nível AAA ​

Oimo.js — leve e rápido ​

Motores de física 2D ​

Matter.js — bonito e intuitivo ​

Planck.js — Box2D para JavaScript ​

p2-es — física 2D flexível ​

Dicas de desempenho ​

1. Use um passo de tempo fixo ​

2. Coloque corpos inativos em repouso ​

3. Use formas de colisão simples ​

4. Reduza as iterações do solver (com cuidado) ​

5. Execute a física em um Web Worker ​

Quando usar cada opção ​

Integração com renderizadores ​

Three.js + Rapier ​

PixiJS + Matter.js ​

Armadilhas comuns ​

A escala importa ​

Vazamentos de memória com motores WASM ​

Tunelamento (objetos atravessando uns aos outros) ​

Relacionados ​

Recursos externos ​

Física para jogos web

Visão geral

Recomendações rápidas

Comparação detalhada

Mecanismos de física 3D

Mecanismos de física 2D

Mecanismos de física 3D

Rapier — A escolha moderna

Cannon-es — Simples e eficaz

Ammo.js — Todo o poder do Bullet Physics

Jolt — física 3D moderna de nível AAA

Oimo.js — leve e rápido

Motores de física 2D

Matter.js — bonito e intuitivo

Planck.js — Box2D para JavaScript

p2-es — física 2D flexível

Dicas de desempenho

1. Use um passo de tempo fixo

2. Coloque corpos inativos em repouso

3. Use formas de colisão simples

4. Reduza as iterações do solver (com cuidado)

5. Execute a física em um Web Worker

Quando usar cada opção

Integração com renderizadores

Three.js + Rapier

PixiJS + Matter.js

Armadilhas comuns

A escala importa

Vazamentos de memória com motores WASM

Tunelamento (objetos atravessando uns aos outros)

Relacionados

Recursos externos