Upload
trandat
View
219
Download
0
Embed Size (px)
Citation preview
WebGLla 3D, c'est maintenantdans votre navigateur
Stéphane Verdier - Paris Web 2012
Il y a quelques années...
DHTML
Difficile
Long
Peu performant
2 / 39 - Paris Web 2012http://www.uselesspickles.com/triangles/
Plugins...Flash / Java
Propriétaire
VRML-X3D
Vrai 3D
Temps réel
Gourmand en processeur et mémoire
3 / 39 - Paris Web 2012
Flash !Moteurs de rendu :
> Sandy> Away 3D> Flare 3D> Sophie 3D
...
4 / 39 - Paris Web 2012
5 / 39 - Paris Web 2012
Mais ça, c'était avant...
Aujourd'hui
6 / 39 - Paris Web 2012
API javascript basé sur OpenGL
<canvas>
WebGL : pré-requis
7 / 39 - Paris Web 2012
Carte grahique 3DOpenGL
PilotesOpenGLrécents
Navigateur modernedernière version
Fallback...
8 / 39 - Paris Web 2012
WebGL ne s'active pas ?
Javascript > Injection HTML
Message d'erreur
Affichage d'une image
Exemple : EvE Onlinehttp://www.eveonline.com/universe/spaceships/
Exemple
9 / 39 - Paris Web 2012
EvE Online
http://www.eveonline.com/universe/spaceships/
Déploiement de WebGL
10 / 39 - Paris Web 2012
65 % des utilisateurs ont WebGL activé
webglstats.com
When can I use WebGL ?*
11 / 39 - Paris Web 2012
????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 ?
12 / 39 - Paris Web 2012
Une image 3D, ça fonctionne comment ?
Construire une image 3D
13 / 39 - Paris Web 2012
C'est un modèle mathématique vectoriel qui définit :
une scène, des vertex ou points, des arêtes, ...
Construire une image 3D
14 / 39 - Paris Web 2012
+ de points = + précis
Construire une image 3D
15 / 39 - Paris Web 2012
Consistance et apparence réaliste des modèles, ajout dematériaux ou shaders
Construire une image 3D
16 / 39 - Paris Web 2012
Comme dans la réalité, pour voir la scène il fautde la lumière...
Construire une image 3D
17 / 39 - Paris Web 2012
… et au moins une caméra virtuelle
Affichage final
18 / 39 - Paris Web 2012
Du vectoriel aux pixels > la rasterizationOu convertir un modèle 3D en 2D
19 / 39 - Paris Web 2012
Générer du code pour WebGL...
Générer du code pour WebGL
20 / 39 - Paris Web 2012
Long – Complexe – FastidieuxA l'aide, des bibliothèques JavaScript
Three.js
PhiloGL
GLGE
G3D
...
<script type="text/javascript"><script type="text/javascript"> var gl;var gl; function initGL(canvas) {function initGL(canvas) { try {try { gl = canvas.getContext("experimental-webgl");gl = canvas.getContext("experimental-webgl"); gl.viewportWidth = canvas.width;gl.viewportWidth = canvas.width; gl.viewportHeight = canvas.height;gl.viewportHeight = canvas.height; } catch (e) {} catch (e) { }} if (!gl) {if (!gl) { alert("Could not initialise WebGL, sorry :-(");alert("Could not initialise WebGL, sorry :-("); }} }}
function getShader(gl, id) {function getShader(gl, id) { var shaderScript = document.getElementById(id);var shaderScript = document.getElementById(id); if (!shaderScript) {if (!shaderScript) { return null;return null; }}
Générer du code pour WebGL
21 / 39 - Paris Web 2012
Modélisation à l'aide, de logiciels auteurs
Autodesk3D Studio Max
AutodeskMaya Sketchup
22 / 39 - Paris Web 2012
WebGL en action !
Démonstrations technologiques
23 / 39 - Paris Web 2012
Texte procédural
http://mrdoob.github.com/three.js/examples/webgl_geometry_text.html
Démonstrations technologiques
24 / 39 - Paris Web 2012
Génération et groupage de cubes
http://learningthreejs.com/data/performance-merging-geometry/
Démonstrations technologiques
25 / 39 - Paris Web 2012
WebGL Water
http://madebyevan.com/webgl-water/
Démonstrations technologiques
26 / 39 - Paris Web 2012
RO.ME - MataBalls Playground
http://www.ro.me/tech/metaball-playground
Présentation de produit
27 / 39 - Paris Web 2012
Car visualizer
http://carvisualizer.plus360degrees.com/threejs/
Jeux vidéos
28 / 39 - Paris Web 2012
HexGL
http://hexgl.bkcore.com/
Enseignement
29 / 39 - Paris Web 2012http://www.senchalabs.org/philogl/PhiloGL/examples/explorer/
Surface Explorer
Enseignement
30 / 39 - Paris Web 2012http://planetoweb.net/app/planetView.html
PlanetoWeb
Visualisation de données
31 / 39 - Paris Web 2012http://workshop.chromeexperiments.com/cloudglobe/
Cloud Globe
Visualisation de données
32 / 39 - Paris Web 2012http://www.senchalabs.org/philogl/PhiloGL/examples/temperatureAnomalies/
World temperature changes from 1880 to 2011
Visualisations de données
33 / 39 - Paris Web 2012http://workshop.chromeexperiments.com/projects/armsglobe/
Small Arms and Ammunition – Import / Export
Clip vidéo
34 / 39 - Paris Web 2012
RO.ME – 3 Dreams of Black
http://www.ro.me
Un standard pour la 3D de demain
35 / 39 - Paris Web 2012
Technologie jeune mais très attendue
Dotée d'un très fort potentiel
WebGL libère des plugins propriétairesDe nouvelles applications web plus riches
Déjà, le jeu vidéo s'est emparé naturellement de cette technologie
Une nouvelle voie s'ouvre...
36 / 39 - Paris Web 2012
Un vrai standard ouvert pour la 3D dans le navigateur
Maintenant,à vous d'inventer le futur qui va avec !
Merci !
37 / 39 - Paris Web 2012
@KoleGramyst
@boxesinabox
boxesinabox.net
http://creativecommons.org/licenses/by-nc-sa/3.0/fr/
Crédits
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
Illustrations & Photos
39 / 39 - Paris Web 2012
#sharethelove