Introduction à WebGL (2.0) - cristal.univ-lille.fraubert/rvi/rvi_coursWebgl2.pdf · Introduction...

Introduction à WebGL (2.0)Réalité Virtuelle et Interaction

Fabrice [email protected]

Master 2 Informatique - Parcours IVI

2016-2017

F. Aubert (MS2) RVI/ introduction à webgl 2016-2017 1 / 33

mailto:[email protected]

Objectif

film : "un repas de famille suite au décès du grand-père" - 2011/ extrait Tournage : 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://www.esad-valenciennes.fr/


http://www.esad-valenciennes.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

• placer le point de vue à l’intérieur de la sphère, en son centre.• modifier l’orientation du point de vue avec la souris.


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 = θ

2π

t = φ

π


Introduction à WebGL (2.0)

I WebGL 2.0 toujours en draft (01/09/2016), mais opérationnel sur firefox.

I Pourquoi pas WebGL 1.0 ?

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 3.0.

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


Quelques liens

I Site officiel :

• https://www.khronos.org/registry/webgl/specs/latest/2.0/


https://www.khronos.org/registry/webgl/specs/latest/2.0/

1 Mise en place


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 =" canvasGL " width=" 512px " he igh t= " 512px " ></canvas></ canvas>

</body>

</ html >


Initialisation du contexte WebGL (2/2)

I coté javascript :

var canvasGL ; / / html canvasvar g l ; / / webgl con tex t

window . addEventL is tener ( " load " , main ) ;

f u n c t i o n main ( ) {canvasGL=document . getElementById ( " canvasGL " ) ;console . log ( canvasGL ) ;g l =canvasGL . getContext ( " webgl2 " ) ;i f ( ! g l ) {

a l e r t ( " cant suppor t webGL2 contex 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 )

) ;i n i t ( ) ;mainLoop ( ) ;

}}

⇒ récupération du canvas html5 et création du contexte webgl pargl=canvasGL.getContext("webgl2").

⇒ gl. préfixera toutes les instructions webgl


Initialisation/Boucle d’affichage

/∗∗∗ i n i t : webGL and data i n i t i a l i z a t i o n s∗ ∗∗/

f u n c t i o n i n i t ( ) {g l . c l ea rCo lo r ( 1 , 1 , 1 , 1 ) ;g l . enable ( g l .DEPTH_TEST ) ;

g l . v iewpor t (0 ,0 , canvasGL . width , canvasGL . he igh t ) ;}

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

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

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

f u n c t i o n draw ( ) {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 mainLoop ( ) {update ( ) ;draw ( ) ;window . requestAnimationFrame ( loop ) ;

}


WebGL = OpenGL ?

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

I Pour les projets plus amples : 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 ("from scratch").


http://threejs.org/

Objectif TP

I Initialisation du VAO et 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


2 Shaders


Sources des shaders dans le html

<head><meta charset= "UTF−8" / >< t i t l e >RVI WebGL 2.0 ( v ideo 360) </ 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= " video360 . 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 " >#vers ion 300 es

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 )

out vec4 f ragCo lo r ;void main ( void ) {

f ragCo lo r = vec4 ( 1 . 0 , 0 .0 , 0 .0 , 1 . 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 " >#vers ion 300 es

layou t ( l o c a t i o n =0) i n vec3 p o s i t i o n ;

void main ( void ) {g l _ P o s i t i o n = vec4 ( pos i t i on , 1 . 0 ) ;

}</ s c r i p t >

</head>. . .


Lecture du code source+compilation

/∗∗ ∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗ reads shader ( sources i n html : tag < s c r i p t . . . type ="x−shader "> ) and compile∗ ∗∗/

f u n c t i o n compileShader ( 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 ;console . log ( s t r ) ;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 ( i d + " \ n "+ g l . getShaderInfoLog ( shader ) ) ;return nul l ;

}

return shader ;}


Lecture/creation du program shader

/∗∗ ∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗ ∗//∗∗ create the program shader ( ve r tex+fragment ) :∗ − sources are i n html s c r i p t tags : i d +"−vs " f o r the ver tex shader , i d +"− f s " f o r the fragment shader∗∗/

f u n c t i o n in i tP rogram ( i d ) {var programShader= g l . createProgram ( ) ;var v e r t =compileShader ( i d + "−vs " ) ;var f r ag =compileShader ( 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");.


3 Géométrie et buffers


Obtenir :


Initialisation VAO

Utilisation de l’objet Float32Array et Uint16Array (spécification javascript pour 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 in i tT r iang leVAO ( ) {var p o s i t i o n =[−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 evar element = [0 ,1 ,2 ,3 ,4 ,5 ] ;

/ / i n i t a t t r i b u t e b u f f e rvar t r i a n g l e B u f f e r = g l . c rea teBu f fe r ( ) ;g l . b indBu f fe r ( g l .ARRAY_BUFFER, t r i a n g l e B u f f e r ) ;g l . bu f fe rData ( g l .ARRAY_BUFFER,new Float32Array ( p o s i t i o n ) , g l .STATIC_DRAW ) ;

var t r i ang leE lemen tBu f f e r = g l . c rea teBu f fe r ( ) ;g l . b indBu f fe r ( g l .ELEMENT_ARRAY_BUFFER, t r i ang leE lemen tBu f f e r ) ;g l . bu f fe rData ( g l .ELEMENT_ARRAY_BUFFER,

new Uint16Array ( element ) , g l .STATIC_DRAW ) ;

/ / i n i t vaovar vao= g l . c rea teVer texAr ray ( ) ;g l . b indVer texArray ( vao ) ;g l . b indBu f fe r ( g l .ELEMENT_ARRAY_BUFFER, t r i ang leE lemen tBu f f e r ) ;g l . enab leVer texA t t r i bA r ray ( 0 ) ;g l . b indBu f fe r ( g l .ARRAY_BUFFER, t r i a n g l e 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 (0 ,3 , g l .FLOAT, g l .FALSE, 0 , 0 ) ;

g l . b indVer texArray ( nul l ) ;

return vao ;}

⇒ Utilisation = triangleVAO=initTriangleVAO(); (dans init()).


Affichage

f u n c t i o n draw ( ) {g l . c l ea r ( g l .COLOR_BUFFER_BIT | g l .DEPTH_BUFFER_BIT ) ;g l . useProgram ( shaderHel lo ) ;

g l . b indVer texArray ( tr iangleVAO ) ;

g l . drawElements ( g l .TRIANGLES,6 , g l .UNSIGNED_SHORT, 0 ) ;

g l . useProgram ( nul l ) ;g l . b indVer texArray ( nul l ) ;

}


4 Texture Vidéo


Obtenir :

fenêtre webgl texture


Placage de texture simple dans shaders

< s c r i p t i d = " he l lo−vs " type=" x−shader / x−ver tex " >#vers ion 300 es

layou t ( l o c a t i o n =0) i n vec3 p o s i t i o n ;l ayou t ( l o c a t i o n =1) i n vec2 texCoord ;

out vec2 fTexCoord ;

void main ( ) {fTexCoord=texCoord ;g l _ P o s i t i o n =vec4 ( pos i t i on , 1 . 0 ) ;

}</ 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 " >#vers ion 300 es

p r e c i s i o n highp f l o a t ;

un i form sampler2D image ;i n vec2 fTexCoord ;out vec4 f ragCo lo r ;

void main ( ) {f ragCo lo r= t e x t u r e ( image , fTexCoord ) ;

}</ s c r i p t >


Initialisation texture

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

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 ;}

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

I Utilisation : theTexture=initTexture("train");


Affichage

f u n c t i o n draw ( ) {g l . c l ea r ( g l .COLOR_BUFFER_BIT | g l .DEPTH_BUFFER_BIT ) ;g l . useProgram ( shaderHel lo ) ;

/ / se t up uni formvar tex tu reLoca t i on = g l . getUni formLocat ion ( shaderHel lo , ’ image ’ ) ;

g l . un i fo rm1 i ( tex tu reLoca t ion , 0 ) ;g l . b indVer texArray ( tr iangleVAO ) ;

g l . drawElements ( g l .TRIANGLES,6 , g l .UNSIGNED_SHORT, 0 ) ;

g l . useProgram ( nul l ) ;g l . b indVer texArray ( nul l ) ;

}

I (il faut modifier le VAO pour intégrer les coordonnées de texture en chaque sommet enattribut 1)


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∗∗/

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

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 ) ;

. . .}


5 ModelView et Projection


Librairie javascript sur les matrices

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

p r o j e c t i o n =new Mat4 ( ) ;modelview=new Mat4 ( ) ;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 update ( ) {. . .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 ) ;

}


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 ;

} ;


Modelview et projection dans le shader

< s c r i p t i d = " shader360−vs " type=" x−shader / x−ver tex " >#vers ion 300 es

layou t ( l o c a t i o n =0) i n vec3 p o s i t i o n ;l ayou t ( l o c a t i o n =1) i n vec2 texCoord ;

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

out vec2 fTexCoord ;

void main ( ) {fTexCoord=texCoord ;g l _ P o s i t i o n = p r o j e c t i o n∗modelview∗vec4 ( pos i t i on , 1 . 0 ) ;

}</ s c r i p t >


Passer les matrices au shader

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

var t ex tu reLoca t i on = g l . getUni formLocat ion ( shaderHel lo , ’ image ’ ) ;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 ) ;

. . .}


6 Evénements


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 windowcanvasGL=document . getElementById ( " canvasGL " ) ;

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

loop ( ) ;. . .}


Souris

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−canvasGL . o f f s e t L e f t ;oldMouseY = ( canvasGL . height −1.0)−( event . layerY−canvasGL . o f fse tTop ) ;mouseDown= true ;

}

f u n c t i o n handleMouseMove ( event ) {i f (mouseDown) {/ / get the mouse r e l a t i v e to canvas

var mouseX = event . layerX−canvasGL . o f f s e t L e f t ;var mouseY = canvasGL . height−(event . layerY−canvasGL . o f fse tTop )−1.0;

oldMouseX=mouseX ;oldMouseY=mouseY ;

}}

f u n c t i o n handleMouseUp ( event ) {mouseDown= fa lse ;

}


Introduction à WebGL (2.0) - cristal.univ-lille.fraubert/rvi/rvi_coursWebgl2.pdf · Introduction...

Documents

Transcript of Introduction à WebGL (2.0) - cristal.univ-lille.fraubert/rvi/rvi_coursWebgl2.pdf · Introduction...