Game Connection 2013 : Physique : un changement pour le HTML 5

Alexandre Laurent

La cinquième session technique durant la Game Connection 2013 a été présentée par Will Eastcott CEO de PlayCanvas.

Commentez

- Titre : Game Connection 2013 : Physique : un changement pour le HTML 5

- Auteur : Alexandre Laurent

- Parution : 13 février 2014

- Mise à jour : 9 octobre 2019

- Licence : Copyright ® 2014 LittleWhite. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.

Sommaire

- Navigation

- I. Introduction

- II. Pourquoi de la physique ?

- III. Qu'est-ce qui est possible en HTML 5 ?

- IV. Introduction à la physique (pourquoi vous ne devriez pas écrire votre propre moteur ?)

- IV-A. Corps et volumes

- IV-B. Volumes de collision

- IV-C. Gestion de la scène

- IV-D. Lancer de rayon

- IV-E. Contraintes

- IV-F. Objets physiques

- IV-G. Contrôleurs

- IV-G-1. Personnage

- IV-G-2. Cinématique

- IV-H. Problèmes

- V. Que faire maintenant ?

- VI. Questions/Réponses

- VI-A. Que faire dans le cas d'un jeu multijoueur ?

- Navigation

Navigation

Retrouvez les autres conférences et le compte rendu de l'événement.

I - Introduction

PlayCanvas est un studio de développement offrant une solution similaire aux Google Docs, mais pour les jeux vidéo.

II - Pourquoi de la physique ?

Les jeux ne sont que des mouvements et de l'interaction. Tous les jeux ne se focalisent pas sur la physique, mais dans l'histoire, tous les jeux ont de la physique :

- 1958 - Tennis for two ;

- 1962 - Space war ;

- 1972 – Pong ;

- 1979 -Asteroids ;

- 1979 - Lunar Lander ;

- 1981 - Donkey Kong ;

- 1985 - Super Mario ;

- 1996 – Quake ;

- 2000 – Havok (solution dédiée à la physique) ;

- 2004 -PhysX Ageia ;

- 2006 - Bullet (bibliothèque physique).

III - Qu'est-ce qui est possible en HTML 5 ?

Actuellement, en HTML 5, nous avons :

- WebGL(3D) ;

- WebAudio (son) ;

- WebSockets et WebRTC (réseau) ;

- bibliothèque pour le mode plein-écran ;

- bibliothèque de verrouillage de pointeur (pour les FPS) ;

- bibliothèque pour les manettes.

Pour faire un moteur physique, nous avons besoin de :

- moteur JavaScript rapide (V8, OdinMonkey, Chakra) ;

- exécution de code parallèle (WebWorkers, WebCL).

Nous pouvons donc écrire un moteur physique. Et cela est déjà fait :

- Cannon.js (simple et légère bibliothèque physique pour la 3D) ;

- Bullet (open source, C++, généraliste), portée en JavaScript à l'aide d'Emscripten (un compilateur C++ vers JavaScript) ;

- pour la 2D : Box2D (portage de la bibliothèque C++).

De plus, le JavaScript est rapide :

- ASM.JS → sous-ensemble du JavaScript très optimisé ;

- génération du code suivant le typage ;

- n'effectue que des chargements/sauvegardes à partir de tableaux de type rapide.

Mais est-il vraiment rapide ?

Box2D s'exécute en prenant 1,2 fois plus de temps que sa version native. Bullet 1,8 fois.

IV - Introduction à la physique (pourquoi vous ne devriez pas écrire votre propre moteur ?)

IV-A - Corps et volumes

Les corps rigides sont une représentation idéalisée d'un corps solide sur lequel toute déformation est ignorée. Ses propriétés sont :

- la position ;

- l'orientation ;

- la masse ;

- la friction ;

- la restitution ;

- les vélocités angulaire et linéaire ;

- les amortissements angulaire et linéaire.

Les actions pouvant s'appliquer dessus sont les forces et les impulsions. Vous pouvez considérer plusieurs types de corps rigides : statique, dynamique, cinématique.

IV-B - Volumes de collision

Les volumes de collision sont assignés à des corps rigides définissant ainsi leur forme physique. Certains de ces volumes ne génèrent aucun contact. Ils sont utilisés pour les checkpoints, les objectifs, les pièges…

IV-C - Gestion de la scène

Il est nécessaire de savoir très rapidement si deux objets s'intersectent. Vous pouvez pour cela utiliser différentes optimisations telles que les quadtree/octree.

IV-D - Lancer de rayon

Le lancer de rayon détermine si un rayon touche un objet de la scène. C'est une technique nécessaire pour le picking, la vision de l'intelligence artificielle ou même les armes laser.

IV-E - Contraintes

Les contraintes apportent des restrictions sur le mouvement des objets :

- contrainte point à point : limite le mouvement afin que deux points correspondent exactement dans le monde. Il est possible d’enchaîner plusieurs objets ;

- contrainte gond : limite les valeurs de rotation à deux angles de liberté, limitant ainsi la rotation à un simple axe ;

- contrainte glissière : les corps peuvent tourner en un seul accès et glisser suivant un axe ;

- contrainte torsion de cône : principalement utilisé dans les techniques de ragdoll.

IV-F - Objets physiques

Généralement, un personnage est représenté par des capsules connectées par des contraintes. Pour les véhicules, vous avez deux options :

- configurer un modèle physique avec des corps et contraintes pour simuler le châssis, les suspensions, les roues… ;

- Ammo.js utilise un cas spécial de véhicule en lancer de rayon.

IV-G - Contrôleurs

IV-G-1 - Personnage

Un personnage dynamique est déplacé indirectement en appliquant des forces et des impulsions. Le moteur physique résout les collisions de manière « réaliste », mais ce n'est pas amusant.

IV-G-2 - Cinématique

Déplace le personnage en définissant des vélocités directement. Cela résout les problèmes de pénétration et de repositionnement, mais ne fonctionnera que dans des jeux précis. Il est aussi possible de faire que le personnage monte automatiquement les escaliers.

IV-H - Problèmes

Les moteurs physiques peuvent rencontrer des problèmes d'empilement. Il est compliqué de résoudre de nombreuses collisions simultanément et vous ne devez pas vous attendre à beaucoup de stabilité.

Si un objet se déplace très vite, il arrive qu'il puisse traverser un mur. Une solution possible à ce problème est une détection de collision continue.

V - Que faire maintenant ?

La première option et de cloner le code de Ammo.js ou Cannon.js et d'ouvrir votre éditeur de code.

La seconde est d'utiliser PlayCanvas.com, un outil visuel, possédant une grande communauté, un système collaboratif et permettant de produire rapidement un jeu.

VI - Questions/Réponses

VI-A - Que faire dans le cas d'un jeu multijoueur ?

Le cas du jeu multijoueur est compliqué d'un point de vue physique, d'autant plus si ceux-ci possèdent deux architectures de CPU différentes. Une première solution est de synchroniser périodiquement le jeu. La seconde est d'enlever la physique et de la simuler localement chez les clients.

Sinon, il est nécessaire de construire entièrement un moteur en prenant en compte cette problématique.

Navigation

Retrouvez les autres conférences et le compte rendu de l'événement.