DS4H Mineure Programmation de jeux 3D sur le Web 2022-2023

Introduction

Je vous propose de pratiquer le(s) langage(s) JavaScript ou TypeScript à travers l'apprentissage de la 3D avec la librairie open source BabylonJS. On écrira ensemble un petit jeu vidéo qui tournera à 60 images/seconde dans vos navigateurs et qui pourra être un bon point de départ pour le concours Games on Web 2023.

Outils utilisés

• La librairie BabylonJS 
• Visual Studio Code un puissant éditeur de code source gratuit (mais vous pouvez en prendre un autre si vous préférez)
• Git pour la gestion de versions, pour récupérer les exemples du cours, pour rendre votre projet à la fin etc.
• La doc de BabylonJS, et tous les exemples ont été dans le jeu d'entraînement de GitHub Copilot, vous êtes donc fortement encoragé à l'utiliser, il s'intègre parfaitement dans Visual Studio Code.

Séance 1 : introduction, bases de l'utilisation de la 3D, animation, etc.

• Vidéo de cette séance (date de 2020, pour ceux qui ne peuvent pas venir à cause de la grève du 2 Mars)

Supports de cours :

• Slides BabylonJS 1 (de 1 à 32) sur les bases
   
• Compléments en français
  • Détails sur les couleurs, lumières, matérials 
  • Rappels sur les transformations géométriques 2D et 3D 

•  Github repository du cours que l'on utilisera dans toutes les séances

Séance 2: modèles 3D, moteurs physique, collisions

Lors du dernier cours nous nous étions arrêté au transparent 37 compris. Dans cette séance, nous finissons d'abord la partie sur l'animation du Dude (modèle 3D du soldat, articulé) , c'est à la fin de la vidéo de la séance précédente. Puis nous abordons la gestion des collisions et les moteurs physiques.

• Video de la séance 2(date de 2020, pour ceux qui ne peuvent pas venir à cause de la grève du 9 Mars)

Supports de cours :

• Slides BabylonJS 1 (de 38 à 41) sur les bases (fin de ce qui aurait dû être fait dans la séance 1, couvert par la vidéo de la séance 1)
• Slides BabylonJS 2 (de 1 à 39 inclu) sur les moteurs physiques et collisions
   
• Compléments sur les animations de modèles 3D, compilés par un élève de l'an dernier. Explique comment "merger" des animations, deviner les animations présentes dans un modèle 3D etc.

•  Github repository du cours que l'on utilisera dans toutes les séances

Pas de séance la semaine du 13 Mars, mais un travail à faire et à rendre, qui sera noté :

• M'envoyer votre github avant la prochaine séance par mail (travail individuel)
   
• Ajoutez d'autres modèles 3D (voir mixamo.com par exemple ou les ressources en ligne babylonjs)
• Essayez de faire bouger les modèles animés du "Dude" différemment (exemple : faire le tour du terrain, faire un rectangle de ronde)
• Changez les couleurs, la texture du sol, les éclairages, que l'environnement soit plus joli.
• Modifiez le modèle du joueur (un joli tank avec tourelle et canon, ou bien un modèle 3D ?)
• etc.
• Soyez créatifs !

Séance 3 et 4 : particules, asset loaders, sons et musiques, multiple caméras...

• Slides BabylonJS (du 1 au 12 inclu)
• Vidéo 1 du cours (particules, asset loaders, sons et musique)

Recommandations : chercher des videos YT sur "audio visualization babylonJS", c'est assez fun!

A VOIR : Ressources babylonJS que je vous avais envoyées par mail pour le concours. regardez en particulier la chaine YT qui propose un tuto avec beaucoup de vidéos, la No 17 montre comment utiliser des modèles 3D de Maximo et comment utiliser et personnaliser les animations. Il ya  un lien YT vers un autre tuto juste en dessous:

Séance 5 : projet pour préparer la venue du développeur BabylonJS

Séance 6 : camera FPS, crosshair, gun shots,

• Slides BabylonJS de la séance 4 (du 12 jq fin)
• Slides Séance 5 (entiers)
   
• Voir le "tp4" du repo Github 
   
• Pour le concours, vous devrez déployer votre jeu. Solutions recommandées :
  • Si vous n'avez pas besoin de backend : github pages, itch.io 
  • Si vous avez un backend : déployez sur render.com (alternative à heroku.com qui est devenu payant)