WebGL · WebGL : pré-requis 7 / 39 - Paris Web 2012 Carte grahique 3D OpenGL Pilotes OpenGL...

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

Transcript of WebGL · WebGL : pré-requis 7 / 39 - Paris Web 2012 Carte grahique 3D OpenGL Pilotes OpenGL...

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

WebGLla 3D, c'est maintenantdans votre navigateur

Stéphane Verdier - Paris Web 2012

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

Il y a quelques années...

DHTML

Difficile

Long

Peu performant

2 / 39 - Paris Web 2012http://www.uselesspickles.com/triangles/

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

Plugins...Flash / Java

Propriétaire

VRML-X3D

Vrai 3D

Temps réel

Gourmand en processeur et mémoire

3 / 39 - Paris Web 2012

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

Flash !Moteurs de rendu :

> Sandy> Away 3D> Flare 3D> Sophie 3D

...

4 / 39 - Paris Web 2012

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

5 / 39 - Paris Web 2012

Mais ça, c'était avant...

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

Aujourd'hui

6 / 39 - Paris Web 2012

API javascript basé sur OpenGL

<canvas>

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

WebGL : pré-requis

7 / 39 - Paris Web 2012

Carte grahique 3DOpenGL

PilotesOpenGLrécents

Navigateur modernedernière version

Page 8: WebGL · WebGL : pré-requis 7 / 39 - Paris Web 2012 Carte grahique 3D OpenGL Pilotes OpenGL récents Navigateur moderne derniè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/

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

Exemple

9 / 39 - Paris Web 2012

EvE Online

http://www.eveonline.com/universe/spaceships/

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

Déploiement de WebGL

10 / 39 - Paris Web 2012

65 % des utilisateurs ont WebGL activé

webglstats.com

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

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 ?

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

12 / 39 - Paris Web 2012

Une image 3D, ça fonctionne comment ?

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

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, ...

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

Construire une image 3D

14 / 39 - Paris Web 2012

+ de points = + précis

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

Construire une image 3D

15 / 39 - Paris Web 2012

Consistance et apparence réaliste des modèles, ajout dematériaux ou shaders

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

Construire une image 3D

16 / 39 - Paris Web 2012

Comme dans la réalité, pour voir la scène il fautde la lumière...

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

Construire une image 3D

17 / 39 - Paris Web 2012

… et au moins une caméra virtuelle

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

Affichage final

18 / 39 - Paris Web 2012

Du vectoriel aux pixels > la rasterizationOu convertir un modèle 3D en 2D

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

19 / 39 - Paris Web 2012

Générer du code pour WebGL...

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

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; }}

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

Générer du code pour WebGL

21 / 39 - Paris Web 2012

Modélisation à l'aide, de logiciels auteurs

Autodesk3D Studio Max

AutodeskMaya Sketchup

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

22 / 39 - Paris Web 2012

WebGL en action !

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

Démonstrations technologiques

23 / 39 - Paris Web 2012

Texte procédural

http://mrdoob.github.com/three.js/examples/webgl_geometry_text.html

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

Démonstrations technologiques

24 / 39 - Paris Web 2012

Génération et groupage de cubes

http://learningthreejs.com/data/performance-merging-geometry/

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

Démonstrations technologiques

25 / 39 - Paris Web 2012

WebGL Water

http://madebyevan.com/webgl-water/

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

Démonstrations technologiques

26 / 39 - Paris Web 2012

RO.ME - MataBalls Playground

http://www.ro.me/tech/metaball-playground

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

Présentation de produit

27 / 39 - Paris Web 2012

Car visualizer

http://carvisualizer.plus360degrees.com/threejs/

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

Jeux vidéos

28 / 39 - Paris Web 2012

HexGL

http://hexgl.bkcore.com/

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

Enseignement

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

Surface Explorer

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

Enseignement

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

PlanetoWeb

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

Visualisation de données

31 / 39 - Paris Web 2012http://workshop.chromeexperiments.com/cloudglobe/

Cloud Globe

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

Visualisation de données

32 / 39 - Paris Web 2012http://www.senchalabs.org/philogl/PhiloGL/examples/temperatureAnomalies/

World temperature changes from 1880 to 2011

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

Visualisations de données

33 / 39 - Paris Web 2012http://workshop.chromeexperiments.com/projects/armsglobe/

Small Arms and Ammunition – Import / Export

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

Clip vidéo

34 / 39 - Paris Web 2012

RO.ME – 3 Dreams of Black

http://www.ro.me

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

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

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

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 !

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

Merci !

37 / 39 - Paris Web 2012

[email protected]

@KoleGramyst

@boxesinabox

boxesinabox.net

http://creativecommons.org/licenses/by-nc-sa/3.0/fr/

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

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

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

39 / 39 - Paris Web 2012

#sharethelove