canvas 3d et webgl · webgl et canvas3d webgl : w eb (open) g raphics l ibrary spéci cation...
TRANSCRIPT
1
IntroductionUtilisation de l'outil
ConclusionDémonstration
Questions/Réponses
Canvas 3D et WebGL
Louis Giraud et Laetitia Montagny
Université Lyon 1
9 Avril 2013
Louis Giraud et Laetitia Montagny Université Lyon 1 2012-2013
2
IntroductionUtilisation de l'outil
ConclusionDémonstration
Questions/Réponses
Présentation du sujet
IntroductionPrésentation du sujet
Problématique :
Représenter de la 3D dans le navigateur sans installation de plug-in
Solution :
WebGL : un standard pour la programmation en 3D sur navigateur
WebGL est soutenue par de nombreuses compagnies
Louis Giraud et Laetitia Montagny Université Lyon 1 2012-2013
3
IntroductionUtilisation de l'outil
ConclusionDémonstration
Questions/Réponses
Présentation du sujet
IntroductionWebGL et Canvas3D
WebGL : Web (Open) Graphics Library
Spéci�cation d'a�chage 3D dé�nie par le Khronos Group
Basée sur la spéci�cation OpenGL ES
Canvas3D
Librairie Javascript visant à simpli�er la conception d'applications
3D utilisant WebGL
Louis Giraud et Laetitia Montagny Université Lyon 1 2012-2013
4
IntroductionUtilisation de l'outil
ConclusionDémonstration
Questions/Réponses
Présentation du sujet
Exemples WebGL
http://www.zygotebody.com/
Louis Giraud et Laetitia Montagny Université Lyon 1 2012-2013
5
IntroductionUtilisation de l'outil
ConclusionDémonstration
Questions/Réponses
Présentation du sujet
Exemples WebGL
http://www.spacegoo.com/bubbles/
Louis Giraud et Laetitia Montagny Université Lyon 1 2012-2013
6
IntroductionUtilisation de l'outil
ConclusionDémonstration
Questions/Réponses
Installation de WebGL et Canvas3D
Outils indispensables :
1 Navigateur compatible WebGL
( Chrome, Firefox, Opera... )
2 Éditeur de texte
Le reste se code en Javascript et s'a�che dans un canvas HTML :
<body>
<canvas id="glcanvas" width="640" height="480">
Navigateur incompatible.
</canvas>
</body>
Louis Giraud et Laetitia Montagny Université Lyon 1 2012-2013
7
IntroductionUtilisation de l'outil
ConclusionDémonstration
Questions/Réponses
De WebGL à Canvas3D
Tout le reste du traitement s'e�ectue en JavascriptOn peut parfaitement utiliser Canvas3D pour le projet complet
Canvas 3D :
http://www.c3dl.org/index.php/download/
Tutoriel WebGL par Mozilla :
https://developer.mozilla.org/fr/docs/WebGL/
Louis Giraud et Laetitia Montagny Université Lyon 1 2012-2013
8
IntroductionUtilisation de l'outil
ConclusionDémonstration
Questions/Réponses
Utilisation de Canvas3D
Premières étapes :1 Récupération d'un modèle
3D2 Initialisation du Canvas (
créé en HTML )3 Création d'une scène4 Création d'un renderer
5 Ajout du renderer à la scène
Code
Louis Giraud et Laetitia Montagny Université Lyon 1 2012-2013
9
IntroductionUtilisation de l'outil
ConclusionDémonstration
Questions/Réponses
Utilisation de Canvas3D
Création du rendu :1 Initialisation du modèle 3D2 Ajout d'une vitesse de
rotation au modèle3 Ajout du modèle à la scène4 Création d'une caméra5 Paramétrage de la caméra
(position, rotation)6 Ajout de la caméra à la
scène
Code
Louis Giraud et Laetitia Montagny Université Lyon 1 2012-2013
10
IntroductionUtilisation de l'outil
ConclusionDémonstration
Questions/Réponses
Avantages/Inconvénients
Inconvénients :
Peu de projets pour le moment
Mêmes limites que l'OpenGL ES
Pas compatible avec Internet Explorer
Louis Giraud et Laetitia Montagny Université Lyon 1 2012-2013
11
IntroductionUtilisation de l'outil
ConclusionDémonstration
Questions/Réponses
Avantages/Inconvénients
Avantages :
WebGL ne requiert aucun plug-in supplémentaire
Canvas3D facilite son utilisation
Très puissant : Utilisation du GPU
Supporté par des compagnies importantes
3D sur Navigateur : compatible Windows, Mac, Linux,Mobiles...
On peut imaginer le futur du web avec des sites 3D apportant uneexpérience proche des applications natives
Louis Giraud et Laetitia Montagny Université Lyon 1 2012-2013
12
IntroductionUtilisation de l'outil
ConclusionDémonstration
Questions/Réponses
Section 4
Démonstration
Louis Giraud et Laetitia Montagny Université Lyon 1 2012-2013
13
IntroductionUtilisation de l'outil
ConclusionDémonstration
Questions/Réponses
Section 5
Questions/Réponses
Louis Giraud et Laetitia Montagny Université Lyon 1 2012-2013