D4H Minor Programming 3D Games on the Web 2021-2022

Introduction

Je vous propose de pratiquer le langage JavaScript à travers l'apprentissage de la 3d au travers de la librairie 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 2022.

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.

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

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 et 3: modèles 3D, moteurs physique, collisions

Supports de cours :

• Slides BabylonJS 1 (de 32 à 41) sur les bases
• Slides BabylonJS 2 (de 1 à XXX) 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

Séance 4 : particules, asset manager, son et musique, rays, multiple caméras

Support de cours

• Slides 
   
• Live coding exemples voir dossier "tp3" dans le repository github du cours 

Séance 8 : FPS camera, crosshair, gun shots, hosting on heroku, etc.

Support de cours :

• Slides 
  
   
• Live coding examples from the course, today see "tp4" folder : Github repository here

• Game folder ready to be deployed to Heroku (includes index.js, a minimal NodeJS server) : GitHub repository of a prokect ready to go)
  • cd into the game folder
  • npm install
  • npm run start to run the server, the game should be available on http://localhost:3000
  • If you push this to a github repo, then link this repo to a Heroku application, it should work. See the section in the slides with screenshots, on how to do this...