Introduction au WebGL et à la librairie Three.js

1. WebGL
Introduction
Vincent Garreau
H3 P2015 15/01/2013

2. Sémantique
3D / Graphisme Offline & Stockage
Présentation Accès device
Performance Connectivité
Audio / Vidéo

3. 3D / Graphisme
CSS3 SVG Canvas WebGL

4. WebGL
Web Graphics Library
API permettant de créer des environnements 3D
dans un navigateur web
Créé par

5. WebGL
Comment ça fonctionne ?

6. Un peu comme ça...
Javascript
Interactions
natif

7. WebGL OpenGL Rendu 3D
Dans une
balise <canvas>
Javascript WebGLRenderingContext

8. Compatibilité
Desktop
Premières implémentations fin 2009
Chrome 8.0+ Safari 5.1+ Firefox 4.0+ Opera 12.0+ IE
IEWebGL
Chrome Frame
...

9. Compatibilité
Tablette / Mobile
Premières implémentations fin 2011
Blackberry Chrome Safari
Opera Firefox Android Opera
Browser iOS / And. iOS
Mobile Android Browser Mini
(PlayBook) (Dev iAd.) (Dev iAd.)

10. Comment on fait ça ?
Coder en WebGL natif
ou
Utiliser une librairie

11. Différentes librairies
CooperLicht Three.js
GLGE
SpiderGL
SceneJS
C3DL

12. Différentes librairies
Three.js

13. Three.js
Ricardo Cabello
Mr.doob

14. Three.js
Léger
Facile d’utilisation
Rendus WebGL, SVG et Canvas

15. Création d’une scène 3D
avec Three.js

16. 5 Rendu
4 Lumière
2 Caméra
1 Scène 3 Objets

17. 5 Rendu
4 Lumière
2 Caméra
1 Scène 3 Objets

18. 1 Scène
1 Scène 2 Caméra 3 Objets 4 Lumière 5 Rendu
// Création d’une scène
var scene = new THREE.Scene();

19. 5 Rendu
4 Lumière
2 Caméra
1 Scène 3 Objets

20. 2 Caméra
1 Scène 2 Caméra 3 Objets 4 Lumière 5 Rendu
// Création d’une caméra
var camera = new THREE.PerspectiveCamera(
75, // Angle de vue en degrés
window.innerWidth/window.innerHeight, // Vue ratio
0.1, // Distance minimale (axe Z)
1000 // Distance maximale (axe Z)
);
// Position de la caméra sur l’axe Z
camera.position.z = 5;

21. 5 Rendu
4 Lumière
2 Caméra
1 Scène 3 Objets

22. 3 Objets
1 Scène 2 Caméra 3 Objets 4 Lumière 5 Rendu
// Création d’une forme géométrique (ici un carré)
var cubeGeometry = new THREE.CubeGeometry(1,1,1),
cubeMaterial = new THREE.MeshLambertMaterial({
color: 0xFF0000
});
var cube = new THREE.Mesh(cubeGeometry,cubeMaterial);
// Rotation du cube (X, Y, Z)
cube.rotation.set(100,100,0);
// On ajoute le cube à notre scène
scene.add(cube);

23. 3 Objets
1 Scène 2 Caméra 3 Objets 4 Lumière 5 Rendu
// Importer un modèle SketchUp (Collada, .dae)
new THREE.ColladaLoader().load('models/piano.dae',
function(model){
var piano = model.scene;
piano.scale.set(0.1, 0.1, 0.1);
piano.position.set(-10, -15, 0);
piano.rotation.set(Math.PI/8, Math.PI/4, 0);
scene.add(piano);
});

24. 3 Objets
1 Scène 2 Caméra 3 Objets 4 Lumière 5 Rendu
// Importer un modèle .obj converti en .js
new THREE.JSONLoader().load('models/A380.js',
function(planeGeometry, material){
var planeMaterial = new THREE.MeshFaceMaterial(
material
);
var plane = new THREE.Mesh(
planeGeometry, planeMaterial
);
scene.add(plane);
}, 'models/A380');

25. 5 Rendu
4 Lumière
2 Caméra
1 Scène 3 Objets

26. 4 Lumière
1 Scène 2 Caméra 3 Objets 4 Lumière 5 Rendu
// Création d’une lumière
var directionalLight = new THREE.DirectionalLight(
0xFFFFFF, // Couleur
1 // Intensité
);
directionalLight.position.set(-5, 1, 10);
scene.add(directionalLight);

27. 5 Rendu
4 Lumière
2 Caméra
1 Scène 3 Objets

28. 5 Rendu
1 Scène 2 Caméra 3 Objets 4 Lumière 5 Rendu
var renderer = new THREE.WebGLRenderer();
// Taille du rendu
renderer.setSize(window.innerWidth, window.innerHeight);
// On intègre le rendu dans la page
document.body.appendChild(renderer.domElement);
function render(){
requestAnimationFrame(render); // Rafraîchissement
renderer.render(scene, camera); // Rendu
}
render(); // On lance le rendu

29. Bien d’autres méthodes
existent...
Création d’ombres, différents types de lumières, de matières
et de caméras, géométries et textures dynamiques...
mrdoob.github.com/three.js/docs

30. Ressources
Débuter avec Three.js
http://www.aerotwist.com/tutorials/getting-started-with-three-js/
http://www.grafikart.fr/tutoriels/javascript/three-js-3d-289
http://fr.tuto.com/javascript/webgl-les-lumieres-javascript,34630.html
En vrac
https://github.com/mrdoob/three.js/archive/master.zip (dossier examples)
http://mrdoob.github.com/three.js/
http://www.chromeexperiments.com/
http://dev.opera.com/articles/view/an-introduction-to-webgl/
https://developer.mozilla.org/fr/docs/WebGL/Commencer_avec_WebGL
http://learningthreejs.com/
http://learningwebgl.com/blog/?page_id=1217
http://www.html5rocks.com/
http://alteredqualia.com/
https://sketchfab.com/
http://www.khronos.org/registry/webgl/specs/latest/

31. En conclusion, le WebGL c’est...
Une forte valeur ajoutée
« expérience utilisateur »
Pas si difficile que ça, notamment avec
Three.js (des notions en 3D est un plus)
Une technologie qui tend à se démocratiser
(mobile, e-commerce...)

32. Merci !
Slides + Démos
vincentgarreau.com/webgl.zip
Des questions ?