webgl la 3d cest maintenant-stephaneverdier

8/13/2019 WebGL La 3D Cest Maintenant-StephaneVerdier

1/39

WebGLla 3D, c'est maintenantdans votre navigateur

Stphane Verdier - Paris Web 2012


2/39

Il y a quelques annes...

DHTL

Di!!icile

Long

"eu #er!ormant

$ % 3& "aris Web $()$http://www.uselesspickles.com/triangles/


3/39

"lugins...

*las+ % ava

"ro#ritaire

-L/3D

-rai 3D

Tem#s rel

Gourmand en

#rocesseur et mmoire 3 % 3& "aris Web $()$


4/39

*las+ 1

oteurs de rendu 2

4andy 56ay 3D *lare 3D

4o#+ie 3D...

7 % 3& "aris Web $()$


5/39

8 % 3& "aris Web $()$

ais 9a, c'tait avant...


6/39

5u:ourd'+ui

; % 3& "aris Web $()$

5"I :avascri#t bas sur


7/39

WebGL 2 #rrequis

> % 3& "aris Web $()$

Carte grahique 3DOpenGL

PilotesOpenGLrcents

Navigateur moderne

dernire version


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


9/39

BCem#le

& % 3& "aris Web $()$

BvB


10/39

D#loiement de WebGL

)( % 3& "aris Web $()$

;8 des utilisateurs ont WebGL activ

webglstats.com


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 ?


12/39

)$ % 3& "aris Web $()$

Fne image 3D, 9a !onctionne comment A


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


14/39


)7 % 3& "aris Web $()$

J de #oints K J #rcis


15/39


)8 % 3& "aris Web $()$

"nsistan#e et apparen#e raliste des md$les, a%ut de

matriauCu s+aders


16/39


); % 3& "aris Web $()$

"mme dans la ralit, pur &ir la s#$ne il 'aut

de la lumire!!!


17/39


)> % 3& "aris Web $()$

( et au mins une camra&irtuelle


18/39

5!!ic+age !inal

)@ % 3& "aris Web $()$

)u vectorielaux #iCels> la rasteriation*u convertirun md$le3D en $D


19/39

)& % 3& "aris Web $()$

Gnrer du code #our WebGL...


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;


21/39

Gnrer du code #our WebGL

$) % 3& "aris Web $()$

.dlisatin / laide, de logiciels auteurs

Autodesk3D Studio Max

AutodeskMaya Sketchup


22/39

$$ % 3& "aris Web $()$

WebGL en action 1


23/39

Dmonstrations tec+nologiques

$3 % 3& "aris Web $()$

TeCte #rocdural

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


24/39


$7 % 3& "aris Web $()$

Gnration et grou#age de cubes

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


25/39


$8 % 3& "aris Web $()$

WebGL Water

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


26/39


$; % 3& "aris Web $()$


27/39

"rsentation de #roduit

$> % 3& "aris Web $()$

ar visualier

http://carvisualizer.plus!"degrees.com/threejs/


28/39

euC vidos

$@ % 3& "aris Web $()$

HeCGL

http://hexgl.bkcore.com/


29/39

Bnseignement

$& % 3& "aris Web $()$http://www.senchalabs.org/philogl/#hilo$%/examples/explorer/

4ur!ace BC#lorer


30/39

Bnseignement

3( % 3& "aris Web $()$http://planetoweb.net/app/planet&iew.html

"lanetoWeb


31/39

-isualisation de donnes

3) % 3& "aris Web $()$http://workshop.chromeexperiments.com/cloudglobe/

loud Globe


32/39

-isualisation de donnes

3$ % 3& "aris Web $()$http://www.senchalabs.org/philogl/#hilo$%/examples/temperatureAnomalies/

World tem#erature c+anges !rom )@@( to $())


33/39

-isualisations de donnes

33 % 3& "aris Web $()$http://workshop.chromeexperiments.com/projects/armsglobe/

4mall 5rms and 5mmunition N Im#ort % BC#ort


34/39

li# vido

37 % 3& "aris Web $()$


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


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


37/39

erci 1

3> % 3& "aris Web $()$

ste#+anePboCesinaboC.net

PQoleGramyst

PboCesinaboCboCesinaboC.net

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

di


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


39/39

3& % 3& "aris Web $()$

s+aret+elove

webgl la 3d cest maintenant-stephaneverdier

Documents