DS4H Mineure 3D Game Programming on the Web

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 2024 dont le thème est "Olympic Edition".

Outils utilisés

• La librairie BabylonJS 
• Visual Studio Code puissant éditeur de code source gratuit (mais vous pouvez en prendre un autre si vous préférez), que je vous conseille d'utiliser avec l'IA d'aide au codage Copilot , qui connait très bien BabylonJS.
• 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
• La page de ressources que j'ai préparée, en particulier les vidéos d'Olivier Arguimbau qui sont très à jour et réalisées pour le concours Games on Web 2024 (il enseigne cette matière aux élèves de la Miage d'Aix-en-provence.
  • Voir aussi son site GitHub qui contient les codes sources présentés dans ses vidéos.

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

• Vidéo de cette séance (date de 2020)

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

Projet "moderne" en TypeScript, avec la dernière version de BabylonJS + Webpack :

• Voir le projet "FromScratch" d'Olivier Arguimbaud + la vidéo "Bonus 1" qui explique l'environnement de travail. Voir aussi la vidéo "Running Granny" qui explique le jeu qui est à l'intérieur.

Séance 2: étude d'un projet avec environnement de build, animation de personnages, moteur physique, collisions

• Slides babylonJS 2 couvrant les moteurs physiques (hors Havok, qui fera l'objet d'un chapitre à part) et les détections de collisions (à l'aide d'ActionManager, la méthode intersect des meshes et par raycasting).
   
• Comment configurer un projet BabylonJS avec WebPack/Npm/TypeScript:
  • La première chose à faire pour comprendre est de regarder la documentation officielle: https://doc.babylonjs.com/setup/fram...ges/npmSupport
  • C'est ce qui est utilisé par le projet GitHub "From Scratch" d'Olivier Arguimbau, il décrit le processus de création de ce projet pas à pas dans la vidéo suivante : https://www.youtube.com/watch?v=B0Hvce2Z1eo&list=PLYm85whMMYDO5b0XceAJrSh_To8tebJYQ&index=22
• Animation de personnages 3D articulés, récupération d'un personnage et d'animations depuis Mixamo.com, intégration et édition des animations dans me modeleur 3D Blender, exportation au format gLtf (fichier .glb) et importation dans un programme d'exemple en BabylonJS.
  • Voir documentation officielle : https://doc.babylonjs.com/features/featuresDeepDive/animation/animatedCharacter. Cette doc comprend plusieurs vidéos très intéressantes.
  • Voir aussi la vidéo d'Olivier Arguimbau qui explique en français toutes les étapes, sorte de best of des vidéos de la doc officielle. Il a aussi un repo GitHub qui correspond à la fin de cette vidéo, avec quelques trucs en plus.
  • Comment faire du "morphing" entre animations (passer de la marche à la course, de la course à l'arrêt),  voir la section de la doc sur les "weighted animations" et lire ce document préparé par un ancien élève. 

Séance 3 : Début de votre projet pour préparer la venue du développeur BabylonJS le 29 Mars de 12H à 14H

AUjourd'hui nous n'avancerons pas le cours, vous travaillerez sur votre projet de jeu afin d'avoir quelque chose à montrer à Sébastien Vandenbergue, l'architecte principal de BabylonJS, qui vient rencontrer les étudiants pour le regroupement du vendredi 29 Mars de 12h à 14h dans l'amphi A2.

Normalement un premier devoir noté est à rendre pour le 25 Mars, nous le repoussons de 10 jours, la nouvelle deadline est le 31 Mars au soir. 

• Travail à faire : rendre l'état d'avancement de votre projet, sur GitHub, travail individuel !
  
  • Attendu au minimum: du gameplay, l'utilisation de plusieurs techniques vues en cours, un prototype / preuve de concept de ce que vous rendrez à la fin du cours.
• Rappel du thème: "Olympic Edition".
• Vous m'inviterez comme collaborateur à votre repository.
• N'oubliez pas de décrire votre travail et d'indiquer votre vrai nom dans le README.
• Décrivez aussi le jeu que vous comptez développer pour le concours.
• Une petite vidéo sur YT (même "non répertoriée") est un plus, l'hébergement de votre jeu également.

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

• Slides BabylonJS (du 1 au 12 inclu)
  
  
• Video 1 of the course (9h-10h30) From 2020-2021 course...
• Video 2 of the course (10h45-12h)From 2020-2021 course...

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

• Extra : cours sur JavaScript asynchrone

  • promesses : : https://docs.google.com/presentation...it?usp=sharing

  • async/await : https://docs.google.com/presentation...it?usp=sharing

• Extra 2 : controller un personnage dans un jeu de plateformes avec havock et ShapeCast L'article contient des liens vers des démos et du code réutilisable pour :

  • Controller un personnage avec le moteur physique, déplacer le personnage par rapport à la caméra (comme dans les jeux modernes, avec stick gauche pour la caméra (ou souris) et stick droit pour déplacements (ou flèches clavier)

 Séance 5: projet

Exemple de material facilement réutilisables (créés avec le Node Material Editor de BabylonJS) :

• Ici un playground qui montre comment réutiliser juste avec un ID sous forme de chaîne de caractère des "materials" créés par d'autres personnes. Material = la texture qui va être appliquée sur vos meshes. On peut faire des material utilisant des "shaders" WebGL qui peuvent à la fois modifier la couleur des pixels sur les faces des meshes (fragment shaders) mais aussi leur position (vertex shaders) : https://playground.babylonjs.com/#1QIWRQ 
  La ligne de code intéressante est la ligne 41, changez juste l'id du material et vous aurez un résultat différent.
• Ici quelques threads dans le forum BabylonJS avec des exemples de materials partagés par les développeurs de la communauté : https://forum.babylonjs.com/t/node-m...-examples/6048 mais aussi 
• Ici un exemple de material qui donne un effet de "disparition/dissolve", montre aussi comment utiliser les "animations" de BabylonJS (à ne pas confondre avec les animations de squelettes de personnages articulés, là on parle d'animations simples : un objet qui bouge tout seul etc.) : https://forum.babylonjs.com/t/node-m...effect/11895/8

Exemple de génération procédurale de terrain/décors : https://www.youtube.com/watch?v=C3V-Xbj9cCE

Séance 6 : projet, exemple d'hébergement dans le cloud (sur render.com)

• Petit projet prêt pour être hébergé dans le cloud : https://github.com/micbuffa/testbabylon 
  • Pour préparer un projet pour être sur ce type d'hébergeur cloud :
  • tester en faisant : positionner une variable d'environnement PORT (par ex 'export PORT=8082'), puis faire "npm install", puis "npm run build", puis "npm run start", ça doit fonctionner.
  • Le projet exemple est un projet classique BabylonJS avec outil de build webpack.
  • On a ajouté le module express dans les dépendances (avec "npm install --save express")
  • On a ajouté à la racine du projet un mini serveur nodeJS qui sert la page web "dist/index.html"
  • On a modifié package.json : le script "start" lance maintenant "node server.js"
  • Vous pourrez modifier le code de server.js pour ajouter des routes (api) pour sauver les scores, etc.