WebGL est une norme pour le rendu de graphiques 2D et 3D sur le web, dérivée d'OpenGL ES 2.0, et utilisée avec JavaScript et HTML5. Elle offre des avantages comme l'interaction directe avec des éléments HTML et le support mobile, mais nécessite une configuration hardware adéquate et présente des limitations par rapport à OpenGL. L'utilisation d'un moteur tel que Three.js facilite le développement en 3D dans les navigateurs.

1. WebGL
Présentée par:
Mouna Maazoun

2. Plan
 Introduction
 FandamentauxWebGL
 Avantage et inconvénientWebGL
 Conclusion

3. Introduction
 WebGL (Web Graphics Library) est une norme pour les graphismes
3D sur leWeb, il est conçu dans le but de rendre les graphiques 2D
et des graphiques 3D interactifs.
 Il est dérivé de la bibliothèque ES 2.0 d'OpenGL qui est un faible
niveauAPI 3D pour les téléphones et autres appareils mobiles.

4. Introduction
 WebGL est une API JavaScript qui peut être utilisé avec HTML5.
HTML5 a plusieurs fonctionnalités pour soutenir des graphismes
3D tels que Canvas 2D,WebGL, SVG, CSS 3D et transforme SMIL.
 OpenGL (Open Graphics Library) est multi-langue,API multi-
plateforme pour les graphiques 2D et 3D. Il est un ensemble de
commandes. OpenGL4.5 est la dernière version d'OpenGL. Le
tableau suivant présente un ensemble de technologies liées à
OpenGL.

5. Fondamentaux
WebGL
 Dans les univers en 3D nous avons habituellement à spécifier
quelque-un des éléments suivants:
 Une scène
 Un moteur de rendu
 Une caméra
 Un objet ou deux (lié à un rendu)

6. Fondamentaux
WebGL
 Initialiser la scène
var renderer = new THREE.WebGLRenderer();
var camera = new THREE.Camera(
VIEW_ANGLE,
ASPECT,
NEAR,
FAR
);
var scene = new THREE.Scene();
// la caméra est positionée par défaut à (0,0,0) reculons un peu
camera.position.z = 300;
// initialiser le renderer
renderer.setSize(WIDTH, HEIGHT);

7. Fondamentaux
WebGL
 Créer objet (Sphere)
var sphere = new THREE.Mesh(
new THREE.SphereGeometry(radius,
segments,
rings
),
sphereMaterial
);
// ajoutons la sphère à la scène
scene.addChild(sphere);

8. Fondamentaux
WebGL
 Les lumières
// créons une source de lumière ponctuelle
var pointLight = new THREE.PointLight( 0xFFFFFF );
// on la positionne
pointLight.position.x = 10;
pointLight.position.y = 50;
pointLight.position.z = 130;
// ajoutons la à la scène finale
scene.addLight(pointLight);

9. Fondamentaux
WebGL
 Le rendu final
renderer.render(scene, camera);

10. Avantage et
inconvénient
WebGL
Avantages
 Les applicationsWebGL sont écrits en JavaScript.
 L'utilisation de ces applications, vous pouvez interagir directement
avec d'autres éléments du document HTML.
 Vous pouvez également utiliser d' autres bibliothèques
JavaScript (eg JQuery) et les technologies HTML pour enrichir
l'applicationWebGL.
 WebGL prend également en charge les navigateurs mobiles tels
que Safari iOS, le navigateurAndroid et Chrome pour Android.
 Open source
 Vous pouvez accéder au code source de la bibliothèque et de
comprendre comment il fonctionne et comment il a été mis au
point.

11. Avantage et
inconvénient
WebGL
Avantages
 JavaScript est une composante demi-programmation et demi-
HTML.
 Pour exécuter ce script, il n'y a pas besoin de compiler le fichier
 vous pouvez ouvrir directement le fichier en utilisant l'un des
navigateurs et vérifier le résultat.
 Les applicationsWebGL sont développées en utilisant JavaScript, il
n'y a pas besoin de compiler des applicationsWebGL ainsi.
 JavaScript supporte la gestion automatique de la mémoire.
 Il n'y a pas besoin d'allocation manuelle de la mémoire.
 WebGL hérite de cette fonctionnalité de JavaScript.
 DepuisWebGL est intégré dans HTML 5, il n'y a pas besoin de
configuration supplémentaire.
 Pour écrire une applicationWebGL, tout ce dont vous avez besoin
est un éditeur de texte et un navigateur Web.

12. Avantage et
inconvénient
WebGL
Inconvénients
 La configuration Hardware requise est importante, notamment au
niveau de la carte graphique.
 Certains pilotes de carte graphique sont bloqués car la
compatibilité n'a pas été assurée
 WebGL est basée sur OpenGL ES2.0 Certaines fonctionnalités
d'OpenGL y sont absentes, dont :
 Le selection Buffer
 Les textures 3D
 Les shaders :WebGL n'utilise que le vertex shader et le fragment
shader. On ne peut pas modifier le geometry shader

13. Conclusion
La 3D native dans les navigateurs est quelque chose de très
fun et en utilisant un moteur commeThree.js cela évitera bien des
maux de tête et permettra de réaliser sérieusement pleins de trucs
qui le seront moins.

14. Merci pour votre attention