A l’issue de cette formation, vous serez capable de :

• Réaliser des applications Web 3D avec l'API WebGL
• Mettre en oeuvre les algorithmes adaptés aux navigateurs et à l'environnement.

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