Utiliser la physique dans Three.js avec Ammo.js – Introduction

Introduction

La forte progression des technologies web, tel que WebGL, à permis l’émergence de contenu de plus en plus innovant sur internet !

Ces nouvelles technologies ouvrent la porte à de nouveaux usages, tel que le domaine du jeu vidéo, réalité virtuelle ou augmentée.

Cependant, ces domaines sont souvent exigeants. Three.js est une librairie extrêmement performante et complète, mais, certaines fonctionnalités n’y sont pas nativement proposées !

C’est le cas de la simulation physique, non proposée nativement par Three.js.

Les moteurs de simulation physique JavaScript

Il existe plusieurs moteurs physiques JavaScript, tous ayant des spécificités et des utilisations différentes.

Voici quelques exemples :

• Cannon.js
• Physijs
• Box2Djs
• Planck.js
• Ammo.js
• … et beaucoup d’autres !

Pour inclure de la physique dans notre univers Three.js, nous utiliserons Ammo.js !

Pourquoi avoir choisi d’utiliser Ammo.js ?

Ammo.js est un moteur physique JavaScript avec un background intéressant, c’est un portage direct de Bullet physics engine (un moteur physique C++) avec Emscripten ! Ils sont donc théoriquement fonctionnellement identiques.

Petite anecdote : “Ammo” signifie “Avoided Making My Own js physics engine by compiling bullet from C++” !

Ammo.js est totalement gratuit et open-source, et s’interface très bien avec Three.js. C’est donc un candidat parfait pour nous !

Pourquoi et quand utiliser un moteur physique ?

Implémenter la physique dans une application 3D n’est pas indispensable, il existe énormément de projets aboutis qui n’utilisent pas de simulation physique. Mais dans certains cas c’est une option quasiment obligatoire !

Il est par exemple impossible d’imaginer un jeu type Angry Birds sans simulation physique.

Il y a quelques années, un ami travaillant dans une agence web a du implémenter un jeu de pétanque dans un site internet. Pour cela, il a utilisé Three.js couplé à un moteur physique !

Utiliser un moteur physique est envisageable si votre projet nécessite des thématiques de gravité, poussée, collisions complexes, choc entre deux élément, friction, résistance, contrainte de mouvement ou tout concept physique !

Utiliser un moteur physique avec Three.js

Cet article est l’introduction d’une série de chapitres concernant l’utilisation couplée de Three.js et Ammo.js. Nous y découvrirons comment utiliser correctement un moteur physique via une série d’exemples.

Voici un aperçu d’un projet basique que nous réaliserons plus tard :

Pour commencer à utiliser le duo Three.js et Ammo.js, suivez le guide :

Comprendre et utiliser la physique dans Three.JS avec Ammo.js : Les bases