canvas 3d et webgl · webgl et canvas3d webgl : w eb (open) g raphics l ibrary spéci cation...

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



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


3



Questions/Réponses


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


4



Questions/Réponses


Exemples WebGL

http://www.zygotebody.com/


5



Questions/Réponses


Exemples WebGL

http://www.spacegoo.com/bubbles/


6



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>


7



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/


8



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


9



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


10



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


11



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


12



Questions/Réponses

Section 4

Démonstration


13



Questions/Réponses

Section 5

Questions/Réponses


canvas 3d et webgl · webgl et canvas3d webgl : w eb (open) g raphics l ibrary spéci cation...

Documents