Zakia Ajouaoui, Abdoulaye Keita, Saveil Nuel, Aurélien Vialon

Introduction

1. Historique

2. WebGL

3. Utilisation et fonctionnement

4. Démonstrations

5. Outils combinés à WebGL

6. Limites

WebGL 2

Historique

• Créé par la Fondation Mozilla en 2006

• Maintenu depuis 2006 par le consortium Khronos Group

• Apple, Google, Mozilla et Opera sur le projet

• Première version en Mars 2011

WebGL 3

WebGL

• API de 3D dynamique pour HTML5

• Pages web, applications…

• Javascript et GLSL

• Utilise l’accélération matérielle d’un terminal à l’aide d’OpenGL

• Sans plugin

WebGL 4

WebGL

• Support des navigateurs les plus répandus

• Firefox à partir de la version 4 (2011)

• Chrome depuis la version 9 (2011)

• Opera 12.0 (2011)

• Safari 6.0 (2012)

• Internet Explorer depuis la version 11 (2013)

WebGL 5

WebGL

• Concurrents et alternatives

• Silverlight 5.0

• Unity3D (Unity3D WebPlayer)

• Flash Stage 3D

• Unreal Engine 4

WebGL 6

Utilisation et fonctionnement

• Utilise la carte graphique au lieu du processeur

• OPENGL ES : version système embarqués d'OPENGL

• Améliore les performances (bande passante, calculs,...)

WebGL 7

Utilisation et fonctionnement

• Obtenir le contexte

WebGL 8

Utilisation et fonctionnement

• OPENGL ES

• Liste de sommets

• Données 3D côté mémoire graphique avec les VBOs

WebGL 9

Utilisation et fonctionnement

• OPENGL ES

• Boucle de rendu (setInterval)

• Mathématiques de la 3D

• glMatrix

WebGL 10

Utilisation et fonctionnement

• OPENGL ES

• Utilisation des shaders (vertex et fragment/pixel)

WebGL 11

Utilisation et fonctionnement

• Des cartes sont dédiées à la synthèse d'image 3D. Elles sont chargées des tâches suivantes : transformation de points 3D, c'est-à-dire la projection de sommets 3D en 2D (pixels) par une matrice de changement de repère ;

• calcul de l'illumination locale de points 3D dont les versions les plus récentes sont les vertex shaders ;

• enfin, le tracé de surfaces à l'écran avec application de textures.

WebGL 12

Utilisation et fonctionnement

WebGL 13

Utilisation et fonctionnement

WebGL 14

Compilation noyau kernel

Exécution des commandes

Lecture des résultats

Outils combinés à WebGL

• Librairies implémentant WebGL

• Three.js

• SceneJS

• SpiderGL

• Babylon.js

• Outils de modélisation 3D

• Blender

• Autodesk Maya

• Cinema 4D

• 3Ds Max

WebGL 15

Quelques API en WebGL pour gérer les évènements :

• PointerLock API (comme pour les jeux FPS)

• GamePad API (pour utiliser des manettes dans les jeux)

• KinectJS (utilisation de la Kinect)

• et d'autres ...

Outils combinés à WebGL

WebGL 16

Démonstrations

• Cube

• http://knserv.fr/saveil/webgl/Cube/cube_webGL.html

• Importation de formes 3D

• http://knserv.fr/saveil/webgl/importation.html

• Exemple shaders

• http://knserv.fr/saveil/webgl

• Web Socket

• http://knserv.fr/saveil/webgl/demowebsocket.html

WebGL 17

Limites

• Basé sur un OpenGL lite, pas de :

• Tampon de sélection

• Support des textures 3D

• Geometry shader

WebGL 18

Limites

WebGL 19

Conclusion

• S'impose peu à peu

• Technologie libre

• Sans plugin

• Portabilité amenée à être totale

• Accélération matérielle

• Quelques manques

WebGL 20

Références

• http://fr.wikipedia.org/wiki/WebGL

• http://www.khronos.org/webgl/

• http://msdn.microsoft.com/fr-fr/dn308572.aspx

• http://www.spacegoo.com/blog/le-picking-en-webgl

WebGL 21

Questions ?

WebGL 22