Formation ThreeJS avec WebGL
| 3250€ HT / personne |
| 5 jours (35 heures) |
Présentation
Angular est le framework typescript de référence permettant d’avoir des projets bien structurés et de bénéficier de l’ensemble de l’outillage (ngTools, Angular Cli) du framework. Il fait partie avec React des deux frameworks WEB issus des GAFAM et largement utilisé et maintenu par la communauté open source.
De son côté, Three JS est une bibliothèque JavaScript (existant aussi en typescript) qui permet de créer des scènes 3D dans un navigateur WEB. Cette librairie est très utilisée dans le monde du WebGL pour réaliser des sites web interactifs (Sketchfab, Orano Innovation), mais aussi pour des produits industriels (simulateur 3D en accès SAAS, navigation virtuelles dans des clones numériques de Bâtiment).
Dans cette formation, vous découvrirez comment créer un Sketchfab vous-même vous permettant de visualiser et naviguer dans une scène 3D. Vous apprendrez les fondamentaux de la 3D avec ThreeJS (graphe de scène, mesh, matériaux, vertices, facettes, matrices de caméra, cône de vision (view frustum). Ces fondamentaux vous seront utiles à de nombreuses librairies et SDK 3D dont Matterport pour créer, par exemple, des clones numériques.
Enfin, vous découvrirez un framework logiciel Open Source pour la CAO/CFAO, l’IAO et la modélisation 3D : OpenCascade. Nous ouvrirons sur deux exemples actuels et utilisés dans le Web d’Opencascade: Node-Occ (Recompilation en Natif Node) et OpencascadeJS (WebAssembly).
Objectifs
- Découvrir les fonctionnalités de ThreeJS
- Savoir développer une nouvelle application Web avec Angular et Three JS
- Savoir concevoir une application Angular avec JavaScript et
TypeScript 4.8 - Savoir construire un graphe de scène incluant des objets, des matériaux et une caméra
- Savoir définir les positions et rotations des éléments de la scène et les caractéristiques de la caméra
- Savoir différencier les avantages/inconvénient d’un rendu de la scène dans le navigateur vs un rendu côté serveur et les cas d’usages
Public visé
- Développeur Web
- Lead Développeur
- Architecte
- Chef de projets
Pré-requis
Connaissance de JavaScript ou TypeScript, HTML5/CSS3, Angular
Programme de notre formation ThreeJS avec WebGL
Jour 1 – Introduction
- WebGL and ThreeJS : son histoire
- TypeScript : le typage du JavaScript
- ECMAscript, DOM et BOM
- Support des Canvas
Les bases du WebGL (Fondamentaux I)
- Un Objet 3D et sa définition
- La définition d’une scène
- La mise à jour des coordonnées (position, taille, rotation)
- Les différents types de caméras
- Essai sur des exemples : modification online sur JSFiddle
Les bases de l’Angular
- Intégrer Angular
- Les composants, les modules, les services
- Le property binding, l’event binding
- Les forms
- Les différents types de directives
- Le routeur et la hiérarchie des routes (Exemple avec ui-router et lazy loading)
- Essai sur des exemples : modification online sur JSFiddle
Jour 2 – Les bases du WebGL (Fondamentaux II)
- Les maillages et les géométries
- Les différents types de matériaux et d’illuminations
- L’export de géométries ou de scènes
- Les détections de collision
- Essai sur des exemples : modification online sur JSFiddle
Jour 3 – Création d’un SKETCHFAB (Jour 1)
- Préparation de la coquille d’application Angular qui héberge le canvas
- Mise en place des interfaces (importer, exporter, changer de caméra, centrer la scène sur l’objet)
- Binding du canvas avec la librairie ThreeJS
- Écriture du chargement des différents éléments (caméra, vertices, faces, lumières, matériaux) dans la scène 3D
Jour 4 – Création d’un SKETCHFAB (Jour 2)
- Écriture du loader d’objets 3D dans ThreeJS
- Préparation de la scène
- Binding des interfaces Angular avec les appels d’API dans ThreeJS
- Essai et démonstration en groupe
- Import et visualisation de différents modèles 3D
Jour 5 – Présentation d’OpenCascade
- Ouverture sur deux différentes modélisations géométriques des solides (BREP, CSG) et sur les avantages différences de chacun
- Présentation d’OpenCascade et de sa version OpenSource Node-Occ
- Exemple de rendu côté serveur de CSG et des avantages
- Comparaison avec une version WebAssembly d’OpenCascade
Pour aller plus loin
Formation Angular
Formation Ionic
Formation D3.js
Langues et Lieux disponibles
Langues
- Français
- Anglais / English
Lieux
-
France entière
- Paris
- Lille
- Reims
- Lyon
- Toulouse
- Bordeaux
- Montpellier
- Nice
- Sophia Antipolis
- Marseille
- Aix-en-Provence
- Nantes
- Rennes
- Strasbourg
- Grenoble
- Dijon
- Tours
- Saint-Étienne
- Toulon
- Angers
-
Belgique
- Bruxelles
- Liège
-
Suisse
- Genève
- Zurich
- Lausanne
-
Luxembourg
Nos Formateurs Référents
Antony
Lead-dev fullstack avec un intérêt fort pour la stack Node et le TypeScript. Mes dernières applications développées récemment sont dans le domaine de la 3D, du calcul scientifique, et de l’IOT. J’accompagne mes clients du POC jusqu’au déploiement en production grâce aux pratiques DevOps.
Témoignages
⭐⭐⭐⭐⭐ 4,8/5 sur Google My Business. Vous aussi, partagez votre expérience !
Afficher tous les témoignages
⭐⭐⭐⭐⭐ 4,8/5 sur Google My Business. Vous aussi, partagez votre expérience !
Noter la formation
| 3250€ HT / personne |
| 5 jours (35 heures) |
UNE QUESTION ? UN PROJET ? UN AUDIT DE CODE / D'INFRASTRUCTURE ?
Pour vos besoins d’expertise que vous ne trouvez nulle part ailleurs, n’hésitez pas à nous contacter.
ILS SE SONT FORMÉS CHEZ NOUS
