Introduction à WebGL - fil.univ-lille1.fraubert/rvi/rvi_coursWebgl01.pdf · Introduction à WebGL...

37
Introduction à WebGL Réalité Virtuelle et Interaction Fabrice Aubert [email protected] Master 2 Informatique - Parcours IVI 2015-2016 F. Aubert (MS2) RVI/ introduction à webgl 2015-2016 1 / 37

Transcript of Introduction à WebGL - fil.univ-lille1.fraubert/rvi/rvi_coursWebgl01.pdf · Introduction à WebGL...

Page 1: Introduction à WebGL - fil.univ-lille1.fraubert/rvi/rvi_coursWebgl01.pdf · Introduction à WebGL Réalité Virtuelle et Interaction Fabrice Aubert fabrice.aubert@univ-lille1.fr

Introduction à WebGLRéalité Virtuelle et Interaction

Fabrice [email protected]

Master 2 Informatique - Parcours IVI

2015-2016

F. Aubert (MS2) RVI/ introduction à webgl 2015-2016 1 / 37

Page 2: Introduction à WebGL - fil.univ-lille1.fraubert/rvi/rvi_coursWebgl01.pdf · Introduction à WebGL Réalité Virtuelle et Interaction Fabrice Aubert fabrice.aubert@univ-lille1.fr

Objectif

film : "un repas de famille suite au décès du grand-père" / extraitTournage : Caméra 360 - EDM / lieu : plateau du Fresnoy, Studio national des arts contemporains.Atelier de recherche 2e cycle Art mis en place par Christl Lidl en collaboration avec Stéphane Dwernicki et Patrick Beaucé de l’option Design ; Etudiants : Rémi Casiez, FabienFoulon, Laurène Marcant, Chloé Petitjean, Honorine Poisson, Saito Mitsuaki, Aleksi Fermon.

http://ecoledesbeauxarts.valenciennes.fr

F. Aubert (MS2) RVI/ introduction à webgl 2015-2016 2 / 37

Page 3: Introduction à WebGL - fil.univ-lille1.fraubert/rvi/rvi_coursWebgl01.pdf · Introduction à WebGL Réalité Virtuelle et Interaction Fabrice Aubert fabrice.aubert@univ-lille1.fr

Principe

I Le film est prêt à être plaqué "naturellement" sur une sphère (projection sphérique)

I Il suffit de créer une sphère texturée

I et placer le point de vue à l’intérieur de la sphère, en son centre.

F. Aubert (MS2) RVI/ introduction à webgl 2015-2016 3 / 37

Page 4: Introduction à WebGL - fil.univ-lille1.fraubert/rvi/rvi_coursWebgl01.pdf · Introduction à WebGL Réalité Virtuelle et Interaction Fabrice Aubert fabrice.aubert@univ-lille1.fr

La sphère

I Décomposer en méridiens (angle θ sur 360 degrés)/parallèles(angle φ sur 180 degrés).

I Chaque sommet P calculé par :

P =

x = cos(θ)sin(φ)y = cos(φ)z = sin(θ)sin(φ)

avecθ ∈ [0,2π]φ ∈ [0,π]

I Coordonnées de texture en P : {s = θ

t = φ

π

F. Aubert (MS2) RVI/ introduction à webgl 2015-2016 4 / 37

Page 5: Introduction à WebGL - fil.univ-lille1.fraubert/rvi/rvi_coursWebgl01.pdf · Introduction à WebGL Réalité Virtuelle et Interaction Fabrice Aubert fabrice.aubert@univ-lille1.fr

Introduction à WebGL

I Version courante : WebGL 1.0 (WebGL 2.0 toujours en cours de spec au 09/2015).

I WebGL = "OpenGL pour le web" (sans plugin, directement intégré dans le navigateur)

I WebGL = Jeu d’instructions JavaScript (interprété par le navigateur client).

I Spécification basée sur openGL ES 2.0 (WebGL 2.0⇒ openGL ES 3.0).

I WebGL s’adresse à la balise <canvas> de HTML5 (contexte d’affichage).

I Intégré dans Firefox, Chrome, Opera (2010) et Safari (sept 2011).

I Internet Explorer : à partir de la version 11.

F. Aubert (MS2) RVI/ introduction à webgl 2015-2016 5 / 37

Page 6: Introduction à WebGL - fil.univ-lille1.fraubert/rvi/rvi_coursWebgl01.pdf · Introduction à WebGL Réalité Virtuelle et Interaction Fabrice Aubert fabrice.aubert@univ-lille1.fr

Quelques liens

I Site officiel :

• http://www.khronos.org/webgl/

I Tutorial (parmi d’autres !) :

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

I Informations générales (très complet) :

• https://developer.mozilla.org/en/WebGL

I Démos (parmi d’autres...) :

• http://www.chromeexperiments.com/webgl

F. Aubert (MS2) RVI/ introduction à webgl 2015-2016 6 / 37

Page 7: Introduction à WebGL - fil.univ-lille1.fraubert/rvi/rvi_coursWebgl01.pdf · Introduction à WebGL Réalité Virtuelle et Interaction Fabrice Aubert fabrice.aubert@univ-lille1.fr

1 Mise en place

F. Aubert (MS2) RVI/ introduction à webgl 2015-2016 7 / 37

Page 8: Introduction à WebGL - fil.univ-lille1.fraubert/rvi/rvi_coursWebgl01.pdf · Introduction à WebGL Réalité Virtuelle et Interaction Fabrice Aubert fabrice.aubert@univ-lille1.fr

Canvas HTML5

<!DOCTYPE html ><html >

<head><meta charset= "UTF−8" / >< t i t l e >RVI WebGL</ t i t l e >< s c r i p t type=" t e x t / j a v a s c r i p t " s rc= " main . j s " ></ s c r i p t >

</head>

<body><canvas i d =" webglCanvas " width=" 512 " he igh t= " 512 "></ canvas>

</body>

</ html >

F. Aubert (MS2) RVI/ introduction à webgl 2015-2016 8 / 37

Page 9: Introduction à WebGL - fil.univ-lille1.fraubert/rvi/rvi_coursWebgl01.pdf · Introduction à WebGL Réalité Virtuelle et Interaction Fabrice Aubert fabrice.aubert@univ-lille1.fr

Initialisation du contexte WebGL (2/2)

I coté javascript (i.e. fichier main.js) :

window . addEventL is tener ( ’ load ’ , main , fa lse ) ;

var g l ; / / w i l l con ta in the webgl con tex t

/∗∗ ∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗ ∗//∗∗ i n i t i a l i z e the g l con tex t from the canvas + basic d e f a u l t g l s e t t i n g s∗/

f u n c t i o n i n i t G L ( ) {canvas=document . getElementById ( " webglCanvas " ) ;g l =canvas . getContext ( " webgl " ) ;i f ( ! g l ) {

a l e r t ( " cant i n i t i a l i z e webgl con tex t " ) ;}else {

console . log ( g l . getParameter ( g l .VERSION) + " | "+ g l . getParameter ( g l .VENDOR) + " | " +g l . getParameter ( g l .RENDERER) + " | "+ g l . getParameter ( g l .SHADING_LANGUAGE_VERSION )

) ;

g l . c l ea rCo lo r ( 0 , 0 , 0 , 1 ) ;g l . c learDepth ( 1 . 0 ) ;g l . enable ( g l .DEPTH_TEST ) ;

g l . c l ea r ( g l .DEPTH_BUFFER_BIT | g l .COLOR_BUFFER_BIT ) ;}

}

/∗∗ ∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗ ∗/f u n c t i o n main ( ) {

i n i t G L ( ) ;}

⇒ récupération du canvas html5 et création du contexte pargl=canvas.getContext("webgl").⇒ gl. préfixera toutes les instructions webglF. Aubert (MS2) RVI/ introduction à webgl 2015-2016 9 / 37

Page 10: Introduction à WebGL - fil.univ-lille1.fraubert/rvi/rvi_coursWebgl01.pdf · Introduction à WebGL Réalité Virtuelle et Interaction Fabrice Aubert fabrice.aubert@univ-lille1.fr

Boucle d’affichage

/∗∗ ∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗ ∗//∗∗ update data f o r genera l loop ( c a l l e d by loop ( ) )∗∗/

f u n c t i o n updateData ( ) {}

/∗∗ ∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗ ∗//∗∗ draw the scene ( c a l l e d by loop ( ) )∗∗/

f u n c t i o n drawScene ( ) {g l . c l ea r ( g l .DEPTH_BUFFER_BIT | g l .COLOR_BUFFER_BIT ) ;

}

/∗∗ ∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗ ∗//∗∗ main loop : draw , capture event , update scene , and loop again∗∗/

f u n c t i o n loop ( ) {drawScene ( ) ;updateData ( ) ;window . requestAnimationFrame ( loop ) ;

}

F. Aubert (MS2) RVI/ introduction à webgl 2015-2016 10 / 37

Page 11: Introduction à WebGL - fil.univ-lille1.fraubert/rvi/rvi_coursWebgl01.pdf · Introduction à WebGL Réalité Virtuelle et Interaction Fabrice Aubert fabrice.aubert@univ-lille1.fr

WebGL = OpenGL ?

I WebGL 1.0 est basé sur la spécification d’OpenGL ES 2.0 (OpenGL pour les mobiles).

I Principales différences avec OpenGL vu en M3DS et dans le contexte de ce TP :

• pas de VAO ! (obligé d’indiquer les VBO utilisés par les attributs du vertex shader àchaque tracé).

• syntaxe des shaders très légèrement différentes.• ⇒ webgl 2.0 se fait attendre...

I ⇒ librairie très bas niveau.

I Spec : http://www.khronos.org/opengles/sdk/docs/man/

I Pour les projets : nécessité d’avoir une librairie haut niveau.

I Exemple : three.js ( http://threejs.org/ ).

I + éventuellement d’autres librairies pour le web (i.e. Ajax)

I Pour le tp : sans librairie externe.

F. Aubert (MS2) RVI/ introduction à webgl 2015-2016 11 / 37

Page 12: Introduction à WebGL - fil.univ-lille1.fraubert/rvi/rvi_coursWebgl01.pdf · Introduction à WebGL Réalité Virtuelle et Interaction Fabrice Aubert fabrice.aubert@univ-lille1.fr

Objectif TP

I Initialisation des buffers pour la géométrie (une sphère).

I placage de texture (images de la vidéo)

I mise en place des shaders (positionnement + placage texture)

I + interaction souris

F. Aubert (MS2) RVI/ introduction à webgl 2015-2016 12 / 37

Page 13: Introduction à WebGL - fil.univ-lille1.fraubert/rvi/rvi_coursWebgl01.pdf · Introduction à WebGL Réalité Virtuelle et Interaction Fabrice Aubert fabrice.aubert@univ-lille1.fr

2 Shaders

F. Aubert (MS2) RVI/ introduction à webgl 2015-2016 13 / 37

Page 14: Introduction à WebGL - fil.univ-lille1.fraubert/rvi/rvi_coursWebgl01.pdf · Introduction à WebGL Réalité Virtuelle et Interaction Fabrice Aubert fabrice.aubert@univ-lille1.fr

Sources des shaders dans le html

<head><meta charset= "UTF−8" / >< t i t l e >RVI WebGL</ t i t l e >< s c r i p t type=" t e x t / j a v a s c r i p t " s rc= " main . j s " ></ s c r i p t >

<!−− Shaders −−>< s c r i p t i d = " he l lo−f s " type=" x−shader / x−f ragment ">

p r e c i s i o n highp f l o a t ; / / o b l i g a t o i r e pour les f l o a t ( no d e f a u l t )

void main ( void ) {g l_FragColor = vec4 ( 1 . 0 , 0 .0 , 0 .0 , 0 . 0 ) ;

}</ s c r i p t >

< s c r i p t i d = " he l lo−vs " type=" x−shader / x−ver tex ">a t t r i b u t e vec4 ver tex ;

void main ( void ) {g l _ P o s i t i o n = ver tex ;

}</ s c r i p t >

</head>. . .

F. Aubert (MS2) RVI/ introduction à webgl 2015-2016 14 / 37

Page 15: Introduction à WebGL - fil.univ-lille1.fraubert/rvi/rvi_coursWebgl01.pdf · Introduction à WebGL Réalité Virtuelle et Interaction Fabrice Aubert fabrice.aubert@univ-lille1.fr

Lecture du code source+compilation

/∗∗ ∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗ reads shader and compile∗ ∗∗/

f u n c t i o n getShader ( i d ) {var shaderScr ip t = document . getElementById ( i d ) ;var k = shaderScr ip t . f i r s t C h i l d ;var s t r =k . tex tConten t ;var shader ;i f ( shaderScr ip t . type == " x−shader / x−f ragment " ) {

shader = g l . createShader ( g l .FRAGMENT_SHADER) ;}else i f ( shaderScr ip t . type == " x−shader / x−ver tex " ) {

shader = g l . createShader ( g l .VERTEX_SHADER) ;}g l . shaderSource ( shader , s t r ) ;g l . compileShader ( shader ) ;

i f ( ! g l . getShaderParameter ( shader , g l .COMPILE_STATUS) ) {a l e r t ( g l . getShaderInfoLog ( shader ) ) ;return nul l ;

}

return shader ;}

F. Aubert (MS2) RVI/ introduction à webgl 2015-2016 15 / 37

Page 16: Introduction à WebGL - fil.univ-lille1.fraubert/rvi/rvi_coursWebgl01.pdf · Introduction à WebGL Réalité Virtuelle et Interaction Fabrice Aubert fabrice.aubert@univ-lille1.fr

Lecture/creation du program shader

/∗∗ ∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗ ∗//∗∗ create the program shader ( ve r tex+fragment ) : source i n html element∗∗/

f u n c t i o n createProgram ( i d ) {var programShader= g l . createProgram ( ) ;var v e r t =getShader ( i d + "−vs " ) ;var f r ag =getShader ( i d + "−f s " ) ;g l . at tachShader ( programShader , v e r t ) ;g l . at tachShader ( programShader , f r ag ) ;g l . l inkProgram ( programShader ) ;i f ( ! g l . getProgramParameter ( programShader , g l . LINK_STATUS ) ) {

a l e r t ( g l . getProgramInfoLog ( programShader ) ) ;return nul l ;

}return programShader ;

}

⇒ Utilisation = var helloProgramShader=createProgram("hello");.

F. Aubert (MS2) RVI/ introduction à webgl 2015-2016 16 / 37

Page 17: Introduction à WebGL - fil.univ-lille1.fraubert/rvi/rvi_coursWebgl01.pdf · Introduction à WebGL Réalité Virtuelle et Interaction Fabrice Aubert fabrice.aubert@univ-lille1.fr

3 Géométrie et buffers

F. Aubert (MS2) RVI/ introduction à webgl 2015-2016 17 / 37

Page 18: Introduction à WebGL - fil.univ-lille1.fraubert/rvi/rvi_coursWebgl01.pdf · Introduction à WebGL Réalité Virtuelle et Interaction Fabrice Aubert fabrice.aubert@univ-lille1.fr

Obtenir :

F. Aubert (MS2) RVI/ introduction à webgl 2015-2016 18 / 37

Page 19: Introduction à WebGL - fil.univ-lille1.fraubert/rvi/rvi_coursWebgl01.pdf · Introduction à WebGL Réalité Virtuelle et Interaction Fabrice Aubert fabrice.aubert@univ-lille1.fr

Initialisation buffers

Utilisation de l’objet Float32Array (spécification WebGL) :

/∗∗ ∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗ ∗//∗∗ i n i t i a l i z e t r i a n g l e b u f f e r s t h a t w i l l be drawn∗∗/

f u n c t i o n i n i t T r i a n g l e ( ) {var ver tex =[−0.5 ,0.5 ,0.0 ,0.5 ,−0.5 ,0.0 ,−0.7 ,−0.9 ,0.0 , / / f i r s t t r i a n g l e

0 .6 ,0 .3 ,0 .0 ,0 .8 ,−0 .3 ,0 .0 ,0 .5 ,−0 .9 ,0 .0 ] ; / / second t r i a n g l e

var v e r t exBu f f e r = g l . c rea teBu f fe r ( ) ;

g l . b indBu f fe r ( g l .ARRAY_BUFFER, v e r t exB u f f e r ) ;g l . bu f fe rData ( g l .ARRAY_BUFFER,new Float32Array ( ver tex ) , g l .STATIC_DRAW ) ;return ve r t exBu f f e r ;

}

⇒ Utilisation = var triangleVertexBuffer=initTriangle();Remarque : pas de VAO en WebGL 1.0 (cf conséquence sur l’affichage sur le transparent d’après)

F. Aubert (MS2) RVI/ introduction à webgl 2015-2016 19 / 37

Page 20: Introduction à WebGL - fil.univ-lille1.fraubert/rvi/rvi_coursWebgl01.pdf · Introduction à WebGL Réalité Virtuelle et Interaction Fabrice Aubert fabrice.aubert@univ-lille1.fr

Affichage

∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗ ∗//∗∗ draw the scene ( c a l l e d by loop ( ) )∗∗/var t r i a n g l e V e r t e x B u f f e r ;var helloProgramShader ;

f u n c t i o n drawScene ( ) {g l . c l ea r ( g l .DEPTH_BUFFER_BIT | g l .COLOR_BUFFER_BIT ) ;

/ / enable shader + get ver tex l o c a t i o ng l . useProgram ( helloProgramShader ) ;var ve r texLoca t ion= g l . g e t A t t r i b L o c a t i o n ( helloProgramShader , ’ ve r tex ’ ) ;

/ / draw geometryg l . enab leVer texA t t r i bA r ray ( ve r texLoca t ion ) ;

g l . b indBu f fe r ( g l .ARRAY_BUFFER, t r i a n g l e V e r t e x B u f f e r ) ;g l . v e r t e x A t t r i b P o i n t e r ( ver texLocat ion ,3 , g l .FLOAT, g l .FALSE, 0 , 0 ) ;

g l . drawArrays ( g l .TRIANGLES, 0 , 6 ) ;

/ / d i sab le a l lg l . d i s a b l e V e r t e x A t t r i b A r r a y ( ve r texLoca t ion ) ;g l . useProgram ( nul l ) ;

}

F. Aubert (MS2) RVI/ introduction à webgl 2015-2016 20 / 37

Page 21: Introduction à WebGL - fil.univ-lille1.fraubert/rvi/rvi_coursWebgl01.pdf · Introduction à WebGL Réalité Virtuelle et Interaction Fabrice Aubert fabrice.aubert@univ-lille1.fr

4 Texture Vidéo

F. Aubert (MS2) RVI/ introduction à webgl 2015-2016 21 / 37

Page 22: Introduction à WebGL - fil.univ-lille1.fraubert/rvi/rvi_coursWebgl01.pdf · Introduction à WebGL Réalité Virtuelle et Interaction Fabrice Aubert fabrice.aubert@univ-lille1.fr

Obtenir :

fenêtre webgl texture

F. Aubert (MS2) RVI/ introduction à webgl 2015-2016 22 / 37

Page 23: Introduction à WebGL - fil.univ-lille1.fraubert/rvi/rvi_coursWebgl01.pdf · Introduction à WebGL Réalité Virtuelle et Interaction Fabrice Aubert fabrice.aubert@univ-lille1.fr

Placage de texture simple dans shaders

< s c r i p t i d = " he l lo−vs " type=" x−shader / x−ver tex ">a t t r i b u t e vec4 ver tex ;a t t r i b u t e vec2 texCoord ;

vary ing vec2 vTexCoord ;

void main ( void ) {fTexCoord = texCoord ;g l _ P o s i t i o n = ver tex ;

}</ s c r i p t >

< s c r i p t i d = " he l lo−f s " type=" x−shader / x−f ragment ">p r e c i s i o n highp f l o a t ;

va ry ing vec2 fTexCoord ;

uni form sampler2D tex tu re0 ;

void main ( void ) {vec4 co lo r =texture2D ( tex ture0 , fTexCoord ) ;g l_FragColor = co lo r ;

}</ s c r i p t >

F. Aubert (MS2) RVI/ introduction à webgl 2015-2016 23 / 37

Page 24: Introduction à WebGL - fil.univ-lille1.fraubert/rvi/rvi_coursWebgl01.pdf · Introduction à WebGL Réalité Virtuelle et Interaction Fabrice Aubert fabrice.aubert@univ-lille1.fr

Initialisation texture

/∗∗ ∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗ I n i t t e x t u r e from html i d∗ ∗∗/

f u n c t i o n i n i t T e x t u r e ( i d ) {var imageData=document . getElementById ( i d ) ;

t e x t u r e I d = g l . c reateTexture ( ) ;g l . ac t i veTex tu re ( g l .TEXTURE0 ) ;g l . b indTexture ( g l .TEXTURE_2D, t e x t u r e I d ) ;

g l . texParameter i ( g l .TEXTURE_2D, g l . TEXTURE_MIN_FILTER, g l . LINEAR ) ;g l . texParameter i ( g l .TEXTURE_2D, g l .TEXTURE_MAG_FILTER, g l . LINEAR ) ;g l . texParameter i ( g l .TEXTURE_2D, g l .TEXTURE_WRAP_S, g l .CLAMP_TO_EDGE) ;g l . texParameter i ( g l .TEXTURE_2D, g l .TEXTURE_WRAP_T, g l .CLAMP_TO_EDGE) ;

g l . texImage2D ( g l .TEXTURE_2D,0 , g l .RGB, g l .RGB, g l .UNSIGNED_BYTE, imageData ) ;

return t e x t u r e I d ;}

⇒ Attention aux dimensions en puissance de 2 si non clamp to edge !

F. Aubert (MS2) RVI/ introduction à webgl 2015-2016 24 / 37

Page 25: Introduction à WebGL - fil.univ-lille1.fraubert/rvi/rvi_coursWebgl01.pdf · Introduction à WebGL Réalité Virtuelle et Interaction Fabrice Aubert fabrice.aubert@univ-lille1.fr

Affichage

f u n c t i o n drawScene ( ) {g l . c l ea r ( g l .DEPTH_BUFFER_BIT | g l .COLOR_BUFFER_BIT ) ;

g l . useProgram ( helloProgramShader ) ;/ / get l o c a t i o n ( should be done once f o r a l l )var ve r texLoca t ion= g l . g e t A t t r i b L o c a t i o n ( helloProgramShader , ’ ve r tex ’ ) ;var texCoordLocat ion= g l . g e t A t t r i b L o c a t i o n ( helloProgramShader , ’ texCoord ’ ) ;var t ex tu reLoca t i on = g l . getUni formLocat ion ( helloProgramShader , ’ t ex tu re0 ’ ) ;

/ / se t up uni formg l . un i fo rm1 i ( tex tu reLoca t ion , 0 ) ;

/ / draw geometryg l . enab leVer texA t t r i bA r ray ( ve r texLoca t ion ) ;g l . enab leVer texA t t r i bA r ray ( texCoordLocat ion ) ;

g l . b indBu f fe r ( g l .ARRAY_BUFFER, t r i a n g l e V e r t e x B u f f e r ) ;g l . v e r t e x A t t r i b P o i n t e r ( ver texLocat ion ,3 , g l .FLOAT, g l .FALSE, 0 , 0 ) ;

g l . b indBu f fe r ( g l .ARRAY_BUFFER, t r iang leTexCoordBuf fe r ) ;g l . v e r t e x A t t r i b P o i n t e r ( texCoordLocat ion ,2 , g l .FLOAT, g l .FALSE, 0 , 0 ) ;

g l . ac t i veTex tu re ( g l .TEXTURE0 ) ;g l . b indTexture ( g l .TEXTURE_2D, theTexture ) ;

g l . drawArrays ( g l .TRIANGLES, 0 , 6 ) ;

/ / d i sab le a l lg l . d i s a b l e V e r t e x A t t r i b A r r a y ( ve r texLoca t ion ) ;g l . d i s a b l e V e r t e x A t t r i b A r r a y ( texCoordLocat ion ) ;g l . useProgram ( nul l ) ;

}

F. Aubert (MS2) RVI/ introduction à webgl 2015-2016 25 / 37

Page 26: Introduction à WebGL - fil.univ-lille1.fraubert/rvi/rvi_coursWebgl01.pdf · Introduction à WebGL Réalité Virtuelle et Interaction Fabrice Aubert fabrice.aubert@univ-lille1.fr

Vidéo

I balise vidéo HTML5 :

<video i d =" myVideo " src= " repas .webm" autop lay=" t r ue " c o n t r o l s = " t r ue "></ video >

I Récupération de la texture à chaque image :

/∗∗ ∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗ ∗//∗∗ update data ( c a l l e d by loop ( ) )∗∗/

f u n c t i o n updateData ( ) {var imageData=document . getElementById ( " myVideo " ) ;g l . ac t i veTex tu re ( g l .TEXTURE0 ) ;g l . b indTexture ( g l .TEXTURE_2D, theTexture ) ;g l . texImage2D ( g l .TEXTURE_2D,0 , g l .RGB, g l .RGB, g l .UNSIGNED_BYTE, imageData ) ;

}

F. Aubert (MS2) RVI/ introduction à webgl 2015-2016 26 / 37

Page 27: Introduction à WebGL - fil.univ-lille1.fraubert/rvi/rvi_coursWebgl01.pdf · Introduction à WebGL Réalité Virtuelle et Interaction Fabrice Aubert fabrice.aubert@univ-lille1.fr

5 ModelView et Projection

F. Aubert (MS2) RVI/ introduction à webgl 2015-2016 27 / 37

Page 28: Introduction à WebGL - fil.univ-lille1.fraubert/rvi/rvi_coursWebgl01.pdf · Introduction à WebGL Réalité Virtuelle et Interaction Fabrice Aubert fabrice.aubert@univ-lille1.fr

Librairie javascript sur les matrices

f u n c t i o n i n i t D a t a ( ) {. . .

p r o j e c t i o n . setFrustum (−0.1 ,0.1 ,−0.1 ,0.1 ,0 .1 ,1000) ;. . .}

f u n c t i o n updateData ( ) {. . .angle +=0.01;modelview . s e t I d e n t i t y ( ) ;modelview . t r a n s l a t e (0 ,0 ,−4);modelview . ro ta teX ( angle ) ;

}

F. Aubert (MS2) RVI/ introduction à webgl 2015-2016 28 / 37

Page 29: Introduction à WebGL - fil.univ-lille1.fraubert/rvi/rvi_coursWebgl01.pdf · Introduction à WebGL Réalité Virtuelle et Interaction Fabrice Aubert fabrice.aubert@univ-lille1.fr

Définir un constructeur Mat4

f u n c t i o n Mat4 ( ) {th is . f v = new Float32Array ( 1 6 ) ;

}Mat4 . p ro to type . s e t I d e n t i t y = f u n c t i o n ( ) {

th is . f v [ 0 ] = 1 . 0 ; th is . f v [ 4 ] = 0 . 0 ; th is . f v [ 8 ] =0; th is . f v [ 1 2 ] = 0 . 0 ;th is . f v [ 1 ] = 0 . 0 ; th is . f v [ 5 ] = 1 . 0 ; th is . f v [ 9 ] =0 .0 ; th is . f v [ 1 3 ] = 0 . 0 ;th is . f v [ 2 ] = 0 . 0 ; th is . f v [ 6 ] = 0 . 0 ; th is . f v [ 1 0 ] = 1 . 0 ; th is . f v [ 1 4 ] = 0 . 0 ;th is . f v [ 3 ] = 0 . 0 ; th is . f v [ 7 ] = 0 . 0 ; th is . f v [ 1 1 ] = 0 . 0 ; th is . f v [ 1 5 ] = 1 . 0 ;

} ;Mat4 . p ro to type . copy = f u n c t i o n ( ) {

var res=new Mat4 ( ) ;for ( i =0; i <16; i ++) { res . f v [ i ]= th is . f v [ i ] ; }return res ;

} ;Mat4 . p ro to type . setFrustum = f u n c t i o n ( l e f t , r i g h t , bottom , top , near , f a r ) {

th is . f v [0]=2.0∗ near / ( r i g h t− l e f t ) ; th is . f v [ 4 ] = 0 . 0 ; th is . f v [ 8 ] =( r i g h t + l e f t ) / ( r i g h t− l e f t ) ; th is . f v [ 1 2 ] = 0 . 0 ;th is . f v [ 1 ] = 0 . 0 ; th is . f v [5]=2.0∗ near / ( top−bottom ) ; th is . f v [ 9 ] =( top+bottom ) / ( top−bottom ) ; th is . f v [ 1 3 ] = 0 . 0 ;th is . f v [ 2 ] = 0 . 0 ; th is . f v [ 6 ] = 0 . 0 ; th is . f v [10]=−( f a r +near ) / ( fa r−near ) ; th is . f v [14]=−2.0∗ f a r∗near / ( fa r−near ) ;th is . f v [ 3 ] = 0 . 0 ; th is . f v [ 7 ] = 0 . 0 ; th is . f v [11]=−1.0; th is . f v [ 1 5 ] = 0 . 0 ;

} ;

F. Aubert (MS2) RVI/ introduction à webgl 2015-2016 29 / 37

Page 30: Introduction à WebGL - fil.univ-lille1.fraubert/rvi/rvi_coursWebgl01.pdf · Introduction à WebGL Réalité Virtuelle et Interaction Fabrice Aubert fabrice.aubert@univ-lille1.fr

Modelview et projection dans le shader

< s c r i p t i d = " he l lo−vs " type=" x−shader / x−ver tex ">a t t r i b u t e vec4 ver tex ;a t t r i b u t e vec2 texCoord ;

uni form mat4 modelview , p r o j e c t i o n ;

vary ing vec2 fTexCoord ;

void main ( void ) {fTexCoord = texCoord ;g l _ P o s i t i o n = p r o j e c t i o n∗modelview∗ver tex ;

}</ s c r i p t >

F. Aubert (MS2) RVI/ introduction à webgl 2015-2016 30 / 37

Page 31: Introduction à WebGL - fil.univ-lille1.fraubert/rvi/rvi_coursWebgl01.pdf · Introduction à WebGL Réalité Virtuelle et Interaction Fabrice Aubert fabrice.aubert@univ-lille1.fr

Passer les matrices au shader

f u n c t i o n drawScene ( ) {. . .

var modelviewLocation= g l . getUni formLocat ion ( helloProgramShader , ’ modelview ’ ) ;var p r o j e c t i o n L o c a t i o n = g l . getUni formLocat ion ( helloProgramShader , ’ p r o j e c t i o n ’ ) ;/ / se t up uni formg l . un i fo rm1 i ( tex tu reLoca t ion , 0 ) ;g l . un i fo rmMat r i x4 fv ( modelviewLocation , g l .FALSE, modelview . f v ) ;g l . un i fo rmMat r i x4 fv ( p ro jec t i onLoca t i on , g l .FALSE, p r o j e c t i o n . f v ) ;

. . .}

F. Aubert (MS2) RVI/ introduction à webgl 2015-2016 31 / 37

Page 32: Introduction à WebGL - fil.univ-lille1.fraubert/rvi/rvi_coursWebgl01.pdf · Introduction à WebGL Réalité Virtuelle et Interaction Fabrice Aubert fabrice.aubert@univ-lille1.fr

6 Evénements

F. Aubert (MS2) RVI/ introduction à webgl 2015-2016 32 / 37

Page 33: Introduction à WebGL - fil.univ-lille1.fraubert/rvi/rvi_coursWebgl01.pdf · Introduction à WebGL Réalité Virtuelle et Interaction Fabrice Aubert fabrice.aubert@univ-lille1.fr

Définir des callbacks sur élément HTML5

f u n c t i o n main ( event ) { / / c a l l e d by event load from windowcanvas=document . getElementById ( " webglCanvas " ) ;

. . ./ / ca l l back f o r mouse eventscanvas . addEventL is tener ( ’mousedown ’ ,handleMouseDown , fa lse ) ;canvas . addEventL is tener ( ’mousemove ’ , handleMouseMove , fa lse ) ;canvas . addEventL is tener ( ’mouseup ’ , handleMouseUp , fa lse ) ;

loop ( ) ;. . .}

f u n c t i o n handleMouseDown ( event ) {/ / get the mouse coord ina tes r e l a t i v e to canvasoldMouseX = event . layerX−canvas . o f f s e t L e f t ;oldMouseY = ( canvas . height −1.0)−( event . layerY−canvas . o f fse tTop ) ;mouseDown= true ;

}

F. Aubert (MS2) RVI/ introduction à webgl 2015-2016 33 / 37

Page 34: Introduction à WebGL - fil.univ-lille1.fraubert/rvi/rvi_coursWebgl01.pdf · Introduction à WebGL Réalité Virtuelle et Interaction Fabrice Aubert fabrice.aubert@univ-lille1.fr

7 Quelques remarques sur Javascript

F. Aubert (MS2) RVI/ introduction à webgl 2015-2016 34 / 37

Page 35: Introduction à WebGL - fil.univ-lille1.fraubert/rvi/rvi_coursWebgl01.pdf · Introduction à WebGL Réalité Virtuelle et Interaction Fabrice Aubert fabrice.aubert@univ-lille1.fr

Prototypes

I Toute fonction peut être un constructeur d’objets.

f u n c t i o n f ( ) {th is . coucou=" t o t o " ;

}

var a=new f ( ) ; / / a es t une ins tance de fconsole . log ( a . coucou ) ;

I Toute fonction est un objet.

I Toute fonction possède une propriété prototype.

I Toutes les instances d’une fonction partagent la propriété prototype (implicitement).

F. Aubert (MS2) RVI/ introduction à webgl 2015-2016 35 / 37

Page 36: Introduction à WebGL - fil.univ-lille1.fraubert/rvi/rvi_coursWebgl01.pdf · Introduction à WebGL Réalité Virtuelle et Interaction Fabrice Aubert fabrice.aubert@univ-lille1.fr

Exemple

f u n c t i o n f ( ) {th is . coucou=" t o t o " ;

}

f . p ro to type . b ipb ip =" t i t i " ;

var a=new f ( ) ;var b=new f ( ) ;

console . log ( a . coucou ) ; / / non par tagéconsole . log ( b . coucou ) ;console . log ( a . b ipb ip ) ; / / par tagéconsole . log ( b . b ipb ip ) ;

a . b ipb ip =" blop " ; / / ! a t t e n t i o n : c r é a t i on de l a p r o p r i é t é b ipb ip pour a !console . log ( b . b ipb ip ) ; / / l e b ipb ip par tagé ( i . e . du pro to type ) .console . log ( a . b ipb ip ) ; / / l e b ipb ip propre à a

F. Aubert (MS2) RVI/ introduction à webgl 2015-2016 36 / 37

Page 37: Introduction à WebGL - fil.univ-lille1.fraubert/rvi/rvi_coursWebgl01.pdf · Introduction à WebGL Réalité Virtuelle et Interaction Fabrice Aubert fabrice.aubert@univ-lille1.fr

Méthode

f u n c t i o n f ( ) {th is . prop1=" va leur " ; / / l a p r o p r i é t é sera cr éée pour chaque ins tance

}

f . p ro to type . methode1= f u n c t i o n ( ) { console . log ( th is . prop1 ) ; } / / methode1 sera par tagée

var a=new f ( ) ;/ / a . methode1 ( ) => appel à l a méthode ( par tagée )/ / a . prop1 => va leur de prop1 de a ( non par tagée ) .

F. Aubert (MS2) RVI/ introduction à webgl 2015-2016 37 / 37