webgl

Pannello WebGL per Firefox

2010-08-11T21:56:00.001-07:00

https://addons.mozilla.org/it/firefox/addon/215994/

Naturalmente si puo' installare solo sulle versioni di Firefox che supportano WebGL!

HTML 5 test (include verifica sulle funzionalita' webgl)

2010-06-14T23:10:00.001-07:00

http://www.html5test.com/

Questa applicazione web testa le funzionalita', dello standard html 5, implementate dal browser. Restituisce un punteggio e 300 e' il massimo ottenibile (ovvero tutte le funzionalita' implementate). Naturalmente c'e' anche un test per le webgl!

Webgl su vecchio hardware (ATI e Flash dovete morire!)

2010-05-28T04:43:00.000-07:00

Sto lavorando in condizioni estreme!
Sto usando un vecchio lenovo t60 con una ATI X1300: per intenderci, ATI non supporta piu' questa scheda grafica!
Ho l'accelerazione opengl(penso opengl 1.x!) ma non ho l'accelerazione per opengl ES 2.1 e non ho il pbuffer(questo sotto Linux). Ergo: non riesco ad utilizzare la GPU per far girare le webgl e fare i primi esperimenti(avrei una mezza intenzione di convertire un'applicazione flash che visualizza un glyph con una nuvola di tag...).
Unica soluzione: compilarmi le mesa (nota importante: prima di compilare lanciare ./configure --with-driver=osmesa ) ed utilizzare la CPU.

Sotto windows XP tutto e' un po' piu' semplice e firefox trova tutto il necessario per usare la GPU: ma, lo sa chi mi conosce, non riesco a lavorare con windows!
Giuro: la prossima scheda grafica sara' NVidia!

Aggiunto link a playwebgl

2010-05-15T00:03:00.000-07:00

Ho aggiornato la lista dei link con il primo sito dedicato ai giochi fatti usando le webgl.
Toh... c'e' Quake 2....

La versione on-line di Dev. mi pubblica le prime due lezioni!!!

2010-05-11T02:02:00.001-07:00

http://www.infomedia.it/i/dev

...Dev. e' risorta on-line: grazie all'interessamento di Daniele Marsico mi pubblica le prime due lezioni!!!

Sottoscrivete! Garantirete la sopravvivenza ad un manipolo di appassionati di informatica e c.!

...alla fine anche le o3d saranno fatte con le webgl!

2010-05-07T22:28:00.001-07:00

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

Nata come una tecnologia "a plugin", per fare il 3d con javascript, le o3d iniziano ad essere convertite in webgl, aderendo a quelli che sono gli standard imposti dall'HTML5.

http://o3d.blogspot.com/2010/05/future-of-o3d.html

Nel blog ufficiale dicono che dovranno rinunciare, penso inizialmente, a molte cose che o3d faceva ma che webgl non riesce a fare. Riusciranno i nostri eroi dell'o3d a far girare il "Beach demo" anche con le webgl?

SceneJS 0.7

2010-03-30T04:02:00.000-07:00

www.scenejs.com

# Nuove funzionalita'

1. Automatic shader generation
2. A more complete lighting model
3. Layered textures
4. Frustum culling
5. Level-of-detail selection
6. Logging
7. VRAM cache management
8. Animated Textures
9. Fog

...e' stato aggiornato il sito, aggiunti video...

Da Chrome a Chromium

2010-03-18T09:11:00.000-07:00

Chrome di sviluppo non integrera' webgl: bisogna "passare" a chromium!
Ecco i links:

http://build.chromium.org/buildbot/continuous/win/LATEST/

http://build.chromium.org/buildbot/continuous/mac/LATEST/

http://build.chromium.org/buildbot/continuous/linux/LATEST/

News

2010-03-16T08:21:00.001-07:00

Nuova libreria webgl:

http://energize.cc/

Nuove

2010-03-14T21:22:00.000-07:00

E' passato un bel po' dal mio ultimo post, tempo nel quale mi sono fatto un po' di esperienza pratica con le webgl e con gli strumenti da usare per "smanettare" con essa.
Ho cambiato sistema operativo di lavoro (w7 rc mi si riavviava ogni 2h senza avvertirmi... e poi con w7 non si riesce a lavorare!): ora uso una kubuntu e qui, dopo aver naturalmente installato i driver per la mia ATI, uso firefox 3.7a3 e le webgl vanno una scheggia!
Forse ci sara' anche una rivoluzione lato programmazione server...

Comunque:
1- scaricare la 3.7a3 dai repositori mozilla
2- abilitare le webgl(andare nella barra degli indirizzi, digitare about:config, cliccare sul bottone che compare, in filter digitare webgl, e settare a true la variabile webgl.enabled_for_all_sites)
3- provare le ultime demo(GLGE, WebGLU, Cooperlicht)

Deve arrivare prossimamente anche l'aggiornamento delle scenejs: la 0.7 promette GRANDI cose!
Stavo pensando infatti, dora in poi di concentrarmi piu' sul lato applicativo piuttosto che quello della libreria: usero' quindi una libreria gia' fatta (scenejs) e sviluppero' poi un'applicazione web (rimane sempre il mio "sogno" di rifare teddy...).

Sorgenti demo webgl

2010-01-22T06:45:00.000-08:00

svn checkout https://cvs.khronos.org/svn/repos/registry/trunk/public/webgl

...
Se si esegue questo comando e' possibile scaricare i sorgenti delle demo registrate nel wiki ufficiale delle webgl, ovvero http://www.khronos.org/webgl/wiki/Main_Page .

Aggiornato anche il repositori con i sorgenti

2010-01-21T07:07:00.000-08:00

http://code.google.com/p/webgl-it/downloads/list

Ho tolto la google app fatta in java(usando eclipse) ed ho messo quella fatta con python.

Nuova google app

2010-01-21T05:43:00.000-08:00

http://webgl-it.appspot.com
Ecco la nuova google app, sviluppata in python.
Ora e' minimale, tanto per mettere on-line le prime due "lezioni"...:-)

Enjoy!

"Nuovi" link

2010-01-19T08:01:00.000-08:00

https://developer.mozilla.org/en/WebGL
Lezioni webgl dai Mozilla labs...

http://spidergl.org/
Altro framework javascript per manipolare a piu' alto livello le webgl.

Poi pensavo di gestire le google app non piu' usando java e gwt, ma usando invece python e pyjamas...

Aggiornata la google app

2010-01-06T06:52:00.000-08:00

Aggiornata la google app:
http://webgl-it.appspot.com

...ho dei problemi ad aggiornare il repository dei sorgenti :-(

Librerie interessanti

2010-01-04T20:39:00.000-08:00

http://www.glge.org/
http://www.scenejs.com/

Per ora segno i links...

Aggiunto sorgente del workspace di eclipse per la google app della lezione 1

2010-01-04T19:56:00.000-08:00

Qui trovate il webgl-workspace.zip con tutto il workspace di eclipse della google app della lezione 1(l'ho provato con chrome di sviluppo con le webgl abilitate... per chi non si ricordasse, per abilitarle si esegue chrome di sviluppo con:
chrome.exe --no-sandbox --enable-webgl
)
http://code.google.com/p/webgl-it/downloads/list

Questa e' la google app
http://webgl-it.appspot.com

...enjoy!

Buon 2010

2009-12-31T07:54:00.000-08:00

http://code.google.com/p/webgl-it/downloads/list

Ho aggiunto un nuovo pacchetto che contiene anche la seconda lezione che aggiunge un po' di colore alla scena.

Pensavo nell'anno nuovo di sperimentare qualcosa a piu' alto livello, come le c3dl http://www.c3dl.org/ e di utilizzare un ambiente di sviluppo un po' piu' "professionale" dei semplici file html e js, come Google App Engine, e magari provare anche a fare qualche RIA con le nuove GWT(traduzione simultanea: provare a fare qualche applicazione web con gli strumenti usati da Google...).
Ormai sul web hanno migrato quasi tutte le applicazioni desktop, un'applicazione 3d manca: magari sarebbe bello iniziare con la migrazione webgl di Teddy di Takeo Igarashi( http://www-ui.is.s.u-tokyo.ac.jp/~takeo/teddy/teddy.htm ).
Vabbe'... per ora un augurio di Buon 2010!

Consigli vari...

2009-12-27T23:41:00.000-08:00

Lo standard WebGL e' supportato nel progetto Chromium ed e' disponibile per i sistemi operativi Linux, Mac OS X, and Windows. Ecco alcuni indirizzi:

* Linux 32-bit: http://build.chromium.org/buildbot/continuous/linux/LATEST/
* Linux 64-bit: http://build.chromium.org/buildbot/snapshots/chromium-rel-linux-64/
* Mac OS X: http://build.chromium.org/buildbot/continuous/mac/LATEST/
* Windows: http://build.chromium.org/buildbot/continuous/win/LATEST/

Chromium deve essere eeguito da CLI per abilitare le webgl.

* Linux: ./chrome --no-sandbox --enable-webgl
* Mac OS X: Chromium.app/Contents/MacOS/Chromium --no-sandbox --enable-webgl
* Windows: chrome.exe --no-sandbox --enable-webgl

Ecco invece il link al codice delle lezioni:
http://code.google.com/p/webgl-it/downloads/list

Ecco il link al wiki ufficiale
https://www.khronos.org/webgl/wiki/Main_Page

Lezione 2: aggiungiamo un po' di colore...

2009-12-22T23:54:00.000-08:00

Nella seconda lezione vedremo come aggiungere un po' di colore alla nostra scena 3d; le uniche cose che cambieranno saranno gli shaders, l' initBuffers e la funzione drawScene. Il funzionamento della pipeline di rendering di webgl lo si puo' vedere nella seconda lezione sul sito originale. Qui mi addentrero' subito nel codice, spiegando qua' e la' come funziona la logica di visualizzazione.

the vertex shader.
ecco come cambia:
attribute vec3 aVertexPosition;
attribute vec4 aVertexColor;
uniform mat4 uMVMatrix;
uniform mat4 uPMatrix;
varying vec4 vColor;
void main(void) {
gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);
vColor = aVertexColor;
}

Abbiamo due attribute, VertexPosition and aVertexColor, due uniforms non variabili called uMVMatrix anduPMatrix, e un output rappresentato dalla variabile vColor.
Nella parte centrale dello shader calcoleremo la gl_Position (che e' implicitamente definita come una variabile per ogni vertex shader) esattamente come abbiamo fatto nella lezione precedente.

Una volta eseguito questo per ogni vertice, viene eseguita un'interpolazione per generare il fragments, i quali vengono passati allo fragmaents shader:

varying vec4 vColor;
void main(void) {
gl_FragColor = vColor;
}

Qui prendiamo la variabile in input vColor , che contieneil colotr elaborato dall'interpolazione lineare e lo ritorna subito come colore per questo fragment.

Ci sono altre due modifiche. La prima nell' initShaders , dove ora otteniamo i riferimenti di due attributi invece di uno:

var shaderProgram;
var vertexPositionAttribute;
var vertexColorAttribute;
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("Could not initialise shaders");
}
gl.useProgram(shaderProgram);
vertexPositionAttribute = gl.getAttribLocation(shaderProgram, "aVertexPosition");
gl.enableVertexAttribArray(vertexPositionAttribute);
vertexColorAttribute = gl.getAttribLocation(shaderProgram, "aVertexColor");
gl.enableVertexAttribArray(vertexColorAttribute);
}

Nella lezione precedente avevamo solo l'attributo per la posizione...

I cambiamenti nell' initBuffers consistono nel definire due variabili che conterranno il color buffer per il triangolo e per il quadrato:

var triangleVertexPositionBuffer;
var triangleVertexColorBuffer;
var squareVertexPositionBuffer;
var squareVertexColorBuffer;

Dopo avere creato il buffer che contiene la posizione del triangolo, specifichiamo anche il colore dei vertici:

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;
triangleVertexColorBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, triangleVertexColorBuffer);
var colors = [ 1.0, 0.0, 0.0, 1.0, 0.0, 1.0, 0.0, 1.0, 0.0, 0.0, 1.0, 1.0, ];
gl.bufferData(gl.ARRAY_BUFFER, new WebGLFloatArray(colors), gl.STATIC_DRAW);
triangleVertexColorBuffer.itemSize = 4; triangleVertexColorBuffer.numItems = 3;

E' evidente la principale differenza fra i buffer posizione e colore: mentre la posizione dei vertici e' definita da tre numeri(le coordinate x,y,z), il loro colore e' definito da quattro elementi(il colore rosso, il verde, il blue ed il canale alpha per la trasparenza).
E' ovvio che questa variazione influenza anche l' itemSize ...

Successivamente facciamo lo stesso per il quadrato ma questa volta useremo lo stesso colore per ogni vertice e per far questo useremo un ciclo:

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;
squareVertexColorBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, squareVertexColorBuffer);
colors = [];
for (var i=0; i < 4; i++) {
colors = colors.concat([0.5, 0.5, 1.0, 1.0]);
}
gl.bufferData(gl.ARRAY_BUFFER, new WebGLFloatArray(colors), gl.STATIC_DRAW);
squareVertexColorBuffer.itemSize = 4;
squareVertexColorBuffer.numItems = 4;

Ora modifichiamo drawScene per usare le nuove informazioni sui colori:

function drawScene() {
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
perspective(45, 1.0, 0.1, 100.0);
loadIdentity();
mvTranslate([-1.5, 0.0, -7.0]);
gl.bindBuffer(gl.ARRAY_BUFFER,triangleVertexPositionBuffer);
gl.vertexAttribPointer(vertexPositionAttribute,triangleVertexPositionBuffer.itemSize,gl.FLOAT,false,0,0);
gl.bindBuffer(gl.ARRAY_BUFFER,triangleVertexColorBuffer);
gl.vertexAttribPointer(vertexColorAttribute,triangleVertexColorBuffer.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(vertexPositionAttribute,squareVertexPositionBuffer.itemSize,gl.FLOAT,false, 0, 0);
gl.bindBuffer(gl.ARRAY_BUFFER,squareVertexColorBuffer);
gl.vertexAttribPointer(vertexColorAttribute,squareVertexColorBuffer.itemSize,gl.FLOAT,false,0,0);
setMatrixUniforms();
gl.drawArrays(gl.TRIANGLE_STRIP, 0, squareVertexPositionBuffer.numItems);
}

...thats all folks!
Ora abbiamo il colore nella nostra scena!

...si inizia!

2009-12-18T23:51:00.000-08:00

A differenza di altre tecnologie per fare 3d su web, WebGL non richiede l'istallazione di plugin.

Per poterne vedere le funzionalita' bisogna avere (per ora) delle particolari versioni dei browser utilizzati... ed una scheda grafica con accelerazione 3d.

In parole povere cosa vuol dire questo:

Se si possiede Internet Explorer bisogna rassegnarsi: per ora non c'e' supporto

Se si usa Firefox, WebGL funziona nelle release sperimentali (le nightly, o meglio o compilati giornalieri che presentano le ultime features implementate ma poco testate) ed esistono le versioni per Windows, Mac OS X, e Linux.

Se si usa Safari, WebGL funziona solo sui Mac.

Se si usa Chrome, come il sottoscritto, si puo' trovare il supporto per WebGL nel canale dello sviluppo, dove si possono scaricare le versioni sperimentali.

Non staro' qui a spiegare o descrivere come far funzionare i vari browser... le istruzioni le trovate nei siti del browser specifico!

Non lo faccio un po' per pigrizia (non ho voglia di tradurre e capire i vari settaggi da fare) e poi anche perche' mi voglio concentrare sull' aspetto piu' divertente: lo sviluppo! Ma vi rendete conto che prima c'era bisogno di un ambiente di compilazione ed ora viene tutto eseguito in tempo reale?!? E' vero, per cose complesse, per ora, il rischio e' quello di perdere il controllo, pero' questo, per me, e' un vincolo che verra' risolto presto.

In giro troverete anche molte demo fatte con le quali potrete sperimentare gia' alcune funzionalita' di webgl... ma senza che ve le abbia spiegate io, quindi iniziamo subito con il primo esempio, non molto accattivante ma introduce bene le funzionalita' proposte da questa tecnologia. Daro' per scontato che si abbiano gia' alcuni rudimenti sulla programmazione web, sulla scrittura di codice html e come funziona javascript (penso che non tocchero' l'argomento css...), sulla matematica usata(matrici, vettori, etc...).

<body onload="webGLStart()">
<canvas id="lesson01-canvas" style="border: none;" width="500" height="500">
</canvas>
</body>

Questo e' tutto l'html che, per ora, bisogna scrivere: tutto il resto e' javascript, o meglio webgl!

Ora vediamo com'e' implementata la funzione javascript webGLStart():

function webGLStart() { var canvas = document.getElementById("lesson01-canvas"); initGL(canvas); initShaders() gl.clearColor(0.0, 0.0, 0.0, 1.0); gl.clearDepth(1.0) gl.enable(gl.DEPTH_TEST); gl.depthFunc(gl.LEQUAL); initBuffers(); setInterval(drawScene, 15); }

In ordine la funzione esegue:

ottengo il riferimento all'oggetto canvas del mio documento html: questo e' il mio pannello dove "disegnero'" con le webgl

inizializzo l'ambiente webgl nel pannello

inizializzo gli shaders

dico che quando "pulisco" il pannello lo voglio nero

pulisco tutto quello che visualizzo

abilitiamo il depth_test e la funzione da usare

inizializziamo qualche buffer, che conterrano informazioni sulle primitive che disegneremo

impostiamo l'intervallo della chiamata alla funzione drawscene ogni 15 millisecondi

Come funzionano initGL ed initShaders lo vedremo piu' avanti e ci permetteranno di capire meglio come "lavora" la pagina. Adesso soffermiamoci dulle funzioni initBuffers e drawscene.

var triangleVertexPositionBuffer; var squareVertexPositionBuffer;

Prima di vedere la funzione dichiariamo due variabili che funzionano da buffer (in realta' webgl non usa delle variabili globali separate per ogni progetto, ma viene adottata questo approccio per semplificare le cose).

function initBuffers() { triangleVertexPositionBuffer = gl.createBuffer();

Creiamo il buffer che conterra' la posizione dei vertici, che non sono altro che punti in uno spazio 3d che ci permetteranno di disegnare la nostra scena. Il buffer per ora occuopa veramente poco spazio nella nostra scheda grafica: se mettiamo la posizione dei vertici nel nostro codice di inizializzazione e, successivamente, ridisegnamo e' come se dicessimo a webgl "disegna le cose che ti ho detto prima", e cio' ci permette di rendere il nostro codice veramente efficente(soprattutto se i vertici da pochi diventano decine o centinaia di migliaia)!

gl.bindBuffer(gl.ARRAY_BUFFER, triangleVertexPositionBuffer);

Qui specifichiamo che ogni operazione successiva che usera' il buffer operera' su quello specificato.

var vertices = [ 0.0, 1.0, 0.0, -1.0, -1.0, 0.0, 1.0, -1.0, 0.0 ];

Definiamo la posizione dei nostri vertici tramite una lista javascript.

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

Ora creiamo un oggetto WebGLFloatArray basato sulla nostra lista javascript e diciamo a webgl di usarla per riempire il buffer corrente, ovvero il triangleVertexPositionBuffer.

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

Ora settiamo due proprieta' del buffer, che ci serviranno di seguito per dire che i 9 elementi presenti nel buffer rappresentano 3 separate posizioni dei vertici(numItems), ognuno dei quali e' definito da tre numeri (itemSize).

Ora che abbiamoi definito il buffer per il triangolo, facciamo lo stesso per il quadrato.

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

Ora vediamo la drawscene():

function drawScene() { gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

Creiamo il canvas e prepariamolo per disegnarci qualcosa.

perspective(45, 1.0, 0.1, 100.0);

Qui settiamo la prospettiva con la quale visualizzare la scena. Di default webgl disegna gli oggetti che stanno in profondita' della stessa grandezza di quelli che stanno in primo piano, ovvero usa una vista ortogonale. Per ottenere un effetto diverso, ovvero oggetti sullo sfondo piu' piccoli rispetto a quelli in primo piano, dobbiamo specificare i settaggi della prospettiva usata. In questo caso stiamo dicendo che il field of view, ovvero l'asse verticale, e' di 45 gradi; il ratio(la proporzione) fra altezza e larghezza del nostro canvas e' 1:1, che non vogliamo vedere oggetti che distano piu' di 0.1 unita' dalla nostra viewport e con vogliamo vedere oggetti che distano piu' di 100 unita' (nb: a cosa corrisponde una unita'? cos'e' la viewport?con che orientamento ruoto?)

loadIdentity();

Ora specifichiamo il centro della scena. Con le OpenGL, quando si disegna una scena lo si fa specificando, per ogni oggetto la posizione e rotazione attuale, es."trasla di 20 unita' in avanti, ruota di 32 gradi e disegna un robot”. Questo e' molto utile, perche' si puo' incapsulare "disegna il robot" in una funzione.

Le informazioni sulla posizione e sulla rotazione sono gestite con una matrice, chiamata model-view matrix, e la funzione loadIdentity la setta con una mtrice identita' , in modo da essere pronti per moltiplicare traslazioni e rotazioni su essa.(ripeto, do per scontato anche la conoscenza di queste nozioni, me se ci sono domande...)

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

Una volta posizionati al centro del nostro spazio 3d, con la chiamata loadidentity, ci muoviamo 1.5 unita' a sinistra(ci muoviamo in senso negativo rispetto all'asse x, il primo valore specificato), e ci muoviamo di sette unita' in senso negativo rispetto all'asse z(il terzo valore specificato). Per tornare alla matematica, questa non fa altro che applicare una matrice di traslazione alla matrice identita'.

gl.bindBuffer(gl.ARRAY_BUFFER, triangleVertexPositionBuffer);

gl.vertexAttribPointer(vertexPositionAttribute, triangleVertexPositionBuffer.itemSize, gl.FLOAT, false, 0, 0);

Usiamo gl.bindBuffer per specificare il buffer da usare e chiamiamo il codice che deve operare su esso.

Qui selezioniamo un triangleVertexPositionBuffer, che dice a webgl che i suoi valori devono essere usati come posizioni dei vertici, usando itemSize per specificare che ogni vertice e' definito da tre numeri(x,y,z).

setMatrixUniforms();

Tutte le matrici non sono proprieta' di WebGL, o meglio, non sono create inizialmente con questa tecnologia. Quando, per esempio, si esegue mvTranslate , lo si fa nell'ambiente JavaScript. setMatrixUniforms trasforma il tutto nell'ambiente webgl.

Una volta fatto, webgl ha un array di numeri da usare come posizioni di vertici, e conosce la nostra matrice di trasformazione.

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

Ecco la chiamata principale che disegnera' la nostra primitiva! Il primo parametro dice che disegnero' dei triangoli, in questo caso uno, il terzo dice di usare il buffer creato prima, il secondo che deve partire dallo 0imo elemento per finire con il numItems-imo elemento(del buffer).

Ora facciamo il tutto per il quadrato.

mvTranslate([3.0, 0.0, 0.0])

Ricordiamoci che ci stiamo muovendo rispetto all'ultima matrice di trasformazione(quela che ci faceva spostare -1.5,0,-7!!!)

gl.bindBuffer(gl.ARRAY_BUFFER, squareVertexPositionBuffer);

gl.vertexAttribPointer(vertexPositionAttribute, squareVertexPositionBuffer.itemSize, gl.FLOAT, false, 0, 0);

setMatrixUniforms();

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

TRIANGLE_STRIP? Ma non era un quadrato? Beh, un quadrato e' in realta' fatto da due triangoli, no? In casi piu' complicati, come l'approssimazione di superfici, e' meglio usare come primitiva il triangolo, piuttosto che il quadrato,

}

Fine di drawscene!!!

Prossimamente aggiungero' file di esempio, mettero' link a risorse esterne.

Mi sono reso conto che ho dato per scontato davvero molte cose, dunque se avete domande... non esitate a farmele!

webgl

Pannello WebGL per Firefox

HTML 5 test (include verifica sulle funzionalita' webgl)

Webgl su vecchio hardware (ATI e Flash dovete morire!)

Aggiunto link a playwebgl

La versione on-line di Dev. mi pubblica le prime due lezioni!!!

Links

...alla fine anche le o3d saranno fatte con le webgl!

SceneJS 0.7

Da Chrome a Chromium

News

Nuove

Sorgenti demo webgl

Aggiornato anche il repositori con i sorgenti

Nuova google app

"Nuovi" link

Aggiornata la google app

Librerie interessanti

Aggiunto sorgente del workspace di eclipse per la google app della lezione 1

Buon 2010

Consigli vari...

Lezione 2: aggiungiamo un po' di colore...

...si inizia!