Formation - WebGL - Faire entrer la 3D dans des pages Web
Développer des applications Web 3D interactives en maîtrisant l’API WebGL et ses bibliothèques associées
La 3D s’invite désormais dans les navigateurs avec WebGL, ouvrant de nouvelles possibilités immersives pour les interfaces web. Cette formation vous guide dans la création de scènes interactives, l’utilisation de shaders, de textures et d’animations en environnement HTML/JavaScript. Vous apprendrez à exploiter les performances des bibliothèques comme gl-mat4 et three.js pour produire des rendus efficaces et multiplateformes.
- Réaliser des applications Web 3D avec l'API WebGL
- Mettre en oeuvre les algorithmes adaptés aux navigateurs et à l'environnement.
Concevoir des applications Web 3D performantes en intégrant l’API WebGL, des shaders personnalisés et des outils d’animation adaptés aux standards du web.
Intégrateurs front end, infographistes, développeurs.
Avoir de bonnes connaissances sur l'environnement HTML. Avoir des notions avancées de JavaScript ou d'un langage de développement et la connaissance d'un logiciel 3D serait un plus (Blender...).
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
Plusieurs dispositifs de financement sont accessibles via les OPCO (Opérateurs de Compétences), organismes agréés par le ministère du Travail dont le rôle est d’accompagner, collecter et gérer les contributions des entreprises au titre du financement de la formation professionnelle.
Pour plus d’information, une équipe de gestionnaires ABILWAYS spécialisée vous accompagne dans le choix de vos formations et la gestion administrative.
Équipe pédagogique :
Un consultant expert de la thématique et une équipe pédagogique en support du stagiaire pour toute question en lien avec son parcours de formation.
Techniques pédagogiques :
Alternance de théorie, de démonstrations par l’exemple et de mise en pratique grâce à de nombreux exercices individuels ou collectifs. Exercices, études de cas et cas pratiques rythment cette formation.
Ressources pédagogiques :
Un support de formation présentant l'essentiel des points vus durant la formation et proposant des éléments d'approfondissement est téléchargeable sur notre plateforme.
