Introduction   WebGL (2.0) - aubert/rvi/rvi_   Introduction   WebGL (2.0)...

download Introduction   WebGL (2.0) - aubert/rvi/rvi_   Introduction   WebGL (2.0) R©alit©

of 34

  • date post

    19-Oct-2018
  • Category

    Documents

  • view

    213
  • download

    0

Embed Size (px)

Transcript of Introduction   WebGL (2.0) - aubert/rvi/rvi_   Introduction   WebGL (2.0)...

  • Introduction WebGL (2.0)Ralit Virtuelle et Interaction

    Fabrice Aubertfabrice.aubert@univ-lille1.fr

    Master 2 Informatique - Parcours IVI

    2016-2017

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

    mailto:fabrice.aubert@univ-lille1.fr

  • Objectif

    film : "un repas de famille suite au dcs du grand-pre" - 2011/ extrait Tournage : Camra 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 Stphane Dwernicki et Patrick Beauc de loption Design ; Etudiants : Rmi Casiez, FabienFoulon, Laurne Marcant, Chlo Petitjean, Honorine Poisson, Saito Mitsuaki, Aleksi Fermon.

    http://www.esad-valenciennes.fr/

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

    http://www.esad-valenciennes.fr/

  • Principe

    I Le film est prt tre plaqu "naturellement" sur une sphre (projection sphrique)

    I Il suffit de : crer une sphre texture

    placer le point de vue lintrieur de la sphre, en son centre. modifier lorientation du point de vue avec la souris.

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

  • La sphre

    I Dcomposer en mridiens (angle sur 360 degrs)/parallles(angle sur 180 degrs).I Chaque sommet P calcul par :

    P =

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

    avec [0,2] [0,]

    I Coordonnes de texture en P : {s = 2t =

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

  • Introduction WebGL (2.0)

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

    I Pourquoi pas WebGL 1.0 ?

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

    I WebGL = Jeu dinstructions JavaScript (interprt par le navigateur client).

    I Spcification base sur openGL ES 3.0.

    I WebGL sadresse la balise de HTML5 (contexte daffichage).

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

  • Quelques liens

    I Site officiel :

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

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

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

  • 1 Mise en place

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

  • Canvas HTML5

    < t i t l e >RVI WebGL< 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 " >

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

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

    }}

    rcupration du canvas html5 et cration du contexte webgl pargl=canvasGL.getContext("webgl2").

    gl. prfixera toutes les instructions webgl

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

  • Initialisation/Boucle daffichage

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

    }

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

  • WebGL = OpenGL ?

    I WebGL 2.0 est bas sur la spcification dOpenGL ES 3.0 (OpenGL pour les mobiles).

    I Pour les projets plus amples : ncessit davoir une librairie haut niveau.

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

    I + ventuellement dautres librairies pour le web (i.e. Ajax)

    I Pour le tp : sans librairie externe ("from scratch").

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

    http://threejs.org/

  • Objectif TP

    I Initialisation du VAO et des buffers pour la gomtrie (une sphre).

    I placage de texture (images de la vido)

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

    I + interaction souris

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

  • 2 Shaders

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

  • Sources des shaders dans le html

    < t i t l e >RVI WebGL 2.0 ( v ideo 360) < 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 i d = " he l lof s " type=" xshader / xf 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 i d = " he l lovs " type=" xshader / xver 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 ) ;

    }

    . . .

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

  • Lecture du code source+compilation

    / reads shader ( sources i n html : tag < s c r i p t . . . type ="xshader "> ) 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 == " xshader / xf ragment " ) {

    shader = g l . createShader ( g l .FRAGMENT_SHADER) ;}else i f ( shaderScr ip t . type == " xshader / xver 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 ;}

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

  • 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");.

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

  • 3 Gomtrie et buffers

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

  • Obtenir :

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

  • Initialisation VAO

    Utilisation de lobjet Float32Array et Uint16Array (spcification 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()).

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

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

    }

    F. Aubert