Support de présentation de la conférence donnée à Paris Web le 19 octobre 2012.

1. WebGL
la 3D, c'est maintenant
dans votre navigateur
Stéphane Verdier - Paris Web 2012

2. Il y a quelques années...
DHTML
Difficile
Long
Peu performant
http://www.uselesspickles.com/triangles/ 2 / 39 - Paris Web 2012

3. Plugins...
Flash / Java
Propriétaire
VRML-X3D
Vrai 3D
Temps réel
Gourmand en
processeur et mémoire 3 / 39 - Paris Web 2012

4. Flash !
Moteurs de rendu :
> Sandy
> Away 3D
> Flare 3D
> Sophie 3D
...
4 / 39 - Paris Web 2012

5. Mais ça, c'était avant...
5 / 39 - Paris Web 2012

6. Aujourd'hui
<canvas>
API javascript basé sur OpenGL
6 / 39 - Paris Web 2012

7. WebGL : pré-requis
Carte grahique 3D Pilotes Navigateur moderne
OpenGL OpenGL dernière version
récents
7 / 39 - Paris Web 2012

8. Fallback...
WebGL ne s'active pas ?
Javascript > Injection HTML
Message d'erreur
Affichage d'une image
Exemple : EvE Online
http://www.eveonline.com/universe/spaceships/
8 / 39 - Paris Web 2012

9. Exemple
EvE Online
http://www.eveonline.com/universe/spaceships/ 9 / 39 - Paris Web 2012

10. Déploiement de WebGL
65 % des utilisateurs ont WebGL activé
webglstats.com
10 / 39 - Paris Web 2012

11. When can I use WebGL ? *
??
?
Implémentation de WebGL
?
??
Prise en charge des navigateurs
?
caniuse.com/webgl
webglstats.com
Internet Explorer > Plugin > IEWebGL
?
*Quand est-ce que je peux utiliser WebGL ? 11 / 39 - Paris Web 2012

12. Une image 3D, ça fonctionne comment ?
12 / 39 - Paris Web 2012

13. Construire une image 3D
C'est un modèle mathématique vectoriel qui définit :
une scène, des vertex ou points, des arêtes, ...
13 / 39 - Paris Web 2012

14. Construire une image 3D
+ de points = + précis
14 / 39 - Paris Web 2012

15. Construire une image 3D
Consistance et apparence réaliste des modèles, ajout de
matériaux ou shaders
15 / 39 - Paris Web 2012

16. Construire une image 3D
Comme dans la réalité, pour voir la scène il faut
de la lumière...
16 / 39 - Paris Web 2012

17. Construire une image 3D
… et au moins une caméra virtuelle
17 / 39 - Paris Web 2012

18. Affichage final
Du vectoriel aux pixels > la rasterization
Ou convertir un modèle 3D en 2D
18 / 39 - Paris Web 2012

19. Générer du code pour WebGL...
19 / 39 - Paris Web 2012

20. Générer du code pour WebGL
Long – Complexe – Fastidieux
A l'aide, des bibliothèques JavaScript
<script type="text/javascript">
Three.js
var gl;
function initGL(canvas) {
try {
gl = canvas.getContext("experimental-webgl");
PhiloGL gl.viewportWidth = canvas.width;
gl.viewportHeight = canvas.height;
} catch (e) {
GLGE }
if (!gl) {
alert("Could not initialise WebGL, sorry :-(");
}
G3D }
function getShader(gl, id) {
... var shaderScript =
if (!shaderScript)
document.getElementById(id);
{
return null;
} 20 / 39 - Paris Web 2012

21. Générer du code pour WebGL
Modélisation à l'aide, de logiciels auteurs
Autodesk Autodesk
3D Studio Max Maya Sketchup
21 / 39 - Paris Web 2012

22. WebGL en action !
22 / 39 - Paris Web 2012

23. Démonstrations technologiques
Texte procédural
http://mrdoob.github.com/three.js/examples/webgl_geometry_text.html 23 / 39 - Paris Web 2012

24. Démonstrations technologiques
Génération et groupage de cubes
http://learningthreejs.com/data/performance-merging-geometry/ 24 / 39 - Paris Web 2012

25. Démonstrations technologiques
WebGL Water
http://madebyevan.com/webgl-water/ 25 / 39 - Paris Web 2012

26. Démonstrations technologiques
RO.ME - MataBalls Playground
http://www.ro.me/tech/metaball-playground 26 / 39 - Paris Web 2012

27. Présentation de produit
Car visualizer
http://carvisualizer.plus360degrees.com/threejs/ 27 / 39 - Paris Web 2012

28. Jeux vidéos
HexGL
http://hexgl.bkcore.com/ 28 / 39 - Paris Web 2012

29. Enseignement
Surface Explorer
http://www.senchalabs.org/philogl/PhiloGL/examples/explorer/ 29 / 39 - Paris Web 2012

30. Enseignement
PlanetoWeb
http://planetoweb.net/app/planetView.html 30 / 39 - Paris Web 2012

31. Visualisation de données
Cloud Globe
http://workshop.chromeexperiments.com/cloudglobe/ 31 / 39 - Paris Web 2012

32. Visualisation de données
World temperature changes from 1880 to 2011
http://www.senchalabs.org/philogl/PhiloGL/examples/temperatureAnomalies/ 32 / 39 - Paris Web 2012

33. Visualisations de données
Small Arms and Ammunition – Import / Export
http://workshop.chromeexperiments.com/projects/armsglobe/ 33 / 39 - Paris Web 2012

34. Clip vidéo
RO.ME – 3 Dreams of Black
http://www.ro.me 34 / 39 - Paris Web 2012

35. Un standard pour la 3D de demain
Technologie jeune mais très attendue
Dotée d'un très fort potentiel
WebGL libère des plugins propriétaires
De nouvelles applications web plus riches
Déjà, le jeu vidéo s'est emparé naturellement de cette technologie
35 / 39 - Paris Web 2012

36. Une nouvelle voie s'ouvre...
Un vrai standard ouvert pour la 3D
dans le navigateur
Maintenant,
à vous d'inventer le futur qui va avec !
36 / 39 - Paris Web 2012

37. Merci !
stephane@boxesinabox.net
@KoleGramyst
@boxesinabox
boxesinabox.net
http://creativecommons.org/licenses/by-nc-sa/3.0/fr/
37 / 39 - Paris Web 2012

38. Crédits
Illustrations & Photos
Alteredqualia - http://alteredqualia.com/three/examples/webgl_terrain_dynamic.html
Nasa-JPL
3D Star by Jeff Lau - http://www.uselesspickles.com/triangles/
Road Runner vs. The Flash (48/365) - http://www.flickr.com/photos/jdhancock/4367347854/
W3C Logo HTML 5 - http://www.w3.org/html/logo/
Khronos logo & OpenGL logo - http://www.khronos.org/
Blender.org
Lights by rocketsareneat on flickr.com Creative Commons
Camera video by av hire london on flickr.com Creative Commons
06152012 Canon 60D high ISO test/Milky Way by StormLoverSwin93
http://www.flickr.com/photos/eastcentralillinoiswxphotography93/7395713712/
38 / 39 - Paris Web 2012

39. #sharethelove
39 / 39 - Paris Web 2012