Warning: mysql_query(): Access denied for user ''@'localhost' (using password: NO) in /data/vhosts/pralevis.com/httpdocs/wordpress/wp-content/plugins/gwolle-gb/functions/gwolle_gb_get_settings.func.php on line 26

Warning: mysql_query(): A link to the server could not be established in /data/vhosts/pralevis.com/httpdocs/wordpress/wp-content/plugins/gwolle-gb/functions/gwolle_gb_get_settings.func.php on line 26

Warning: mysql_num_rows() expects parameter 1 to be resource, boolean given in /data/vhosts/pralevis.com/httpdocs/wordpress/wp-content/plugins/gwolle-gb/functions/gwolle_gb_get_settings.func.php on line 27

Warning: mysql_query(): Access denied for user ''@'localhost' (using password: NO) in /data/vhosts/pralevis.com/httpdocs/wordpress/wp-content/plugins/gwolle-gb/functions/gwolle_gb_get_settings.func.php on line 26

Warning: mysql_query(): A link to the server could not be established in /data/vhosts/pralevis.com/httpdocs/wordpress/wp-content/plugins/gwolle-gb/functions/gwolle_gb_get_settings.func.php on line 26

Warning: mysql_num_rows() expects parameter 1 to be resource, boolean given in /data/vhosts/pralevis.com/httpdocs/wordpress/wp-content/plugins/gwolle-gb/functions/gwolle_gb_get_settings.func.php on line 27
Webgl :Andrea Pra Levis

Archive for the ‘ Webgl ’ Category

Salve a todos!
A causa di impegni lavorativi ho dovuto congelare per un bel pò l’attività del blog, cosa che mi ha addolorato non poco; ultimamente, spinto da un paio di mail sull’argomento, ho deciso di provare ancora a scrivere articoli, non potendo però garantire una cadenza regolare.

Questa quindicesima lezione sarà molto semplice e parlerà di un argomento assai per certi tratti banale rispetto ai predecessori ma che mi è stato portato all’attenzione tempo fa.

“Come possiamo in WEBGL disegnare un cerchio?”

Non esistono funzioni primitive per eseguire tale operazione ma con le nostre conoscenze attuali possiamo ottenere comunque un risultato sufficientemente discreto senza appesantire troppo lo script.

Read the rest of this entry

Salve a tutti,
in questa lezione proporremo un nuovo metodo per la gestione dei modelli dinamici; inoltre presenteremo un nuovo esempio di ambientazione 3D realizzabile tramite  gli script javascript che rilasciamo di volta in volta ( oltre ad aver finalmente fatto un pò di pulizia della parti obsolete del codice che tanto male non fa 😉 ).

Prima di tutto analizziamo la questione dell’animazione;
Read the rest of this entry

Salve a tutti,
con questo articolo mostreremo un metodo piuttosto pratico per importare i propri modelli 3D dentro la nostra applicazione webGL , utilizzando l’ultima versione delle librerie e l’inseparabile Blender ( versione 2.60).

Inutile affermare l’importanza di tale argomento:i giochi odierni puntano sull’introduzione di oggetti sempre più realistici e complessi nella nostra scena; nell’ultima lezione avevamo mostrato due classi javascript create per l’occasione ( ele_sta() e ele_din() ) ma avevo già anticipato che tale soluzione risultava lenta e pesante per il nostro pc.

Per tale motivo ho sviluppato uno script semplice e due nuove classi per alleggerire tutta l’operazione dandoci risultati più che gradevoli.

Read the rest of this entry

Salve a tutti!
In questo articolo presentiamo un metodo per inserire nella nostra scena modelli 3D e creare un’animazione di quest’ultimo. Partiamo prima di tutto con l’utilizzo delle classi, assai utili per dare struttura al nostro codice.
In javascript ci sono alcuni metodi per creare delle classi, uno dei più semplici è utilizzare una funzione.
Grazie a questo espediente, automatizzeremo la creazione dei buffer e il disegno di ogni singolo elemento della scena.
(la nostra funzione DrawScene perciò si semplificherà parecchio e aggiungere nuovi elementi sarà nettamente più semplice, basterà istanziare un elemento nella fase di initBuffer e chiamare il metodo per disegnarlo nella Draw).

Read the rest of this entry

Salve a tutti!
In questa lezione modificheremo l’esempio della lezione precedente ( la casa in 3D) , introducendo anche una gestione primitiva dei suoni.

Agiremo su tre punti principali:
-Azioni di movimento dell’utente
-Limitazione degli spazi
-Introduzione ai suoni

Read the rest of this entry

Salve a tutti!
Finalmente è finito il primo ciclo delle lezioni sul webgl, il livello base. A questo punto possiediamo tutte le conoscenze base per realizzare la nostra prima ambientazione 3D.

Obiettivo: creare una stanza 3D con texture dove il giocatore potrà spostare la telecamera sia con la tastiera che con le frecce

 

(una sorta di sparatutto in prima persona molto primitivo).

Mostreremo due esempio: il primo, che tratteremo in questa lezione, sarà una versione base ma funzionante, nella prossima arricchiremo il nostro gioco per rendere il tutto ancora più realistico.

Read the rest of this entry

Salve a tutti,

Questo articolo tratterà uno degli argomenti più ostici ed interessanti del mondo 3D: l’illuminazione.
Per capire l’importanza di un tale argomento, prendiamo una nostro precedente esempio ,lesson04b.html , e facciamo un piccolo cambiamento: mettiamo lo stesso colore ad ogni faccia del cubo.
Facciamo partire lo script e noteremo un layout simile a quello mostrato dalla seguente foto:

Read the rest of this entry

Salve a tutti,
questo articolo sul webgl tratterà un argomento assai importante per programmare un eventuale videogioco: gli user input, cioè studieremo i metodi base per “raccogliere” gli input dell’utente ed elaborarli per fare variare la nostra scena. Al momento ci occuperemo dei due tipi di input più utilizzati dalle applicazioni grafiche: i Keyboard Input ( tastiera) e i Mouse Input.Prenderemo come esempio il classico cubo 3d dell’articolo precedente, mostreremo come la rotazione varierà a seconda degli input che gli verranno dati.

Read the rest of this entry

Salve a tutti,
in questo articolo analizziamo la questione delle Texture.
Per dare infatti più realismo alla scena e contemporaneamente arricchirla, una pratica molto usata è quella di “incollare” sulle nostre superfici delle immagini, per esempio per realizzare la simulazione di un prato o di un cielo .
Nell’esempio che mostreremo infatti avremmo a che fare con il cubo rotante dell’esempio lesson04b dell’articolo precedente, ma stavolta, al posto della gestione dei colori , ci preoccuperemo della gestione delle texture, leggermente più complessa ma fondamentale per realizzare applicazioni graficamente appaganti.
Il nostro primo obiettivo sarà caricare l’immagine dentro una variabile globale, in modo tale da poterla richiamare nella fase di disegno. Ovviamente l’introduzione di questa funzionalità provocherà modifiche su molte delle funzioni della’applicaione: oltre che recuperare la nostra immagine infatti, dovremmo assegnare ad ogni vertice delle coordinate 2d (x;y) lungo la superficie della texture ( parallelamente anche quando gestiamo i pixel della nostra scena 2d dovremmo assegnare ad ogni porzione di spazio delle coordiante pixel della nosta texture). Il motivo di queste informazioni appare banale se ipotizziamo di dover tappezzare un poster sopra un quadretto magari più piccolo: dobbiamo decidere quale porzione della texture sarà attaccata alla superficie considerata. Altrettante informazioni da gestire saranno ad esempio la resa grafica della texture se ci allontaniamo dall’oggetto o viceversa.

Read the rest of this entry

Salve a tutti! In questo articolo cercheremo di disegnare il nostro prima oggetto interamente 3D ( un insieme di poligoni).

QUARTO ESEMPIO: CUBO COLORATO
Finalmente abbiamo le basi delle basi per affrontare la nostra prima applicazione 3D. Questo introdurrà un aumento della complessità del codice e l’inevitabile necessità di utilizzare tecniche efficienti per il disegno, visto che il numero di vertici aumenterà inesorabilmente.

Per disegnare, un cubo semplice monocolore al momento non richiederebbe molte modifiche: basterebbe passare alla sottofunzione drawArrays un array con gli otto punti necessari :

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

Per disegnare, tale funzione fa un ciclo e aggiunge un vertice alla volta tracciando  nella scena i triangoli ( per disegnare oggetti di forma varia, un buon metodo è suddividere il tutto in tanti triangolini che singolarmente son facili da disegnare) che collegano il vertice corrente dai precedenti.
Tale metodo funziona, ma,in caso di facce multicolore intrinsecamente porta ad una complicanza: poichè ogni vertice appartiene a tre facce diverse del nostro dato, egli dovrebbe possedere come attributo tre colori possibilmente diversi. Questi ed altri problemi ci costringono a valutare un ‘altra strada.

Read the rest of this entry