Développement web : Canvas, SVG et WebGL

Développement Boîte à outils

Durée
3 jour(s)
Niveau
Intermédiaire
Référence
DE-059

Présentation

Les technologies web ont vu leur périmètre de fonctionnalités s’étendre de manière impressionnante ces dernières années : réalisation de formes statiques vectorielles avec SVG (Scalable Vector Graphics), dessins complexes profitant de l’accélération graphique 2D et 3D avec Canvas, dont l’intégration d’OpenGL avec WebGL (Web Graphics Library). Il n’a jamais été aussi simple de réaliser des dessins et animations complexes, exécutés directement dans votre navigateur ordinateur ou mobile, sans aucune extension.
Au cours de cette formation, vous apprendrez à réaliser des figures avec SVG, à réaliser des animations et formes avec JavaScript et la balise. Vous vous initierez au rendu 3D avec JavaScript et WebGL par le biais de la bibliothèque three.js pour créer des espaces 3D navigables dans un navigateur et/ou en réalité augmentée avec votre téléphone ou un casque VR.

Objectifs de la formation

Découvrir SVG et s’en servir pour réaliser des images
Comprendre et utiliser les filtres SVG avec CSS
Découvrir la balise et ses possibilités
Créer des formes et des animations avec Canvas
S’initier aux modèles 3D avec three.js
Savoir importer et utiliser des fichiers STL dans three.js

Public

Toute personne souhaitant développer ses connaissances en développement web.

Prérequis

Une connaissance en HTML, CSS et JavaScript est nécessaire (équivalente à la formation « Web front : HTML, CSS et JavaScript niveau 1 »)

Tester vos compétences

Programme

1- Introduction

Différences entre SVG et Canvas
Pourquoi réaliser ses contenus graphiques via les technologies du web
Tester la compatibilité navigateur avec caniuse

2- SVG

Que signifie Scalable Vector Graphics ? Avantages et inconvénients
Créer ses balises SVG
Les différentes formes utilisables avec SVG
Les différents attributs accessibles avec SVG
Styliser ses formes avec CSS (et JavaScript)

3- Canvas

Notions liées à WebGL, contextes et environnement
Créer ses premières formes avec Canvas
Notions de « hit box » : comment sélectionner un élément canvas avec la souris
Styliser et animer ses formes avec JavaScript

4- Bibliothèque three.js : rendu 3D

Qu’est ce que three.js ? Exemples
Créer son premier rendu 3D avec three.js
Notions d’eventLoop et de demande d’animation, performances
Présentation de Scene, Camera et Renderer
Créer des objets et leur ajouter des textures
Ajouter des événements sur des objets
Différences entre le rendu navigateur et le rendu VR
Réaliser des formes au format STL et les intégrer dans three.js

Date de dernière modification : 03/03/2023

Organisation

Modalités d'évaluation :

Questionnaires à choix multiples (QCM) en fin de formation. L'intervenant formulera également une appréciation sur vos acquis pour l'entièreté de la formation.

Moyens pédagogiques :

Formation alternant la théorie et la pratique, avec un intervenant présentant la formation en direct. Possibilité de réaliser cette formation en face-à-face dans nos locaux, dans vos locaux d'entreprise ou à distance via visioconférence.
Une fois terminée, vous disposerez d'une attestation de suivi de la formation, ainsi que des contenus de cours relatifs au contenu présenté.

Informations pratiques :

En cas de dispense dans nos locaux, le matériel informatique est fourni et l'ensemble des commodités sont accessibles. Nos locaux sont également accessibles aux personnes à mobilité réduite : découvrir notre centre.
Retrouvez toutes les informations pratiques pour préparer votre formation sur notre page dédiée : informations pratiques.

Ces formations pourraient vous intéresser

Prise en main de la suite Adobe
La suite Adobe, également connue sous le nom de la Creative Suite ou Creative Cloud (CC), comporte de nombreux logiciels de création graphique. Vous y retrouverez ainsi Photoshop (retouches et création), Illustrator (création …
En savoir plus
Développement web : UI et UX
Le développement web est devenu, au fil des années, un environnement demandant une exigence certaine dans l’UI (Interface Utilisateur) et l’UX (eXpérience Utilisateur). De nombreux points graphiques sont à prendre en …
En savoir plus