WebGL: 3D real time e OpenGL su HTML5

22 novembre 2010

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 Float32Array(vertices), gl.STATIC_DRAW);
  triangleVertexPositionBuffer.itemSize = 3;
  triangleVertexPositionBuffer.numItems = 3;
}

Qui vengono dichiarate le coordinate dei punti (x,y,z) che compongono i vertici della figura che si intende disegnare; essendo un triangolo avremo quindi 9 valori da specificare: tre per ognuno dei suoi tre vertici (se avessimo voluto disegnare un cubo il numero di valori da inserire sarebbe cresciuto a 8 vertici * 3 = 24). Questi punti sono poi memorizzati all’interno di un buffer che verrà utilizzato durante la fase di disegno.

function drawScene() {

  gl.viewport(0, 0, gl.viewportWidth, gl.viewportHeight);
  gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
  gl.bindBuffer(gl.ARRAY_BUFFER, triangleVertexPositionBuffer);
  
  gl.vertexAttribPointer(
    shaderProgram.vertexPositionAttribute,
	triangleVertexPositionBuffer.itemSize,
	gl.FLOAT, false, 0, 0);

  gl.uniformMatrix4fv(shaderProgram.pMatrixUniform, false,
                      new Float32Array([ 1,0,0,0, 
					                     0,1,0,0,
										 0,0,0,-1,
										 0,0,0,0]));

  gl.uniformMatrix4fv(shaderProgram.mvMatrixUniform, false, 
                      new Float32Array([ 1,0,0,0, 
					                     0,1,0,0,
										 0,0,1,0,
										 0,0,-2,0]));
  
  gl.drawArrays(gl.TRIANGLES, 0, triangleVertexPositionBuffer.numItems);
}

La funzione drawScene i occupa di gestire le operazioni necessarie per disegnare la scena sul canvas designato; nelle prime due righe del listato la scena viene resettata, poi il buffer contenente le informazioni a riguardo dei vertici del triangolo viene caricato nel contesto 3D e si provvede ad impostare i parametri richiesti dallo shader. In questa demo, per non eccedere nella lunghezza dell’esempio, le due matrici necessarie allo shader sono state gestite in modo statico attraverso due array, in applicazioni reali è molto comune modificare questi valori ad ogni iterazione di disegno, a fronte di variazioni del punto di vista o della posizione dell’oggetto sulla scena.

A questo punto la funzione drawArrays disegna i vertici presenti nel buffer invocando per ognuno di essi lo shader; è importante notare come l’oggetto gl per eseguire questa funzione utilizzi le informazioni accumulate attraverso le precedenti.

Visualizzando la pagina index.html in un browser abilitato alle estensioni WebGL, si dovrebbe poter ammirare un triangolo bianco su sfondo nero, a prova della corretta implementazione delle istruzioni WebGL.

Figura 1: Il triangolo disegnato

Il triangolo disegnato

Troppo complicato! …e se usassimo un framework?

Disegnare un triangolo bianco e statico è costato 60 righe di codice, escluso il file index.html: decisamente troppo! È abbastanza impensabile riuscire a gestire la complessità di una mappa di Quake II con delle API di questo livello. È proprio per questo che, intorno alle WebGL, si stanno già affacciando diversi framework che promettono di migliorare sensibilmente l’impatto con questa tecnologia. Un elenco completo è disponibile sulla Wiki ufficiale.

Tra i vari disponibili spicca SceneJS per la sua filosofia di implementazione che consente di descrivere con una sintassi simil-JSON l’intera scena, comprensiva di luci, camere e modelli.

Anche X3DOM è interessante e sembra essere il miglior candidato per l’utilizzo di WebGL in applicazioni all-pourpose soprattutto in virtù del suo approccio che consente di descrivere la scena usando un linguaggio di markup.

Se invece l’obiettivo è la produzione di un videogioco allora la scelta dovrebbe focalizzarsi su CopperLicht che dispone anche di un editor per lo sviluppo delle mappe.

Conclusioni

È importante sapere cosa succede dietro le quinte quando si utilizza una tecnologia; il più delle volte conoscere i meccanismi che la governano aiuta a risolvere in fretta problemi che altrimenti sarebbero difficilmente sanabili. WebGL non fa differenza e può essere un peccato di superficialità utilizzare uno dei framework elencati, senza prima essersi acclimatati un po’ con le API standard.

Detto questo le API WebGL si rivelano decisamente troppo complicate e laboriose per consentire il loro utilizzo direttamente all’interno di un progetto che sia più complesso di una demo. A questo si aggiunge una curva di apprendimento particolarmente ripida che configura quindi l’uso di un framework come scelta preferenziale, soprattutto per chi proviene da un ambiente di sviluppo Web e non ha esperienza con tecnologie di questo tipo.

Nonostante queste difficoltà non è improbabile che le WebGL divengano parte integrante dei siti e dei portali Web del futuro, trovando anche posto nel panorama dello sviluppo videoludico, magari in campo mobile, soprattutto in virtù della loro attinenza con le OPENGL ES2.0.

Se vuoi aggiornamenti su WebGL: 3D real time e OpenGL su HTML5 inserisci la tua e-mail nel box qui sotto:
 
X
Se vuoi aggiornamenti su WebGL: 3D real time e OpenGL su HTML5

inserisci la tua e-mail nel box qui sotto:

Ho letto e acconsento l'informativa sulla privacy

Acconsento al trattamento di cui al punto 3 dell'informativa sulla privacy