• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
WebGL, la 3D c'est maintenant dans votre navigateur - Paris Web 2012
 

WebGL, la 3D c'est maintenant dans votre navigateur - Paris Web 2012

on

  • 639 views

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

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

Statistics

Views

Total Views
639
Views on SlideShare
639
Embed Views
0

Actions

Likes
0
Downloads
9
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution-NonCommercial-ShareAlike LicenseCC Attribution-NonCommercial-ShareAlike LicenseCC Attribution-NonCommercial-ShareAlike License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    WebGL, la 3D c'est maintenant dans votre navigateur - Paris Web 2012 WebGL, la 3D c'est maintenant dans votre navigateur - Paris Web 2012 Presentation Transcript

    • WebGLla 3D, cest maintenant dans votre navigateur Stéphane Verdier - Paris Web 2012
    • Il y a quelques années... DHTML Difficile Long Peu performanthttp://www.uselesspickles.com/triangles/ 2 / 39 - Paris Web 2012
    • Plugins... Flash / Java Propriétaire VRML-X3D Vrai 3D Temps réel Gourmand enprocesseur et mémoire 3 / 39 - Paris Web 2012
    • Flash !Moteurs de rendu : > Sandy > Away 3D > Flare 3D > Sophie 3D ... 4 / 39 - Paris Web 2012
    • Mais ça, cétait avant... 5 / 39 - Paris Web 2012
    • Aujourdhui<canvas> API javascript basé sur OpenGL 6 / 39 - Paris Web 2012
    • WebGL : pré-requisCarte grahique 3D Pilotes Navigateur moderne OpenGL OpenGL dernière version récents 7 / 39 - Paris Web 2012
    • Fallback... WebGL ne sactive pas ? Javascript > Injection HTMLMessage derreurAffichage dune imageExemple : EvE Onlinehttp://www.eveonline.com/universe/spaceships/ 8 / 39 - Paris Web 2012
    • Exemple EvE Onlinehttp://www.eveonline.com/universe/spaceships/ 9 / 39 - Paris Web 2012
    • Déploiement de WebGL65 % des utilisateurs ont WebGL activé webglstats.com 10 / 39 - Paris Web 2012
    • 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
    • Une image 3D, ça fonctionne comment ? 12 / 39 - Paris Web 2012
    • Construire une image 3DCest un modèle mathématique vectoriel qui définit : une scène, des vertex ou points, des arêtes, ... 13 / 39 - Paris Web 2012
    • Construire une image 3D + de points = + précis 14 / 39 - Paris Web 2012
    • Construire une image 3DConsistance et apparence réaliste des modèles, ajout de matériaux ou shaders 15 / 39 - Paris Web 2012
    • Construire une image 3DComme dans la réalité, pour voir la scène il faut de la lumière... 16 / 39 - Paris Web 2012
    • Construire une image 3D … et au moins une caméra virtuelle 17 / 39 - Paris Web 2012
    • Affichage finalDu vectoriel aux pixels > la rasterization Ou convertir un modèle 3D en 2D 18 / 39 - Paris Web 2012
    • Générer du code pour WebGL... 19 / 39 - Paris Web 2012
    • Générer du code pour WebGL Long – Complexe – Fastidieux A laide, 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
    • Générer du code pour WebGL Modélisation à laide, de logiciels auteurs Autodesk Autodesk3D Studio Max Maya Sketchup 21 / 39 - Paris Web 2012
    • WebGL en action ! 22 / 39 - Paris Web 2012
    • Démonstrations technologiques Texte procéduralhttp://mrdoob.github.com/three.js/examples/webgl_geometry_text.html 23 / 39 - Paris Web 2012
    • Démonstrations technologiques Génération et groupage de cubeshttp://learningthreejs.com/data/performance-merging-geometry/ 24 / 39 - Paris Web 2012
    • Démonstrations technologiques WebGL Waterhttp://madebyevan.com/webgl-water/ 25 / 39 - Paris Web 2012
    • Démonstrations technologiques RO.ME - MataBalls Playgroundhttp://www.ro.me/tech/metaball-playground 26 / 39 - Paris Web 2012
    • Présentation de produit Car visualizerhttp://carvisualizer.plus360degrees.com/threejs/ 27 / 39 - Paris Web 2012
    • Jeux vidéos HexGLhttp://hexgl.bkcore.com/ 28 / 39 - Paris Web 2012
    • Enseignement Surface Explorerhttp://www.senchalabs.org/philogl/PhiloGL/examples/explorer/ 29 / 39 - Paris Web 2012
    • Enseignement PlanetoWebhttp://planetoweb.net/app/planetView.html 30 / 39 - Paris Web 2012
    • Visualisation de données Cloud Globehttp://workshop.chromeexperiments.com/cloudglobe/ 31 / 39 - Paris Web 2012
    • Visualisation de données World temperature changes from 1880 to 2011http://www.senchalabs.org/philogl/PhiloGL/examples/temperatureAnomalies/ 32 / 39 - Paris Web 2012
    • Visualisations de données Small Arms and Ammunition – Import / Exporthttp://workshop.chromeexperiments.com/projects/armsglobe/ 33 / 39 - Paris Web 2012
    • Clip vidéo RO.ME – 3 Dreams of Blackhttp://www.ro.me 34 / 39 - Paris Web 2012
    • Un standard pour la 3D de demain Technologie jeune mais très attendue Dotée dun très fort potentiel WebGL libère des plugins propriétaires De nouvelles applications web plus richesDéjà, le jeu vidéo sest emparé naturellement de cette technologie 35 / 39 - Paris Web 2012
    • Une nouvelle voie souvre... Un vrai standard ouvert pour la 3D dans le navigateur Maintenant,à vous dinventer le futur qui va avec ! 36 / 39 - Paris Web 2012
    • Merci ! stephane@boxesinabox.net @KoleGramyst @boxesinabox boxesinabox.nethttp://creativecommons.org/licenses/by-nc-sa/3.0/fr/ 37 / 39 - Paris Web 2012
    • CréditsIllustrations & PhotosAlteredqualia - http://alteredqualia.com/three/examples/webgl_terrain_dynamic.htmlNasa-JPL3D 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.orgLights by rocketsareneat on flickr.com Creative CommonsCamera video by av hire london on flickr.com Creative Commons06152012 Canon 60D high ISO test/Milky Way by StormLoverSwin93http://www.flickr.com/photos/eastcentralillinoiswxphotography93/7395713712/ 38 / 39 - Paris Web 2012
    • #sharethelove 39 / 39 - Paris Web 2012