Introduzione a WebGL

Introduzione a WebGL

Andrea Negri – [email protected] per il SuperCalcolo, Applicazioni ed Innovazione

14 - 25 giugno 2010

DI COSA PARLEREMO

Cos'è WebGLCome si usa all'interno di una pagina webPanoramica di librerie basate su WebGL


COS'E' WEBGL

GLSL

WEBGL

<canvas>

OpenGL ES 2.0


OPENGL ES

Open Graphics Library for Embedded Systems

Versioni

1.0 (OpenGL 1.3+ specs)accelerazione hardware base, fixedpoint data type

1.1 (OpenGL 1.5+ specs)supporto multitexture, auto mipmap, vertex buffer objects...

2.X (OpenGL 2.0 specs)Fixedpipeline sostituita da shaders, non compatibile con ES 1.X

OpenGL ESAPI

OpenGL API

Fixed Function hardware

Programmablehardware


OPENGL ES



OPENGL ES

GLSL

Graphics Library Shading Language

Shader = set di istruzioni per effettuare effetti di rendering su hardware grafico

Vertex Shadermanipolazione di

vertici e della loro posizione

Geometry Shaderper combinare

insiemi di vertici e generarenuove primitive

Pixel Shaderelabora I pixel per applicare

texture e effetti (bumpMapping, nebbia, ecc.)


E' un programma che viene eseguito su ogni vertice/pixel direttamente all'interno della scheda video utilizzando dei processori appositamente dedicati

a questo scopo

GLSL


Parole chiave:

Uniform → variabile globale accessibile in lettura anche fuori dallo shader

Program → nome dato a una coppia vertexfragment shaders

Attribute → parametro in input passato a un vertex shader dall'applicazione

Varying → informazione passata dal vertex al fragment shader

GLSL: un esempio


http://www.youtube.com/watch?v=0A6_NRFSg3c

CANVAS E' un componente del DOM (Document Object Model) di un documento HTML5

Introdotto inizialmente da Apple per WebKit, poi adottato anche da Gecko e Opera

Rendering di contenuti 2D e bitmap all'interno di un' area della pagina opportunamente definita

<html><body>...<canvas id=”myCanvas” width=”500” height=”500”>

Il tuo browser non supporta i canvas... :(</canvas>...</body>


CANVAS



var myCanvas = document.getElementById('myCanvas');var context = myCanvas.getContext('2d');context.fillStyle=”rgb(255,0,0”);context.fillRect(50,50,80,80);

HTML

JS

E' possibile, attraverso JavaScript, accedere a un canvas e disegnare dinamicamente attraverso le funzioni messe a disposizione (rif. esempi_lezione/example_canvas)


WEBGL

Standard sviluppato da Khronos GroupWebGL Working Group – Apple, Mozilla, Google, Opera

FeaturesNuovo rendering context per canvas → WebGLRenderingContextGestione della memoria automatica, attraverso JavascriptImplementazione nativa, non richiede plugin esterniAccelerazione hw 3D nel browserComodo per prototipazione

SvantaggiRichiede la conoscenza di OpenGL e GLSLAnche un'applicazione semplice richiede (come vedremo) parecchio codiceStandard giovane, soggetto a cambiamentiInstabilità


WEBGL

Timeline

2006 Primi prototipi (Canvas 3D, Mozilla Foundation)

2007 Implementazione inbrowser (Mozilla, Opera)

2009 WebGL Working Group (Khronos + Mozilla)

CompatibilitàBrowser compatibili (per ora solo versioni di sviluppo):

Mozilla Firefox (Minefield) Google Chromium Apple Safari Opera


...e Microsoft???

Supporto al momento non previsto :(

Alternativa basata su DirectX?

Da tenere d'occhio: Google ANGLE (Almost Native Graphics Layer Engine)

http://code.google.com/p/angleproject

“translate OpenGL ES 2.0 API to DirectX 9 API calls”



HELLO WEBGL

Per utilizzare la tecnologia WebGL dobbiamo:(rif. esempi_lezione/lesson00)

1. definire il canvas su cui verrà effettuato il rendering all'interno del documento HTML



nome del canvas dimensione del Drawing Buffer


2a. creiamo uno script JS che inizializzi il context WebGL, modificando la pagina html...

<html><head>

<script src=”glUtils.js”></script></head><body onload=”initWebGL()”>...<canvas id=”myCanvas” width=”500” height=”500”>


All'apertura della pagina, vieneeseguita la funzione

initWebGL()

HELLO WEBGL

2b. ...e creando il file glUtils.js

function initWebGL() {

var canvas = document.getElementById(“myCanvas”);

try {gl = canvas.getContext(“experimental-webgl”);gl.viewportWidth = canvas.width;gl.viewportHeight = canvas.height;

}catch(e) {}

if(!gl) {alert(“EPIC FAIL! Could not init WebGL!”);

}

}

recupero il canvas dal DOM

creo un nuovo rendering context.

Contestualmente saràcreato anche un drawingbuffer delle dimensionispecificate nel canvas

DRAWING BUFFERPer default, è costituito da:

Color Buffer RGBA (8 bit per componente)Depth Buffer a (almeno) 16 bit

Al momento dell'inizializzazione, è possibile definire un oggetto di tipo WebGLContextAttributes e scegliere delle impostazioni custom:


Parametro Effetto

alpha abilita/disabilita l'alpha buffer [default: true]

depth abilita/disabilita il depth buffer [default: true]

stencil abilita/disabilita il color buffer [default: true]

antialias se abilitato, il drawing buffer effettuerà antialiasing[default: true]

premultipliedAlpha se abilitato, si suppone che i colori siano già comprensividel canale alpha [default: true]


ESEMPIO BUFFER CUSTOM



try {gl = canvas.getContext(“experimental-webgl”,

{ antialias: false, stencil: true } );}catch(e) {}


}

}


3. completiamo l'inizializzazione



try {gl = canvas.getContext("experimental-webgl");gl.viewportWidth = canvas.width;gl.viewportHeight = canvas.height;

gl.clearColor(1.0,0.6,0.0,1.0);gl.clearDepth(1.0);gl.enable(gl.DEPTH_TEST);gl.depthFunc(gl.LEQUAL);

gl.viewport(0,0,gl.viewportWidth,gl.viewportHeight);gl.clear(gl.COLOR_BUFFER_BIT,gl.DEPTH_BUFFER_BIT);

}catch(e) {}


}

}

Ed ecco il risultato!



SYLVESTER(http://sylvester.jcoglan.com/)

Le API di JavaScript nativamente non danno supporto per l'algebra matriciale

Sylvester è una libreria per operazioni con vettori/matrici

Vantaggi:– operazioni geometriche– pulizia del nostro codice

Useremo questa libreria nei prossimi esempi per gestire modelview e projection matrix!


WEBGL DRAWING

Proviamo a disegnare sul buffer, ad esempio un triangolo e un quadrato(rif. esempi_lezione/lesson01)

L'inizializzazione di WebGL è la solita, con qualche novità:

function webGLStart()

{ var canvas =

document.getElementById("lesson01-canvas");

initGL(canvas); initBuffers(); initShaders();

gl.clearColor(1.0,0.6,0.0,1.0);

gl.clearDepth(1.0);

gl.enable(gl.DEPTH_TEST); gl.depthFunc(gl.LEQUAL);

setInterval(drawScene, 15);}

inizializzobuffers e shaders

ridisegno la scenaogni 15 msec


initBuffers()

// buffer per i vertici var triangleVertexPositionBuffer;var squareVertexPositionBuffer;

function initBuffers() { triangleVertexPositionBuffer = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, triangleVertexPositionBuffer); var vertices = [ 0.0, 1.0, 0.0, -1.0, -1.0, 0.0, 1.0, -1.0, 0.0 ];

gl.bufferData(gl.ARRAY_BUFFER, new WebGLFloatArray(vertices), gl.STATIC_DRAW);

triangleVertexPositionBuffer.itemSize = 3; triangleVertexPositionBuffer.numItems = 3;

// continua...

Ci servono due buffer, che conterranno i vertici rispettivamente del triangolo...

implementazione diarray di vertici

per WebGL

//...da slide precedente

squareVertexPositionBuffer = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, squareVertexPositionBuffer); vertices = [ 1.0, 1.0, 0.0, -1.0, 1.0, 0.0, 1.0, -1.0, 0.0, -1.0, -1.0, 0.0 ]; gl.bufferData(gl.ARRAY_BUFFER, new WebGLFloatArray(vertices), gl.STATIC_DRAW); squareVertexPositionBuffer.itemSize = 3; squareVertexPositionBuffer.numItems = 4;

} //fine initBuffers()

initBuffers()


...e del quadrato

SHADERS

<script id="shader-fs" type="x-shader/x-fragment">void main(void) {

gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);}

</script>

<script id="shader-vs" type="x-shader/x-vertex">attribute vec3 aVertexPosition;

uniform mat4 uMVMatrix;uniform mat4 uPMatrix;

void main(void) {gl_Position =

uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);}

</script>

In WebGL gli shaders sono la componente fondamentale, nel nostro esempiodefiniamo un vertex shader che agirà su tutti i vertici dei due buffer definiti prima (traslandoli), e un fragment shader che colorerà ogni pixel di rosso

Nota: gli shader sono scritti

all'interno della pagina html


initShaders()


var shaderProgram;

function initShaders() {

var fragmentShader = getShader(gl, "shader-fs"); var vertexShader = getShader(gl, "shader-vs");

shaderProgram = gl.createProgram(); gl.attachShader(shaderProgram, vertexShader); gl.attachShader(shaderProgram, fragmentShader); gl.linkProgram(shaderProgram);

if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) { alert("Errore nell'init degli shaders"); }

gl.useProgram(shaderProgram);

shaderProgram.vertexPositionAttribute = gl.getAttribLocation(shaderProgram, "aVertexPosition");

gl.enableVertexAttribArray(shaderProgram.vertexPositionAttribute);

shaderProgram.pMatrixUniform = gl.getUniformLocation(shaderProgram, "uPMatrix");

shaderProgram.mvMatrixUniform = gl.getUniformLocation(shaderProgram, "uMVMatrix");

}

1. si recupera il codice degli shader dalla pagina HTML

2. si crea un program (vs + fs) che sarà compilato ed eseguito nella scheda video

3. recupero i riferimenti ad attributes e uniforms dichiarati nel codice degli shader


drawScene()function drawScene() {

gl.viewport(0, 0, gl.viewportWidth, gl.viewportHeight);gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

perspective(45, gl.viewportWidth / gl.viewportHeight, 0.1, 100.0);

loadIdentity();

mvTranslate([-1.5, 0.0, -7.0]);

gl.bindBuffer(gl.ARRAY_BUFFER, triangleVertexPositionBuffer);gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute,

triangleVertexPositionBuffer.itemSize, gl.FLOAT, false, 0, 0);

setMatrixUniforms();

gl.drawArrays(gl.TRIANGLES, 0, triangleVertexPositionBuffer.numItems);

mvTranslate([3.0, 0.0, 0.0]);

gl.bindBuffer(gl.ARRAY_BUFFER, squareVertexPositionBuffer);gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute,

squareVertexPositionBuffer.itemSize, gl.FLOAT, false, 0, 0);

setMatrixUniforms();

gl.drawArrays(gl.TRIANGLE_STRIP, 0, squareVertexPositionBuffer.numItems);}

funzioni non direttamente implementate in WebGL

Realizzate con Sylvester, vediglutils.js e helper.js per

approfondire

I vertex buffer sono passati al program, che cambia il colore

e la posizione. Infine viene effettuata la scrittura sul

frame buffer


Ecco il risultato dei nostri sforzi!

Per prendere “confidenza” con il codice, per esercizio si può provare a:

- cambiare il colore dello sfondo- cambiare colore del quadrato/triangolo- cambiare posizione ai vertici- animare la scena: ad ogni draw aggiornare la matrice di trasformazione per fare muovere gli oggetti

Come detto, una scena semplice come questa (no texture, no illuminazione, no animazione, ecc.) richiede una quantità di codice notevole!

Alternative?


LIBRERIE BASATE SU WEBGL

Pur essendo le specifiche di WebGL molto recenti, sono nate rapidamente delle librerie JS che si basano su questa tecnologia

Lo scopo generale è quello di facilitare l'utilizzo di WebGL, mascherandone la natura di basso livello ove possibile, per dedicarsi alla creazione di contenuti

Tra i framework più famosi:

GLGESceneJS EnergizeGLCopperlichtSpiderGL

WebGLU


GLGE: “WebGL for the lazy”http://www.glge.org

Features:Keyframe animationNormal mappingAnimated materialsSkeletal animationCollada format supportParallax MappingText renderingFog

Planned additions:Environment mappingReflections/RefractionsCollada AnimationsPhysicsLOD


GLGE: ESEMPIO(rif. esempi_lezione/example_glge)


GLGE: ESEMPIO

Peculiarità: la scena viene caricata da un file xml possibilità di ruotare la camera con il mouse possibilità di muoversi WASD (FPS like) i modelli caricati sono file COLLADA

...e se guardiamo index.html, dove si trova lo script del “core”, possiamo vedere come il codice non sia esageratamente complicato!

Però: documentazione ancora carente, bisogna affidarsi alle demo nessun tutorial per iniziare a imparare dalle basi


SceneJShttp://scenejs.org

Definisce la struttura 3D come un scene graph Efficiente

genera shader ottimizzati automaticamenteeffettua swap delle risorse da/a memoria videomanagement dei buffer WebGL lazy

Caricamento asincrono di modelli Frustum Culling Level of Detail Generazione procedurale di oggetti

Blog con tutorials http://learningscenejs.wordpress.com/

Playground per le demo


SceneJS: sintassirif. esempi_lezione/example_scenejs

Tutto il codice di inizializzazione della scena è nel file hello_teapot.js

Di particolare interesse è l'approccio JavaScript-like con cui viene descritto il scene graph della scena:

var exampleScene = SceneJS.scene({ canvasId: "theCanvas",

loggingElementId: "theLoggingDiv" },

SceneJS.lookAt({ eye : { x: 0.0, y: 10.0, z: -15 }, look : { y:1.0 }, up : { y: 1.0 } }, //continua...

attributi

nodi

EnergizeGLhttp://energize.cc


Ispirato a Processing (libreria di visualizzazione) In stato più embrionale rispetto ad altri framework

Da segnalare l'editor online, che trovate puntanto il vostro

browser su

http://energize.cc/app/

Copperlichthttp://www.ambiera.com/copperlicht/


SDK rilasciato a sorgente chiuso, versione commerciale a pagamento World Editor Character/Skeletal animation La scena 3D viene generata in formato binario Collision Detection Fisica


SpiderGLhttp://www.spidergl.org/

Framework sviluppato dal Visual Computing Lab (Istituto di Scienza e Tecnologie dell'Informazione - CNR di Pisa) Sezione demo notevole come qualità, ottimo biglietto da visita per WebGL

WebGLUhttp://github.com/OneGeek/WebGLU


Separazione netta tra fase di definizione degli elementi da renderizzare e rendering vero e proprio Può caricare files .frag/.vert/.vp/.fp automaticamente Implementa un parser obj per caricare modelli Animazioni procedurali GameGLU library (key binding)

PER SAPERNE DI PIU'


Info WebGL by Khronos (specifiche, wiki, ecc.)http://www.khronos.org/webgl/

Il portale di riferimento sul mondo WebGLhttp://learningwebgl.com

WebGL è una tecnologia giovane e in evoluzione!

fonte: delicious.com

Technology

Introduzione a WebGL