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

stephane@boxesinabox.net

@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