Salve a tutti! Questa sarà la prima di una serie di articoli sul mondo del WEBGL. Tale materiale non ha la pretesa di essere esaustivo su tale argomento ne di farvi apprendere tutti i concetti che ci stanno dietro: tramite piccoli esempi invece cercheremo di darvi un infarinatura e di darvi qualche concetto per interfacciarvi in un successivo momento su questo ambiente in costante evoluzione.
Premetto che tale documento non sarà esente da imprecisazioni o da dichiarazioni passibili di critica o parzialmente errate ma l’obbiettivo rimane quello di far apprendere una certa dimestichezza anche ad utenti con pochie nozioni, indi sarò costretto a passarci sopra.

Prima di iniziare, controlliamo di possedere i requisiti minimi:

Prerequisiti

1) Software: per quanto riguarda lo sviluppo di applicazioni grafiche web ci serviranno poche cose:

− un web browser con webgl abilitato, tipo Chromium.

− Notepad o un altro editor per creare le nostri pagine html e js ( per il momento sto usando Notepad+++ e mi trovo più che bene).

Librerie:per il nostro progetto basterà scaricare alcuni file .js ( più precisamente glUtils.js ,Sylvester.js e MatriUtilityFunc.js ) che potrete trovare direttamente su questo link .

2) Conoscenze: non sono richieste grandi conoscenze nell’ambito della programmazione ; sono gradite skill riguardanti l’uso di Javascript ed i fondamenti della Grafica ( soprattutto Opengl), ma cercheremo di rimanere il più generali possibili, adottando anche un registro piuttosto basso.

Cosa è WEBGL?
Praticamente è un contesto che permette di utilizzare funzionalità di grafica 3D senza utilizzo di altri programmi o plug-in se non il web browser. Se dovessimo schematizzare molto banalmente il nostro progetto grafico, non è nient’altro che una serie di pezzi di codice in Javascript dove descriviamo al browser cosa disegnare e come l’azione deve svolgersi, queste informazioni ( utilizzando matrici , strutture dati e buffer) vengono poi convertire in informazioni grafiche e rappresentate dentro un’area html della nostra pagina.

La struttura perciò si basa su quattro tipologie di file:

1) HTML:pagine dove rappresentiamo la scena
2) Javascript: dove risiede il codice che descrive la logica dell’applicazione
3) XML o TXT: sorgenti dove troviamo alcune informazioni riguardanti certi oggetti della scena od informazioni su alcune configurazioni
4) Texture: immagini con cui “tappezzeremo ” i nostri oggetti grafici

Dopo aver configurato il nostro browser,possiamo partire con il nostro primo esempio.

ESEMPIO UNO: DISEGNARE UN TRIANGOLO
Il nostro obiettivo è ottenere una “finestrella” dentro la pagina dove al centro disegniamo un triangolo dalle dimensioni date, come nell’immagine seguente:

esempio01

Prima di tutto creiamo un nuovo file con il nostro notepad e inseriamo il seguente codice HTML:

<html>

<head>

<meta http-equiv=”content-type” content=”text/html; charset=ISO-8859-1″>
//qua carico I file javascript che mi servono

</head> <body onload=”start()”>

<canvas id=”Mycanvas” width=”320″ height=”240″></canvas>

</body>

</html>

Salviamo il documento come pagina HTML, per esempio index.html .
Analizziamo ora il codice che abbiamo inserito:
Subito notiamo l’oggetto canvas , che è un elemento appartenente all’HTML5, il nuovo standard. Cosa fa questo codice?Crea una sorta di pannello di dimensioni prefissate ( width ed height in pixel); questo oggetto gode di alcune proprietà interessanti, tra cui quello di semplificarci la vita durante la creazione del gioco. Noi infatti disegneremo dentro di esso ed alcune problematiche riguardanti il Rendering ( cioè la resa grafica) saranno demandati a lui.

Notiamo anche onload=”start()”. Questo codice non fa altro che obbligare il browser ad invocare ad ogni refresh della pagina una funziona Javascript chiamata start().

Cosa farà questa funzione? Praticamente tutto, da esso infatti noi partiremo a disegnare ogni cosa! Tale funzione rappresentail core di ogni progetto e noi la introdurremo schematizzando quali sono le operazioni base che esegue:

function: start()
{
1. ricavo informazioni dal canvas
2. Faccio una prima inizializzazione di tutto il progetto.
3. Inizializzo gli Shader( pezzi di codice molto utili, dopo spieghiamo)
4. Inizializziamo i buffer( strutture dove salviati i dati importanti)
5. Inizializziamo le texture( importiamo e prepariamo le immagini per essere applicate!)
6. Definizione degli input( definisco i modi con cui l’utente si interfaccia all’applicazione).

Queste prime 6 operazioni fanno parte dell’ INIZIALIZZAZIONE di WEBGL, nel senso che vengono eseguite solo una volta..

Le altre azioni fondamentali per progettare un gioco sono:

7. Modifico scena per colpa di eventi
8. Modifico scena per colpa di input dell’utente
9. Disegno della scena

Queste operazioni fanno parte della ROUTINE di WEBGL, nel senso che vengono eseguite CONTINUAMENTE ,magari dopo intervallo di tempo predefinito!

}

Iniziamo ora a preparare la funzione start, implementando una sua versione semplificata tanto per
capire:

<script type=”text/javascript”>
function Start()
{
var canvas = document.getElementById(“Mycanvas”);
initGL(canvas);
initShaders();
initBuffers();
setInterval(tick, 15);
}
function tick()
{
drawScene();
}
</script>

la prima istruzione della funzione(document.getElementById(“Mycanvas”) ) ha il compito di recuperare un riferimento al canvas, dando come argomento il suo identificativo definito nel omonimo tag HTML nel codice della pagina ( id=”Mycanvas”) ; successivamente inizializziamo il canvas tramite l’apposita funzione initGL, inizializziamo gli shader con initShader e i buffer usando initBuffer. Il setInterval è una funzione Javascript assai utile ai nostri scopi: praticamente chiama ogni 15 millisecondi la funzione tick,che rappresenta la routine del WEBGL, cioè le funzioni che noi dovremmo chiamare ogni tot tempo. Per il momento dentro tick mettiamo solo DrawScene che disegna una scena statica, dopo inseriremo animazioni e quant’altro….

Il prossimo argomento sarà gli Shader, una parte piuttosto importante e delicata, per tale ragione è preferibile affrontarli nella prossimo articolo, onde evitare di mettere troppa carne sul fuoco. Se non riuscite a resistere e volete vedere in anteprima il risultato del nostro lavoro, cliccare sul link sottostante.

Lezione 1

Tutto il materiale relativo all’articolo corrente e a quelli che seguiranno sono e saranno poi disponibili in questo link.Grazie per l’attenzione!

Andrea