Introduction

WebGLWebGL

Vincent GarreauH3 P2015 15/01/2013

Sémantique

Offline & Stockage

Accès device

Connectivité

Audio / Vidéo

Performance

Présentation

3D / Graphisme

3D / Graphisme3D / Graphisme

CSS3 SVG Canvas WebGL

WebGLWebGL

API permettant de créer des environnements 3D

dans un navigateur web

API permettant de créer des environnements 3D

dans un navigateur web

Créé par

Web Graphics LibraryWeb Graphics Library

WebGLWebGL

Comment ça fonctionne ?Comment ça fonctionne ?

Javascriptnatif

Javascriptnatif

InteractionsInteractions

Un peu comme ça...Un peu comme ça...

Javascript

Dans une balise <canvas>WebGLRenderingContext

WebGLWebGL OpenGLOpenGL Rendu 3DRendu 3D

CompatibilitéCompatibilité

Chrome 8.0+ Safari 5.1+ Firefox 4.0+ Opera 12.0+

DesktopPremières implémentations fin 2009

IE

IEWebGLChrome Frame

...

Tablette / MobilePremières implémentations fin 2011

SafariiOS

(Dev iAd.)

ChromeiOS / And.(Dev iAd.)

OperaMini

AndroidBrowser

FirefoxAndroid

BlackberryBrowser

(PlayBook)

OperaMobile

CompatibilitéCompatibilité

Comment on fait ça ?Comment on fait ça ?

Coder en WebGL natif

Utiliser une librairie

ou

Coder en WebGL natif

Utiliser une librairie

ou

Différentes librairiesDifférentes librairies

CooperLichtCooperLicht

SceneJSSceneJS

GLGEGLGE

Three.jsThree.js

SpiderGLSpiderGL

C3DLC3DL

Différentes librairiesDifférentes librairies

Three.jsThree.js

Three.jsThree.js

Ricardo CabelloRicardo Cabello

Mr.doobMr.doob

Three.jsThree.js

LégerLéger

Facile d’utilisationFacile d’utilisation

Rendus WebGL, SVG et CanvasRendus WebGL, SVG et Canvas

Création d’une scène 3Davec Three.js

Création d’une scène 3Davec Three.js

1 ScèneScène

2 CaméraCaméra

3 ObjetsObjets

4 LumièreLumière5 RenduRenduRendu

1 ScèneScène

2 CaméraCaméra

5 RenduRendu

Objets3

4 Lumière

Scène1 Caméra2 Objets3 Lumière4 Rendu5

// Création d’une scènevar scene = new THREE.Scene();

ScèneScène1

1 ScèneScène

2 CaméraCaméra

5 RenduRendu

Objets3

4 Lumière

Scène1 Caméra2 Objets3 Lumière4 Rendu5

// Création d’une caméravar camera = new THREE.PerspectiveCamera(

75, // Angle de vue en degréswindow.innerWidth/window.innerHeight, // Vue ratio 0.1, // Distance minimale (axe Z)1000 // Distance maximale (axe Z)

);

// Position de la caméra sur l’axe Zcamera.position.z = 5;

CaméraCaméra2

1 ScèneScène

2 CaméraCaméra

5 RenduRendu

3

4 Lumière

ObjetsObjets

Scène1 Caméra2 Objets3 Lumière4 Rendu5

// Création d’une forme géométrique (ici un carré)var cubeGeometry = new THREE.CubeGeometry(1,1,1), cubeMaterial = new THREE.MeshLambertMaterial({

color: 0xFF0000 }); var cube = new THREE.Mesh(cubeGeometry,cubeMaterial);

// Rotation du cube (X, Y, Z)cube.rotation.set(100,100,0);

// On ajoute le cube à notre scènescene.add(cube);

ObjetsObjets3

Scène1 Caméra2 Objets3 Lumière4 Rendu5

// Importer un modèle SketchUp (Collada, .dae)

new THREE.ColladaLoader().load('models/piano.dae', function(model){

var piano = model.scene;piano.scale.set(0.1, 0.1, 0.1);piano.position.set(-10, -15, 0);piano.rotation.set(Math.PI/8, Math.PI/4, 0); scene.add(piano);

});

ObjetsObjets3

Scène1 Caméra2 Objets3 Lumière4 Rendu5

// Importer un modèle .obj converti en .js

new THREE.JSONLoader().load('models/A380.js', function(planeGeometry, material){

var planeMaterial = new THREE.MeshFaceMaterial(material

); var plane = new THREE.Mesh(

planeGeometry, planeMaterial );

scene.add(plane);

}, 'models/A380');

ObjetsObjets3

1 ScèneScène

2 CaméraCaméra

5 RenduRendu

3 ObjetsObjets

4 LumièreLumière

Scène1 Caméra2 Objets3 Lumière4 Rendu5

// Création d’une lumière

var directionalLight = new THREE.DirectionalLight(0xFFFFFF, // Couleur1 // Intensité

);

directionalLight.position.set(-5, 1, 10);

scene.add(directionalLight);

LumièreLumière4

1 ScèneScène

2 CaméraCaméra

3

4

ObjetsObjets

LumièreLumière5 RenduRenduRendu

Scène1 Caméra2 Objets3 Lumière4 Rendu5

var renderer = new THREE.WebGLRenderer();

// Taille du rendurenderer.setSize(window.innerWidth, window.innerHeight);// On intègre le rendu dans la pagedocument.body.appendChild(renderer.domElement);

function render(){requestAnimationFrame(render); // Rafraîchissementrenderer.render(scene, camera); // Rendu

}

render(); // On lance le rendu

RenduRendu5

Bien d’autres méthodesexistent...

Création d’ombres, différents types de lumières, de matières et de caméras, géométries et textures dynamiques...

mrdoob.github.com/three.js/docs

Bien d’autres méthodesexistent...

Création d’ombres, différents types de lumières, de matières et de caméras, géométries et textures dynamiques...

mrdoob.github.com/three.js/docs

RessourcesRessourcesDébuter avec Three.jshttp://www.aerotwist.com/tutorials/getting-started-with-three-js/

En vrac

http://mrdoob.github.com/three.js/

http://www.grafikart.fr/tutoriels/javascript/three-js-3d-289

http://fr.tuto.com/javascript/webgl-les-lumieres-javascript,34630.html

http://dev.opera.com/articles/view/an-introduction-to-webgl/

https://developer.mozilla.org/fr/docs/WebGL/Commencer_avec_WebGL

http://learningthreejs.com/

http://learningwebgl.com/blog/?page_id=1217

http://www.html5rocks.com/http://alteredqualia.com/

https://sketchfab.com/http://www.khronos.org/registry/webgl/specs/latest/

http://www.chromeexperiments.com/

https://github.com/mrdoob/three.js/archive/master.zip (dossier examples)

Une forte valeur ajoutée « expérience utilisateur »Une forte valeur ajoutée « expérience utilisateur »

En conclusion, le WebGL c’est...En conclusion, le WebGL c’est...

Pas si difficile que ça, notamment avec Three.js (des notions en 3D est un plus)Pas si difficile que ça, notamment avec Three.js (des notions en 3D est un plus)

Une technologie qui tend à se démocratiser (mobile, e-commerce...)

Une technologie qui tend à se démocratiser (mobile, e-commerce...)

Merci !Merci !

Des questions ?Des questions ?

vincentgarreau.com/webgl.zipSlides + Démos

vincentgarreau.com/webgl.zipSlides + Démos