docARTICOLO01: Presentazione del WEBGL e prima parte dell
download 
Reclamo Transcript
ARTICOLO01: Presentazione del WEBGL e prima parte dell
ARTICOLO01: Presentazione del WEBGL e prima parte dell'esempio 01
Intro
Salve! 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.
Premessa:Tutto il materiale relativo all'articolo corrente e a quelli che seguiranno sono e saranno poi disponibili
in questo link.
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 questolink.
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:
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 usandoinitBuffer. Il setInterval è una funzione Javascript
assai utile ai nostri scopi: praticamente chiama ogni 15 millisecondi la funzionetick,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
