Nous voulons créer un jeu de voitures en 3D en WebGL. Nous avons donc commencé par créer un éditeur de circuits.
Créé en html5 et php, ce logiciel permet à l’utilisateur d’importer une image de fond (vue aérienne ou tracé d’un circuit connu) puis d’en créer une représentation 3D sous la forme d’un fichier ply (stanford).
Voici un exemple du résultat [circuit de Dijon] L’essentiel de la procédure consiste à définir des courbes de Bézier qui représenteront le bord du circuit. On peut alors éditer les points de contrôle de chaque courbe par simple clic/glisser. On dispose à tout moment de la touche ‘u’ pour revenir en arrière.
On peut ensuite calculer le maillage et l’exporter en ply, comme présenté dans la vidéo ci-dessous :
Le joueur commence avec 100 crédits qu’il mise un par un. Il faut cliquer sur le bouton « spin » pour miser 1 crédit. Les gains sont sur la ligne du milieu. Un logo SPACEGOO vous fera gagner deux crédits, alors qu’il faut trois symboles identiques pour en gagner plus (le tableau des gains est sur la machine).
Vous pouvez également cliquer sur les divers objets dans la pièce, certains sont interactifs.
Si vous n’êtes pas compatibles WebGL, voici la vidéo de présentation :
Voici les différents contrôles :
– Clic sur une carte : poser/prendre une carte sur la table
– Clic sur le tableau joker : aide
– Touches claviers :
1 : Vue avant (éloignée)
2 : Vue du personnage
3 : Vue de dessus
4 : Vue de droite
5 : Vue de gauche
6 : Vue de gauche en arrière
7 : Vue de droite en arrière
8 : Vue de devant (proche)
Espace/v : Vue suivante
a,b,c,d,e,f,g,h,l,r,s : actions diverses et variées. On vous laisse découvrir !
Si votre configuration n’est pas compatible Webgl ( c’est à dire si ça ne marche pas ), voici la vidéo capture d’écran :
Dans cette démo le personnage est animé par squelette, c’est à dire qu’un seul maillage est chargé, et chaque partie est liée à un ‘os’.
La plupart des autres démos/jeux programmés en webgl et disposant de personnages animés sont réalisés en ‘keyframe’, c’est à dire que plusieurs maillages correspondant à des positions clés du personnages sont chargés, et le mouvement est réalisé par interpolation linéaire entre ces maillages.
Nous avons choisi la technique de l’animation par squelette pour plusieurs raisons :
– le temps de chargement du personnage est quasiment indépendant du nombre d’actions. On peut alors utiliser des maillages assez fins ( le maillage du personnage comporte 14000 points) avec des personnages pouvant effectuer des actions variées sans faire exploser le temps de chargement.
– il est plus facile de gérer les points de liaisons avec cette technique (un point de liaison est par exemple une paume de main à laquelle on peut lier un autre objet, typiquement une carte dans le cas présent).
Le Cadillac Ranch est une oeuvre d’art monumentale collaborative localisée à Amarillo, au Texas, sur le tracé de l’ancienne Route 66. Elle a été conçu en 1974 par Chip Lord, Hudson Marquez et Doug Michel. Elle est constituée de 10 anciennes Cadillac alignées, à enterrées à moitié dans le sol par l’avant.
SPACEGOO a créé une version virtuelle du Cadillac Ranch : elle représente 10 Cadillac plantées dans le sol, et vous pouvez les peindre et vous promener autour. Les modifications que vous apportez aux Cadillac sont enregistrées, et les compressions successives des textures au format JPG entraine un vieillissement progressif des plus anciennes peintures. C’est une oeuvre d’art en 3D pour laquelle chaque internaute peut apporter sa contribution.
Utilisez les touches directionnelles et la molette de la souris pour vous déplacer, et pour peindre déplacez la souris avec le clic gauche enfoncé. Pour changer l’angle de la caméra, vous pouvez déplacer la souris avec le clic droit enfoncé.
Il s’agit à notre connaissance de la première oeuvre d’art collaborative en 3D en ligne. Au niveau technique la principale difficulté a été d’implémenter un algorithme de calcul d’intersection utilisant un octree en javascript.
