Formation WebGL - Faire entrer la 3D dans des pages Web

Programme de votre formation

1. #

   M2I START AVANT VOTRE FORMATION

   Contextualisation du projet de formation et prise en compte des besoins de chacun

   • Positionnement initial de l’apprenant par rapport aux objectifs
   • Définition des priorités et des objectifs personnels de l’apprenant
   • Vidéos de mise en situation
   • Accès au Chat interactif myM2i pour interagir avec les membres de son groupe
   
2. #

   M2I LIVE VOTRE FORMATION ANIMÉE PAR NOTRE EXPERT ^¹

   Programme

   Jour 1

   Les bases de WebGL

   • OpenGL et l'accélération matérielle
   • JSON et le formatage des données
   • Versions et implémentation dans les navigateurs
   • Les bibliothèques de développement

   Créer l'environnement

   • La page HTML et la balise Canvas
   • Créer le contexte WebGL

   Exemples de travaux pratiques (à titre indicatif)

   • Créer une page HTML avec une balise Canvas et initialiser un contexte WebGL

   Jour 2

   Ajouter du contenu

   • Notion de scène
   • Initialisation des shaders
   • Chargement depuis le DOM
   • Vertex shader
   • Fragment shader

   Créer des objets

   • Dessiner la scène
   • Créer un objet 2D
   • Opérations sur les matrices
   • Gérer les matrices avec la bibliothèque mathématique
   • La librairie gl-mat4

   Ajouter des couleurs avec les shaders

   • Colorer les sommets
   • Colorer les fragments

   Animer des objets

   • Rotation
   • Déplacement

   Exemples de travaux pratiques (à titre indicatif)

   • Animer un carré 2D en rotation et déplacement

   Jour 3

   Créer des objets 3D

   • Définir la position des vertex d'un cube
   • Définir les couleurs des vertex d'un cube
   • Définir la liste des vertex (array)
   • Dessiner le cube
   • La bibliothèque three.js
   • Plug-in d'export Blender

   Utiliser des textures

   • Charger les textures
   • Mappage des textures
   • Mettre à jour les shaders
   • Dessiner le cube texturé
   • Cross-domain textures (CORS)

   Eclairage

   • Simuler les lumières et les ombres
   • Construire les mormales pour les vertex
   • Mettre à jour les shaders

   Animer les textures

   • Accéder à la vidéo
   • Utiliser la vidéo comme texture

   Best practices

   Les extensions

   • Convention de nommage
   • Extensions disponibles
   • Liste des extensions
   • Activation
   • Compatibilité des navigateurs

   Exemples de travaux pratiques (à titre indicatif)

   • Ajouter des lumières et des ombres pour simuler un éclairage réaliste

   Le contenu de ce programme peut faire l'objet d'adaptation selon les niveaux, prérequis et besoins des apprenants.

   
3. #

   M2I BOOST APRÈS VOTRE FORMATION

   Réactivation et consolidation des acquis en situation de travail

   • 30 jours d’accompagnement personnalisé sur myM2i inclus ^²
   • Ressources Boosters (Abonnement au M2i’Mag Soft Skills, formations offertes, invitations aux conférences d’actualité…)
   

1. ^¹ Les actions et les outils présentés dans ce programme le sont à titre indicatif et peuvent faire l’objet d'adaptation selon les niveaux, prérequis et besoins des apprenants. Les compétences clés de ce programme sont traitées à raison d'une compétence par demi-journée de formation.
2. ^² Sur myM2i, pendant 30 jours post-fin de formation, les apprenants disposent d’une messagerie sécurisée pour échanger, dans la limite de 4 sollicitations, avec leur formateur.