WebGL - Faire entrer la 3D dans des pages Web

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

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

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

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

Modalités d’évaluation des acquis

• En cours de formation, par des productions
• Et, en fin de formation, par un questionnaire d'auto-évaluation