Post on 04-Jun-2018
8/13/2019 WebGL La 3D Cest Maintenant-StephaneVerdier
1/39
WebGLla 3D, c'est maintenantdans votre navigateur
Stphane Verdier - Paris Web 2012
8/13/2019 WebGL La 3D Cest Maintenant-StephaneVerdier
2/39
Il y a quelques annes...
DHTL
Di!!icile
Long
"eu #er!ormant
$ % 3& "aris Web $()$http://www.uselesspickles.com/triangles/
8/13/2019 WebGL La 3D Cest Maintenant-StephaneVerdier
3/39
"lugins...
*las+ % ava
"ro#ritaire
-L/3D
-rai 3D
Tem#s rel
Gourmand en
#rocesseur et mmoire 3 % 3& "aris Web $()$
8/13/2019 WebGL La 3D Cest Maintenant-StephaneVerdier
4/39
*las+ 1
oteurs de rendu 2
4andy 56ay 3D *lare 3D
4o#+ie 3D...
7 % 3& "aris Web $()$
8/13/2019 WebGL La 3D Cest Maintenant-StephaneVerdier
5/39
8 % 3& "aris Web $()$
ais 9a, c'tait avant...
8/13/2019 WebGL La 3D Cest Maintenant-StephaneVerdier
6/39
5u:ourd'+ui
; % 3& "aris Web $()$
5"I :avascri#t bas sur
8/13/2019 WebGL La 3D Cest Maintenant-StephaneVerdier
7/39
WebGL 2 #rrequis
> % 3& "aris Web $()$
Carte grahique 3DOpenGL
PilotesOpenGLrcents
Navigateur moderne
dernire version
8/13/2019 WebGL La 3D Cest Maintenant-StephaneVerdier
8/39
*allbac?...
@ % 3& "aris Web $()$
WebGL ne s'active #as A
avascri#t In:ection HTL
essage d'erreur
5!!ic+age d'une image
Exemple :BvB
8/13/2019 WebGL La 3D Cest Maintenant-StephaneVerdier
9/39
BCem#le
& % 3& "aris Web $()$
BvB
8/13/2019 WebGL La 3D Cest Maintenant-StephaneVerdier
10/39
D#loiement de WebGL
)( % 3& "aris Web $()$
;8 des utilisateurs ont WebGL activ
webglstats.com
8/13/2019 WebGL La 3D Cest Maintenant-StephaneVerdier
11/39
W+en can I use WebGL AE
)) % 3& "aris Web $()$
AAAAIm#lmentation de WebGL
"rise en c+arge des navigateurs
caniuse.com%6ebgl
6ebglstats.com
AAAAInternet BC#lorer> Plugin > IBWebGL
*Quand est-ce que je peux utiliser WebGL ?
8/13/2019 WebGL La 3D Cest Maintenant-StephaneVerdier
12/39
)$ % 3& "aris Web $()$
Fne image 3D, 9a !onctionne comment A
8/13/2019 WebGL La 3D Cest Maintenant-StephaneVerdier
13/39
onstruire une image 3D
)3 % 3& "aris Web $()$
'est un modle mat+matique vectoriel qui d!init 2
une scne, des verteCu #oints, des artes, !!!
8/13/2019 WebGL La 3D Cest Maintenant-StephaneVerdier
14/39
onstruire une image 3D
)7 % 3& "aris Web $()$
J de #oints K J #rcis
8/13/2019 WebGL La 3D Cest Maintenant-StephaneVerdier
15/39
onstruire une image 3D
)8 % 3& "aris Web $()$
"nsistan#e et apparen#e raliste des md$les, a%ut de
matriauCu s+aders
8/13/2019 WebGL La 3D Cest Maintenant-StephaneVerdier
16/39
onstruire une image 3D
); % 3& "aris Web $()$
"mme dans la ralit, pur &ir la s#$ne il 'aut
de la lumire!!!
8/13/2019 WebGL La 3D Cest Maintenant-StephaneVerdier
17/39
onstruire une image 3D
)> % 3& "aris Web $()$
( et au mins une camra&irtuelle
8/13/2019 WebGL La 3D Cest Maintenant-StephaneVerdier
18/39
5!!ic+age !inal
)@ % 3& "aris Web $()$
)u vectorielaux #iCels> la rasteriation*u convertirun md$le3D en $D
8/13/2019 WebGL La 3D Cest Maintenant-StephaneVerdier
19/39
)& % 3& "aris Web $()$
Gnrer du code #our WebGL...
8/13/2019 WebGL La 3D Cest Maintenant-StephaneVerdier
20/39
Gnrer du code #our WebGL
$( % 3& "aris Web $()$
Long+ om#leCe+ *astidieuC laide, des bibliot+ques ava4cri#t
T+ree.:s
"+iloGL
GLGB
G3D
...
var gl;var gl;
function initGL(canvas) {function initGL(canvas) {
try {try { gl = canvas.getontext("experi!ental#e$gl");gl = canvas.getontext("experi!ental#e$gl");
gl.vie#port%i&t' = canvas.#i&t';gl.vie#port%i&t' = canvas.#i&t';
gl.vie#porteig't = canvas.'eig't;gl.vie#porteig't = canvas.'eig't;
catc' (e) { catc' (e) {
if (*gl) {if (*gl) {
alert("oul& not initialise %e$GL+ sorry ,(");alert("oul& not initialise %e$GL+ sorry ,(");
function get-'a&er(gl+ i&) {function get-'a&er(gl+ i&) {
var s'a&er-cript = &ocu!ent.getle!enty0&(i&);var s'a&er-cript = &ocu!ent.getle!enty0&(i&);
if (*s'a&er-cript) {if (*s'a&er-cript) {
return null;return null;
8/13/2019 WebGL La 3D Cest Maintenant-StephaneVerdier
21/39
Gnrer du code #our WebGL
$) % 3& "aris Web $()$
.dlisatin / laide, de logiciels auteurs
Autodesk3D Studio Max
AutodeskMaya Sketchup
8/13/2019 WebGL La 3D Cest Maintenant-StephaneVerdier
22/39
$$ % 3& "aris Web $()$
WebGL en action 1
8/13/2019 WebGL La 3D Cest Maintenant-StephaneVerdier
23/39
Dmonstrations tec+nologiques
$3 % 3& "aris Web $()$
TeCte #rocdural
http://mrdoob.github.com/three.js/examples/webgl_geometry_text.html
8/13/2019 WebGL La 3D Cest Maintenant-StephaneVerdier
24/39
Dmonstrations tec+nologiques
$7 % 3& "aris Web $()$
Gnration et grou#age de cubes
http://learningthreejs.com/data/performance-merging-geometry/
8/13/2019 WebGL La 3D Cest Maintenant-StephaneVerdier
25/39
Dmonstrations tec+nologiques
$8 % 3& "aris Web $()$
WebGL Water
http://madebyevan.com/webgl-water/
8/13/2019 WebGL La 3D Cest Maintenant-StephaneVerdier
26/39
Dmonstrations tec+nologiques
$; % 3& "aris Web $()$
8/13/2019 WebGL La 3D Cest Maintenant-StephaneVerdier
27/39
"rsentation de #roduit
$> % 3& "aris Web $()$
ar visualier
http://carvisualizer.plus!"degrees.com/threejs/
8/13/2019 WebGL La 3D Cest Maintenant-StephaneVerdier
28/39
euC vidos
$@ % 3& "aris Web $()$
HeCGL
http://hexgl.bkcore.com/
8/13/2019 WebGL La 3D Cest Maintenant-StephaneVerdier
29/39
Bnseignement
$& % 3& "aris Web $()$http://www.senchalabs.org/philogl/#hilo$%/examples/explorer/
4ur!ace BC#lorer
8/13/2019 WebGL La 3D Cest Maintenant-StephaneVerdier
30/39
Bnseignement
3( % 3& "aris Web $()$http://planetoweb.net/app/planet&iew.html
"lanetoWeb
8/13/2019 WebGL La 3D Cest Maintenant-StephaneVerdier
31/39
-isualisation de donnes
3) % 3& "aris Web $()$http://workshop.chromeexperiments.com/cloudglobe/
loud Globe
8/13/2019 WebGL La 3D Cest Maintenant-StephaneVerdier
32/39
-isualisation de donnes
3$ % 3& "aris Web $()$http://www.senchalabs.org/philogl/#hilo$%/examples/temperatureAnomalies/
World tem#erature c+anges !rom )@@( to $())
8/13/2019 WebGL La 3D Cest Maintenant-StephaneVerdier
33/39
-isualisations de donnes
33 % 3& "aris Web $()$http://workshop.chromeexperiments.com/projects/armsglobe/
4mall 5rms and 5mmunition N Im#ort % BC#ort
8/13/2019 WebGL La 3D Cest Maintenant-StephaneVerdier
34/39
li# vido
37 % 3& "aris Web $()$
8/13/2019 WebGL La 3D Cest Maintenant-StephaneVerdier
35/39
Fn standard #our la 3D de demain
38 % 3& "aris Web $()$
Tec+nologie :eunemais tr$s attendue
)te dun trs !ort #otentiel
WebGL libre des #lugins #ro#ritaires
De nouvelles a##lications 6eb #lus ric+es
D:O, le :eu vidos'est em#ar naturellement de cette tec+nologie
8/13/2019 WebGL La 3D Cest Maintenant-StephaneVerdier
36/39
Fne nouvelle voie s'ouvre...
3; % 3& "aris Web $()$
Fnvrai standardouvert#our la 3Ddans le navigateur
aintenant,O vous d'inventer le !utur qui va avec 1
i 1
8/13/2019 WebGL La 3D Cest Maintenant-StephaneVerdier
37/39
erci 1
3> % 3& "aris Web $()$
ste#+anePboCesinaboC.net
PQoleGramyst
PboCesinaboCboCesinaboC.net
http://creativecommons.org/licenses/by-nc-sa/."/fr/
di
8/13/2019 WebGL La 3D Cest Maintenant-StephaneVerdier
38/39
rdits
5lteredqualia - http:alteredualia!#mthreeexamplesebgl3terrain3d4nami#!html
Rasa"L
3D 4tar by e!! Lau- http:!uselesspi#5les!#mtriangles
oad unner vs. T+e *las+6789;< - http:!'li#5r!#mphts%dhan##579=97=8;7
W9" g ?@. ; - http:!9!rghtmllg
Q+ronos logo S
8/13/2019 WebGL La 3D Cest Maintenant-StephaneVerdier
39/39
3& % 3& "aris Web $()$
s+aret+elove