Introduzione a WebGL

Introduzione a
WebGL
Andrea Negri – a.negri@cineca.it
Dipartimento per il SuperCalcolo, Applicazioni ed Innovazione

14 - 25 giugno 2010

Introduzione a WebGL

DI COSA PARLEREMO

Cos'è WebGL
Come si usa all'interno di una pagina web
Panoramica di librerie basate su WebGL


COS'E' WEBGL

<canvas> GLSL

WEBGL

OpenGL
ES 2.0


OPENGL ES

Open Graphics Library for Embedded Systems

Versioni Fixed Function
hardware
OpenGL API
1.0 (OpenGL 1.3+ specs)
accelerazione hardware base, fixedpoint data type

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

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

Programmable
hardware


OPENGL ES


GLSL
Graphics Library Shading Language
Shader = set di istruzioni per effettuare effetti di rendering su hardware grafico

Vertex Shader Geometry Shader Pixel Shader
manipolazione di per combinare elabora I pixel per applicare
vertici e della insiemi di vertici e generare texture e effetti (bump
loro posizione nuove primitive Mapping, 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
E' possibile, attraverso JavaScript, accedere a un canvas e
disegnare dinamicamente attraverso le funzioni messe a
disposizione (rif. esempi_lezione/example_canvas)
HTML
<html>
<body>
...
</canvas>
...
</body>

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

JS


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

Features
Nuovo rendering context per canvas → WebGLRenderingContext
Gestione della memoria automatica, attraverso Javascript
Implementazione nativa, non richiede plugin esterni
Accelerazione hw 3D nel browser
Comodo per prototipazione

Svantaggi
Richiede la conoscenza di OpenGL e GLSL
Anche un'applicazione semplice richiede (come vedremo) parecchio codice
Standard giovane, soggetto a cambiamenti
Instabilità


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):
...e M
Mozilla Firefox (Minefield)
icros
Google Chromium
Apple Safari oft??
Opera ?


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

<html>
<body>
...
</canvas>
...
</body>

nome del canvas dimensione del Drawing Buffer


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

<html>
<head>
<script src=”glUtils.js”></script>
All'apertura della pagina, viene
</head>
eseguita la funzione
<body onload=”initWebGL()”>
initWebGL()
...
</canvas>
...
</body>

2b. ...e creando il file glUtils.js
recupero il canvas
dal DOM
function initWebGL() {

var canvas = document.getElementById(“myCanvas”);
creo un nuovo
rendering context.
try {
Contestualmente sarà
gl = canvas.getContext(“experimental-webgl”); creato anche un drawing
gl.viewportWidth = canvas.width; buffer delle dimensioni
gl.viewportHeight = canvas.height; specificate nel canvas
}
catch(e) {}

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

}


DRAWING BUFFER
Per 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]
se abilitato, si suppone che i colori siano già comprensivi
premultipliedAlpha del canale alpha [default: true]


ESEMPIO BUFFER CUSTOM



try {
gl = canvas.getContext(“experimental-webgl”,
{ antialias: false, stencil: true } );
}
catch(e) {}

if(!gl) {
}

}


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) {}

if(!gl) {
}

}


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 model
view 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 =
inizializzo
document.getElementById("lesson01-canvas"); buffers e shaders

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

gl.clearColor(1.0,0.6,0.0,1.0);
ridisegno la scena
gl.clearDepth(1.0);
ogni 15 msec
gl.enable(gl.DEPTH_TEST);
gl.depthFunc(gl.LEQUAL);

setInterval(drawScene, 15);
}


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

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

function initBuffers() implementazione di
{
triangleVertexPositionBuffer = gl.createBuffer();
array di vertici
gl.bindBuffer(gl.ARRAY_BUFFER, triangleVertexPositionBuffer); per WebGL
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...


initBuffers()
...e del quadrato

//...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()


SHADERS
In WebGL gli shaders sono la componente fondamentale, nel nostro esempio
definiamo 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
<script id="shader-fs" type="x-shader/x-fragment">
void main(void) {
gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
}
</script>

Nota: gli shader
<script id="shader-vs" type="x-shader/x-vertex">
attribute vec3 aVertexPosition; sono scritti
all'interno della
uniform mat4 uMVMatrix;
uniform mat4 uPMatrix; pagina html
void main(void) {
gl_Position =
uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);
}
</script>


initShaders()
var shaderProgram;

function initShaders()
{ 1. si recupera il codice degli shader
var fragmentShader = getShader(gl, "shader-fs");
var vertexShader = getShader(gl, "shader-vs");
dalla pagina HTML

shaderProgram = gl.createProgram(); 2. si crea un program (vs + fs) che
gl.attachShader(shaderProgram, vertexShader);
gl.attachShader(shaderProgram, fragmentShader); sarà compilato ed eseguito nella
gl.linkProgram(shaderProgram); scheda video
if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
alert("Errore nell'init degli shaders");
}

gl.useProgram(shaderProgram); 3. recupero i riferimenti ad
attributes e uniforms dichiarati nel
shaderProgram.vertexPositionAttribute =
gl.getAttribLocation(shaderProgram, "aVertexPosition");
codice degli shader
gl.enableVertexAttribArray(shaderProgram.vertexPositionAttribute);

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


drawScene()
function drawScene()
{ funzioni non direttamente
gl.viewport(0, 0, gl.viewportWidth, gl.viewportHeight); implementate in WebGL
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

perspective(45, gl.viewportWidth / gl.viewportHeight, 0.1, 100.0); Realizzate con Sylvester, vedi
glutils.js e helper.js per
loadIdentity(); approfondire
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();
I vertex buffer sono passati al
gl.drawArrays(gl.TRIANGLES, 0, triangleVertexPositionBuffer.numItems); program, che cambia il colore
mvTranslate([3.0, 0.0, 0.0]);
e la posizione. Infine viene
effettuata la scrittura sul
gl.bindBuffer(gl.ARRAY_BUFFER, squareVertexPositionBuffer); frame buffer
gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute,
squareVertexPositionBuffer.itemSize, gl.FLOAT, false, 0, 0);

setMatrixUniforms();

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


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:
GLGE
SceneJS
EnergizeGL
Copperlicht
SpiderGL
WebGLU


GLGE: “WebGL for the lazy”
http://www.glge.org
Features:
Keyframe animation
Normal mapping
Animated materials
Skeletal animation
Collada format support
Parallax Mapping
Text rendering
Fog

Planned additions:
Environment mapping
Reflections/Refractions
Collada Animations
Physics
LOD


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


SceneJS
http://scenejs.org

Definisce la struttura 3D come un scene graph
Efficiente
genera shader ottimizzati automaticamente
effettua swap delle risorse da/a memoria video
management 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: sintassi
rif. 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" },
attributi
SceneJS.lookAt({
nodi
eye : { x: 0.0, y: 10.0, z: -15 },
look : { y:1.0 },
up : { y: 1.0 }
},

//continua...


EnergizeGL
http://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/


Copperlicht
http://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


SpiderGL
http://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


WebGLU
http://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 WebGL
http://learningwebgl.com

WebGL è una tecnologia giovane e in evoluzione!

fonte: delicious.com

Introduzione a WebGL

Recommended

Recommended

More Related Content

What's hot

What's hot (8)

Viewers also liked

Viewers also liked (15)

Similar to Introduzione a WebGL

Similar to Introduzione a WebGL (20)

Introduzione a WebGL