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.

L’idea è elementare quanto efficace: visto che il cerchio è composto da un insieme infinito di punti che ovviamente non possiamo disegnare tutti, cercheremo di “approssimare” tale figura come un insieme di n triangoli, dove n è un numero piuttosto grande!Come possiamo fare ciò? Passeremo il raggio del cerchio che ci interessa e questo fatidico numero n ad una funzione, MakeCircle(…), che calcolerà n punti equidistanti posti sul cerchio e con essi realizzerà n triangoli che darà in pasto alla solita funzione DrawScene. E’ una soluzione rozza ma i primi videgiochi usavano trucchi simili per riprodurre delle superfici curve senza rovinare troppo le prestazioni.Mostriamo un piccolo disegno esemplificativo:

Già con n = 6 possiamo notare una certa approssimazione alla forma di un cerchio: con un valore di n adeguato alla dimensioni del raggio, riusciremo ad ottenere una forma abbastanza curvilinea da poterla considerare accettabile.Vediamo la funzione makeCircle:

function makeCircle(rag,punti,color){
raggio=rag;
num_punti = punti;
vertices = [];
colors = [];
var alfa = 0;
gl.bindBuffer(gl.ARRAY_BUFFER, triangleVertexPositionBuffer);

for (i=0;i {
vertices= vertices.concat([ raggio * Math.cos(alfa*Math.PI/180), raggio * Math.sin(alfa*Math.PI/180) , 0.0]);
alfa += 360 / num_punti ;
vertices= vertices.concat([ raggio * Math.cos(alfa*Math.PI/180), raggio * Math.sin(alfa*Math.PI/180) , 0.0]);
vertices= vertices.concat([ 0.0, 0.0, 0.0]);
}
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
triangleVertexPositionBuffer.itemSize = 3;
triangleVertexPositionBuffer.numItems = num_punti * 3;
gl.bindBuffer(gl.ARRAY_BUFFER, triangleVertexColorBuffer);

for (i=0;i gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(colors), gl.STATIC_DRAW);}

Le prime righe non sono nient’altro che inizializzazioni e assegnazioni che ci serviranno durante lo script.
La prima cosa da notare è la variabile alfa: esso rappresenta l’ampiezza dell’angolo al centro del cerchio compreso tra i due lati uguali di ogni triangolo.
Sceglieremo n punti sul cerchio che siano tutti equidistanti dal loro precedente e da quello che segue, in modo tale che abbiamo tutti triangolo uguali fra loro.
Questo ci permetterà di calcolare con facilità i punti e, a sua volta, di avere tutti i vertici necessari per i nostre forme primitive.

for (i=0;i {
vertices= vertices.concat([raggio * Math.cos(alfa), raggio * Math.sin(alfa) , 0.0]);
alfa += 2 *Math.PI / num_punti ;
vertices= vertices.concat([raggio * Math.cos(alfa), raggio * Math.sin(alfa) , 0.0]);
vertices= vertices.concat([0.0, 0.0, 0.0]);
}

In questa istruzione, ad ogni ciclo dell’istruzione for inseriremo i tre vertici per disegnare un triangolo; essendo un esempio semplificato , notiamo che la componente z vale sempre 0 ( lavoriamo solo su in piano), inoltre uno dei punti è sempre il centro del cerchio. L’angolo alfa, che viene incrementato ad ogni giro per poter trovare il punto successivo sull’arco, è calcolato in radianti visto che le funzioni sin e cos non lavorano direttamente con i gradi.

for (i=0;i<num_punti * 3;i++) colors=colors.concat(color);

Questo ciclo for la usiamo per riempire l’array dei colori: poichè il numero dei punti in totale è pari al triplo dei numero dei triangoli, concateneremo fra loro 3 * n array color.

Aumentando il numero n , si potrà notare quanto il risultato si approssimi sempre di più al tanto agognato cerchio; per dimostrare ciò, nell’esempio ho aggiunto tramite la libreria JQuery delle slider con cui variare i tre parametri di input della makeCircle(), cioè il colore, il raggio ed il numero dei punti.
In questo modo potremo notare che con un raggio pari a 1, già un n = 35 il risultato è ottimo. Provate l’esempio per credere(link)!

Per potere vedere scaricare il codice che è stato presentato nell’articolo ( lo trovate come lesson13 e potete scaricare il pacchetto completo lesson13.zip), collegarsi al solito repository Lab .

Grazie per l’attenzione,

Andrea

Obiettivo: realizzare un semplice form con un test captcha per aumentare la sicurezza del sito ed individuare eventuali bot.

Il progetto si comporrà sostanzialmente di due file: nel primo , creeremo l’immagine captcha utilizzando le funzioni base php per gestire le immagini ( captcha.php), la seconda conterrà il form con dentro l’immagine captcha e farà il controllo che il codice immesso sia corretto (form.php).

Il Captcha
Ci sono svariati criteri per creare una immagine di test sicura; noi mostremo un metodo semplice per creare una piuttosto randomica; nel nostro esempio tale immagine conterrà infatti una semplice stringa alfanumerica casuale: a sua volta tale stringa sarà “colorata” con due colori RGB diversi e noi chiederemo che venga inserito solo una sequenza  di un data colore. Per ulteriore scrupolo anche la dimensione della sequenza giusta ha una lunghezza che spazia in un dato range.
Iniziamo a vedere il codice:

<?php
session_start();
$my_img = imagecreate( 150, 40 );
$background = imagecolorallocate( $my_img, 255, 255, 255 );
$text_colour_correct = imagecolorallocate( $my_img, 0,255, 0 );
$text_colour_wrong = imagecolorallocate( $my_img, 255,0,0 );

…

?>

Prima di tutto abilitiamo le sessioni in php  visto che dovremmo salvare da qualche parte il codice captcha da controllare.

imagecreate ci permette di creare ed inizializzare le dimensioni della nostra immagine di controllo ( per il momento un 150×40 basterà).Le tre variabili successive saranno i tre diversi tipi di colori che useremo nella nostra applicazione:

1- il colore di sfondo (bianco)

2- il colore del testo corretto che si dovrà inserire ( scegliamo un verde)

3- il colore del testo sbagliato che non dovremo assolutamente inserire ( rosso)

…

$length_total_string=10;
$length_correct_string=mt_rand(4,8);
$alphas = range(‘A’, ‘Z’);
$numeric=range(0,9);
$alphanumeric=array_merge($alphas,$numeric);
$string_correct=”";
$string_wrong=”";
$colors= array();

for($i=0;$i<$length_total_string;$i++)
{
if($i<=$length_correct_string)
$string_correct.=$alphanumeric[mt_rand(0,35)];
else
$string_wrong.=$alphanumeric[mt_rand(0,35)];
}

…

Questo rappresenta il cuore dello script: definiamo con $length_total_string la lunghezza della stringa totale ,mentre con $length_correct_string scegliamo randomicamente la lunghezza della sequenza corretta , che può spaziare tra 4 e 8 e dovrà ovviamente essere inferiore al valore di  $length_total_string.

Successivamente creiamo l’ array $alphanumeric contenente sia caratteri alfabetici che numeri , in modo tale che le sequenze che verranno generate siano le più variegate possibili . Nel ciclo for infine creiamo le due sequenze alfanumeriche: prima riempiamo la stringa corretta fino alla lunghezza desiderata, poi inseriamo valori in quella sbagliata.

…

if(mt_rand(0,1)==1)
{
imagestring( $my_img,5,3,10,$string_correct,$text_colour_correct );
imagestring( $my_img,5,12+9*$length_correct_string,10, $string_wrong,$text_colour_wrong );
}
else
{
imagestring( $my_img,5,3, 10,$string_wrong,$text_colour_wrong );
imagestring( $my_img,5,9*($length_total_string-$length_correct_string)-6,10,$string_correct,$text_colour_correct );
}
$_SESSION['captcha_code']=$string_correct;
header( “Content-type: image/png” );
imagepng( $my_img );

imagecolordeallocate( $text_colour_correct);
imagecolordeallocate( $text_colour_wrong );
imagecolordeallocate( $background );
imagedestroy( $my_img );

?>

imagestring è la funzione adibita a scrivere il testo dentro l’immagine: useremo queste per scrivere sull’imagine sia il testo corretto che  quello erroneo. Per evitare che la posizione delle stringhe non sia sempre uguale, anche l’ordine di scrittura è randomico : in tale modo non si può prevedere quale delle due stringhe ( corretta o falsa ) sarà la prima partendo da sinistra.  Il valore poi da controllare sarà salvato nella variabile di sessione $_SESSION['captcha_code'] così da permettere il controllo successivamente.

Le ultime funzioni servono per deallocare le variabili usate e per gestire la pagina php come un ‘immagine di tipo png.Terminato ciò, finalmente possiediamo la nostra immagine captcha che salvaremo nel file catpcha.php.

Il Form ed il Controllo

Ultima fase del nostro script sarà quello di creare il form per l’inserimento dei dati e il controllo del codice di sicurezza; apriamo un altro file php ed incolliamo il codice seguente:

<?php
session_start();

if(isset($_SESSION['captcha_code']) && isset($_POST['code']) && $_POST['code']!=”" && isset($_POST['user']) && $_POST['user']!=”")
{

if (strtolower($_SESSION['captcha_code']) == strtolower($_POST['code']))
echo “Benvenuto “.$_POST['user'];
else
echo “Benvenuto Bot”;

}
?>

<form method=”post”>
<table>
<tr><td>User</td>
<td><input type=”text” id=”user” name=”user” /></td></tr>
<tr><td> Captcha: Inserire la stringa verde<br> che vedi nell’immagine a fianco</td>
<td><img src=”captcha.php” /><br><input type=”text” id=”code” name=”code” /></td></tr>
<tr><td><input type=”submit” value=”Invia” /></td></tr>
</table>
</form>

Notiamo la semplicità del codice: il form è composto da due campi input; nel primo l’utente può inserire una stringa per identificarlo, mentre nella seconda comparirà la nostra immagine di captcha ed un campo da riempire con la stringa verde che comparirà. Per richiamare la nostra immagina captcha è bastato mettere come source il nome stesso del file php  ( tanto abbiamo inserito la funzione che obbliga il server a trattarla come un’immagine png). Cliccando su Invia, verrà creata una richiesta POST indirizzata alla medesima pagina di prova.

Infine, verrà controllato che il valore inserito dall’utente sia lo stesso salvato precedentemente nell’array di Sessione mentre creavamo l’immagine. In caso positivo, ci saluterà con il nome da noi inserito, viceversa il codice di sicurezza ci definirà bot.

Il codice è liberamente scaricabile nel solito repositoy Lab oppure cliccando direttamente sul link sottostante. Se avete dubbi o perplessità, non esitate a chiedere.
Grazie per il tempo concessomi, alla prossima!

Form Login per Joomla

Apl

Obiettivo: realizzare un semplice form compatibile con logica Joomla che analizzi le credenziali immesse dall’utente e che permetta il salvataggio dei dati utente nella sessione.

La versione di Joomla che attualmente utilizzeremo è la 1.7 ma tale script è compatibile anche con le versioni successive.

Il Primo passo è quello di realizzare il form: poichè è un operazione assai standard che ho più volte esplicato su questo blog, mi limiterò a copia e incollare il codice.

<form method=”post” action=”">
<table>
<tr><td><b>Username:</b></td><tr><tr><td><input type=”text” name=”username” id=”username” /> </td></tr>
<tr><td><b>Password:</b></td><tr><tr><td><input type=”password” name=”password” id=”password” /> </td></tr>
<tr><td><input type=”submit” value=”Login” /></td></tr>
</table>

</form>

L’unici di considerazioni che voglio fare è che abbiam deciso di utilizzare il metodo POST per il passaggio delle informazioni, inoltre l’attributo action del form è stato volutamente lasciato vuoto in modo tale che venga richiamata la pagina corrente ( metteremo infatti la logica php nella stessa pagine del form ).

Sempre nella medesima pagina, andiamo all’inizio ed inseriamo questo codice php :

<?php
define( ‘_JEXEC’, 1 );
define(‘JPATH_BASE’, dirname(__FILE__) );
define( ‘DS’, DIRECTORY_SEPARATOR );

require_once ( JPATH_BASE .DS.’includes’.DS.’defines.php’ );
require_once ( JPATH_BASE .DS.’includes’.DS.’framework.php’ );
require_once (JPATH_BASE .DS. ‘libraries’ .DS. ‘joomla’. DS. ‘user’ .DS. ‘authentication.php’);

$mainframe =& JFactory::getApplication(‘site’);
$mainframe->initialise();
…

Questo è il pezzo di codice fondamentale per inizializzare una pagina php in Joomla, inoltre notiamo le tre chiamate require_once necessarie per sfruttare le librerie base e le funzioni da utilizzare per l’autenticazione.
Infine possiamo inserire lo script per il controllo delle credenziali e l’inizializzazione delle variabili di sessione:

…
if(isset($_POST['username']) && isset($_POST['password']))
{

$credentials = array(
‘username’ => $_POST['username'],
‘password’ => $_POST['password']);

$options = array();
$authenticate = JAuthentication::getInstance();
$response = $authenticate->authenticate($credentials, $options);
if ($response->status === JAUTHENTICATE_STATUS_SUCCESS)
{
$user = JUser::getInstance($_POST['username']);
$_SESSION['__default']['user']=$user;
}
else
echo “Username e/o Password sbagliati”;
?>

}

Il codice è molto semplice e si commenta quasi da solo: nel primo IF controlliamo che l’utente abbia inserito qualche valore nelle due textbox.Superato questo, viene creato l’array con le credenziali e viene dato in pasto ad un metodo della classe Joomla $authenticate: controllando lo stato della classe che ci ritornerà, potremmo sapere se le credenziali sono state riconosciute oppure no.
In caso di riconoscimento positivo, sarà sufficiente recuperare la classe JUser grazie allo username e salvarla dentro una particolare variabile dell’Array $_SESSION: d’ora in poi il nostro utente sarà correttamente loggato e potrà navigare sul nostro sito Joomla senza alcun problema.

Il codice è liberamente scaricabile nel solito repositoy Lab oppure cliccando direttamente sul link sottostante. Se avete dubbi o perplessità, non esitate a chiedere.
Grazie per il tempo concessomi, alla prossima!

Form Login per Joomla

Apl

Andrea

Obiettivo: realizzare un app meteo che mostri le condizioni del tempo attuale e future di una data località passata come input.

Ovviamente tale oggetto necessiterà di una connessione su Internet per poter prelevare i vari dati sul meteo da mostrare all’utente; inoltre non viene richiesto il salvataggio di alcun dato ( niente Database SQLite o salvataggio in sharedPreferences o altre strutture dati), per cui la struttura di tale progettto sarà davvero semplice.

A grandi linee i passaggi per ottenere tali informazioni sono assai semplici: ci basterà creare un HttpClient,passarli l’url con dentro l’informazione sulla località , eseguire una richiesta ed elaborare i dati che il server di Yahoo ci invierà come risposta. Di sotto riporto la funzione solitamente usata per lo scopo:


public InputStream getJSONData(String url){
DefaultHttpClient httpClient = new DefaultHttpClient();
URI uri;
InputStream data = null;
try {
uri = new URI(url);
HttpGet method = new HttpGet(uri);
HttpResponse response = httpClient.execute(method);
data = response.getEntity().getContent();
} catch (Exception e) {
e.printStackTrace();
}

return data;
}

Se siete già andati a leggere il foglio delle specifiche delle APi di Yahoo, l’indirizzo a cui fare la richiesta è:

http://weather.yahooapis.com/forecastjson?w=’woeid_number’&u=c

il parametro GET ‘u’ serve solo per decidere in che formato ricevere la temperatura ( Farenheit o Celsius, al momento preferisco la seconda opzione).
Notiamo nell’indirizzo la parola chiave forecastjson: grazio a ciò riceveremo i dati secondo la Standard Json, inizialmente nato per Javascript , ora è praticamente usato come sostituto dell’XML.
Ed il parametro woied_number? Esso è un identificatore unico usato per definire la località.

Il problema attualmente da risolvere è calcolare tale numero in relazione alla località inserita dall’utente.
Uno dei possibili metodi è utilizzare una seconda API di Yahoo, che ci restituirà il woied di una data località prendendo come input una stringa identificativa ( che può essere il CAP del luogo, il nome della città, l’indirizzo). Questo rallentà un pò l’applicazione ma la maggior parte delle volte il servizio riconoscerà il luogo da noi descritto.Riportiamo l’url della seconda API:

http://where.yahooapis.com/geocode?location=’stringa’&flags=J

stringa dovrà contenere l’indirizzo, il cap o il nome della città di cui vogliamo sapere il woeid. Ovviamente è possibile ricevere più di un risultato se la località non è abbastanza definita.
flag è un semplice parametro per definire la struttura della risposta, è valorizzata a J perchè trovavo più comodo farmi restituire i dati in formato JSON ma è sempre possibile lavorare con gli XML.
Ci sono svariate soluzioni per gestire i dati in formato JSON, io ad esempio ho scelto una vecchia release della libreria google-gson perchè l’avevo precedentemente usata per un altro progetto ma siete liberi di sfruttare qualunque tipo di script.
Gli strumenti sono tutti pronti, come esempio di una possibile applicazione basata sul processo appena descritto, posterà APL Weather: la struttura è a dir poco banale, una semplice editText dove inserire la località ed un pulsante per attivare la ricerca.
Esso genererà una ListView con i risultati ottenuti, cliccando sopra uno di essi verrà generata la seconda richiesta per le condizioni climatiche, che verrano a loro volta inseriti in una Lista e mostrati all’utente.Riportiamo alcune screenshot:

Potete scaricare l’applicazione meteo direttamente cliccando sul link seguente o collegandovi al solito repository Lab.

Grazie per l’attenzione,

Andrea

Prima di tutto analizziamo la questione dell’animazione;

 due lezioni fa avevamo proposto un metodo piuttosto grezzo per dare l’illusione del movimento, cioè quello di gestire staticamente il movimento come una sequenza di foto dello stesso oggetto leggermente spostato da un frame all’altro. Il trucchetto è piuttosto oneroso e poco dinamico ma è sicuramente la soluzione più immediata e facile da implementare con gli strumenti che avevamo. L’illusione si creava ma l’array javascript che definivamo in InitBuffer() era talmente grande che tutta l’applicazione risultava lentissima e impiegava uno tempo di inizializzazione più che proibitivo.

In questa lezione rilasceremo una classe che in maniera velata si comporta nel medesimo modo ma, sfruttando blender e la velocità del parsing di Javascript, renderà il gioco Webgl piuttosto veloce ( almeno se paragonato al precedente esempio).

Mostriamo ora i passaggi base per inserire una classe dinamica.

Prendiamo l’ultimo esempio scaricabile dalla solita pagina ed apriamo il file lesson12.html.
Prima di tutto cerchiamo la funzione InitBuffer()  che rappresenta la nostra fase di inizializzazione: subito prima notiamo la definizione di una variabile:

var baule;

Esso rappresenterà il nostro oggetto dinamico, definito fuori dallo scope della funzione per una questione di visibilità.
Poi entriamo nella funzione InitBuffer() e individuiamo questo codice :

baule=new DinObjF();
baule.LoadDinObjF(“baule_apertura”,20,1,”apertura”);
baule.LoadDinObjF(“baule_chiusura”,20,1,”chiusura”);

DinObjF è la nuova classe a nostra disposizione: notiamo che non ha bisogno di alcun argomento ( indice del fatto che la fase di inizializzazione dell’oggetto è assai limitato).
Successivamente viene chiamata la funzione LoadDinObjF : essa ha il compito di caricare l’insieme di file obj che rappresentanto l’azione da disegnare.
Il primo argomento è l’inizio del nome dei file obj che la funzione dovrà parsare, il secondo è il numero di frame ( o fotogrammi se preferite ) che deve analizzare, il terzo rappresenta la latenza che può esistere tra un frame e l’altro ( maggiore è il numero, e più tempo trascorrerà tra un cambio di frame e l’altro ), il quarto è semplicemente il nome con cui indentificheremo l’azione.
I nomi dei file obj dei frame devono seguire lo standard dell’export di blender 2.60 :

nome_file_numero.obj dove numero ha il formato “000000″
esempio:

baule_apertura_000001.obj
baule_apertura_000002.obj

…

Questa soluzione è stata scelta proprio per semplificare la vita degli sviluppatori: dopo aver creato un modello blender che esegue un azione, basterà esportare in formato obj ( selezionando l’opzione “esporta animazione” ) ; dopo che il programma avrà generato un insieme di file obj e mtl, basterà copiarli nella folder dell’applicazione e ci penserà la funzione LoadDinObjF a caricare.
Ovviamente è possibile caricare più azioni dello stesso modello ( nel nostro esempio, c’è un animazione per aprire il baule ed una per chiuderlo ).

Ora passiamo all’ultima fase, quella di disegno; apriamo la funzione DrawScene() e individuiamo questa porzione di codice:

if ( baule.stato == “chiuso” )
baule.StaticDraw(“chiusura”,19);
if ( baule.stato == “aperto” )
baule.StaticDraw(“apertura”,19);
if ( baule.stato == “apertura” )
baule.Draw(“apertura”);
if ( baule.stato == “chiusura” )
baule.Draw(“chiusura”);

la variabile stato è stata aggiunta per avere traccia dello stato del modello dinamico durante l’applicazione ( così sappiamo anche che animazione deve essere attivata).
Come potete vedere sono due le possibile funzioni:

-Draw(ACTION)
disegna l’azione action (cambiando automaticamente il frame ogni tot tempo proporzionale al numero di latenza). Il nome
dell’action deve essere quello definito precedentemente dal metodo LoadDinObjF.

-DrawStatic(ACTION,numero_frame)
disegna l’azione action ma non cambia frame : nel caso numero_frame sia definito, disegna quel determinato frame, viceversa disegna l’ultimo frame in cui si era fermato il contatore.

ESEMPIO
Terminato ciò, possiamo introdurre il nuovo progetto: campagna 1942. Tale applicazione è solo una frazione del design che avevo in mente ma avevo voglia di cambiare un pò d’aria. Ritroviamo qua gli stessi input e comandi dell’esempio precedente ( stile fps) ,mentre possiamo notare l’aggiunta di nuovi modelli 3d ( tra cui un mulino funzionante ) ed il nostro baule.
Per abilitare l’animazione dobbiamo essere molto vicino se non sopra ( ho messo una distanza massima per l’attivazione molto bassa ) e cliccare il pulsante E : essa si aprirà o si chiuderà producendo anche un suono ( ricorda un pò il gioco di ruolo Skyrim quando si cercano oggetti tra i bauli XD ).
E’ stato disabilitato il controllo della posizione, indi è possibile attraversare qualunque oggetto 3d senza problemi.

Per potere vedere l’esempio appena mostrato ( lo trovate come lesson12 e potete scaricare il pacchetto completto lesson12.zip) e scaricare il codice che è stato presentato nell’articolo, collegarsi al solito repository Lab .

Grazie per l’attenzione,

Andrea

PHP: Sto mandando avanti un vecchio progetto e mi son imbattuto nella problematica di gestire una tabella php dinamica con qualche funzionalità in più; ho trovato un progetto open piuttosto interessante, credo che pubblicherò due righe per condividere questa notizia con chi ha avuto il mio stesso problema
Android: ho iniziato a tastare un pò la questione del bluetooth tra device ( avevo una tastiera bluetooth mini che volevo attaccare al cellulare ma i programmi standard non andavano bene ); sto pensando di espandere la questione per proporre un piccolo apk per lo scopo.
NewzReader: al momento è quello più indietro e con meno priorità; attendo eventuali segnalazioni per mandare avanti i lavori.

Rimanete connessi , entro pochi giorni pubblicherò due lezioni veloci, perciò non spazientate!

APL

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.

Molti sono i formati con cui possiamo definire un modelli 3D : 3d studio(.3ds), ogre(-xml),Collada(.dae) … per il nostro esempio utilizzeremo modelli definiti secondo lo standard Wavefront ( .obj, .mtl).
Tale standard è molto semplice, praticamente si basa su due tipi di file:
-nomefile.obj -> contiene informazioni sulle coordinate del vertice, sulle coordiante texture, sulle normali
-nomefile.mtl -> contiene informazioni sui tipi di materiali usati dal modello ( colore, nome texture,illuminazione).

E’ un formato completo ma molto semplice , perfetto per creare un parsing non particolarmente complicato .

Abbiamo perciò sviluppato una nuova classe javascript, che dovrebbe sostituire al momento l’ele_sta cioè solo gli elementi statici ( nel nostro esempio noteremo che la classe obsoleta ele_sta è rimasta, ma se ne può fare tranquillamente a meno e toglierla dallo script ).
La nuova classe ELE() risulta più semplice della precedente e ci permette di definire i suoi attributi, cioè la posizione dei vertici, delle texture e delle normali, chiamando delle semplici funzioni:

function ELE()
{
this.Draw = DrawElement2; //Ele.Draw() -> funzione per disegnare
this.SetColor = ELE_Color; //Ele.SetColor(…) -> setta il colore dell’oggetto
this.SetTexture = ELE_Texture; // Ele.SetTexture(…)-> setta coordinate e immagine texture
this.SetVertex = ELE_Vertex; // Ele.SetVertex(…) -> setta i vertici
this.SetNormals = ELE_Normal; //Ele.SetNormals(…) -> setta le normali dei vertici

}

Il nostro parser non farà altro che leggere i file, istanziare un array di classi ELE() e settare tutti i loro attributi fondamentali. Il nostro solo compito sarà quello di passare l’url al nostro parser e di invocare il Render del modello chiamando La Draw() nella funzione DrawScene().

Notere subito dall’esempio che tale approccio è nettamente più veloce del precedente: infatti per il javascript è molto più complesso gestire degli array giganteschi inchiodati direttamente nel codice che invece crearne durante la fase di esecuzione.
Il rovescio della medaglia sarà un aumento della complessità degli shader e l’introduzione di qualche variabile in più nella InitShader.Spiegare il codice dei metodi della classe ELE() non è molto rilevante, praticamente tutte sono riassumibili col seguente schema:

function NOME(array)
{
Buffer=gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, Buffer);
gl.bufferData(gl.ARRAY_BUFFER,new Float32Array(array), gl.STATIC_DRAW);
Buffer.itemSize = numITemSize;
Buffer.numItems = array.length/numITemSize;
this.array=Buffer;
}

Si crea il Buffer e lo si associa alla classe grazie alla chiamata this.nomevariabile, in tale modo l’array sarà poi disponibile per la fase di Disegno. La funzione leggermente più complessa risulta essere quella dei colori:
in tale caso infatti bisogna creare un array dei colori con le stesse dimensioni di quello dei vertici; inoltre è stata data la possibilità di inserire direttamente un array dei colori ( nel caso ad esempio volessi creare un cubo multicolore ), ma questo ovviamente presuppone che l’utente accetti l’interpolazione lineare del colore.

Una delle novità introdotte in tale lezione è la lettura di file tramite javascript:

function LoadObjF(url)
{
var request = new XMLHttpRequest();
request.open(“GET”, url);
request.onreadystatechange = function () {
if (request.readyState == 4) {
ParseFile(request.responseText);
}
}

request.send();

}

Questa semplice funzione javascript usa l’Ajax per inviare una richiesta asincrona; tale richiesta produrrà uno stream di dati che sarà poi inviata alla funzione ParseFile(…) se tutto va correttamente. Il nostro Parser avrà il compito di analizzare questi dati ricevuti in lettura. Ecco uno schema molto semplificato del parser.

function handleObjFile(data)
{
//inizializzare variabili
var lines = data.split(“\n”); //divide in righe
for (var j in lines) {
var vals = lines[j].replace(/^\s+/, “”).split(/\s+/);
//divide ogni riga in colonne
if(vals[0] == “mtllib”)
{
//mi salvo nuovo materiale
}

if(vals[0] == “usemtl”)
{
mi salvo quale materiale devo usare per i successivi vertici
}
f (vals[0] == “vn”)
{
//è una normale, lo salvo
}

if (vals[0] == “v” )
{
// è un vertice, lo salvo
}
if (vals[0] == “vt”)
{
//texture, lo salvo
}
if (vals[0] == “f” )
{
// creo array dei vertici, delle texture e delle normali
}
…
}

A causa di alcune problematiche legate ai tempi di elaborazione del javascript per aprire i file e alla asincronicità delle chiamate ajax,non basta una sola passata del parser per elaborare il tutto. Toccherà infatti analizzare il file obj una prima volta per estrapolare i nomi dei file .mtl che contengono i materiali, parsare suddetti file per crearsi un array delle definizioni dei materiali ed infine rileggere una seconda volta il file obj per creare i buffer necessari al disegno ( sarebbe anche possibile tramite chiamate sincrone e ritardi voluti fare tutto con una sola passata ma ho preferito questo altro approccio).

Ora Sorge la domanda: come posso inserire un nuovo modello nella mia applicazione?

I passi da fare sono piuttosto semplici:
1- creare una variabile globale javascript ( in modo tale che sia visibile in ogni punto del progetto. In soldoni, basta andare all’inizio del file o in qualunque punto fuori da una funzione e scrivere var nomeoggetto ; ).
2- andare nella Funzione InitBuffer() ed inserire il codice:nomeoggetto= new LoadObjF(url_file_obj);
tutto questo innescherà il parsing e il savaltaggio dei dati.
3-nella funzione DrawScene() invochiamo il metodo Draw() (nomeoggetto.Draw() ). Ovviamente se il modello non è nella posizione corretta, consiglio di usare le solita funzioni di scalamento, rotazione e traslazione come nell’esempio seguente:

…
mvPushMatrix();
Scale([0.05, 0.05, 0.05]);
mvTranslate([0, 1.5,0]);
prova.Draw();
mvPopMatrix();
…

Per aumentare il realismo, abbiamo inserito in InitBuffer() anche una sorgente luminosa copiandola da una nostra precedente lezione; in questo modo modelli che non usano texture mostreranno maggior profondità ma inevitabilmente costringiamo l’utente a darci informazioni anche sulle normali.

Ultima cosa: come formattiamo correttamente i file obj da importare? Per aumentare al massimo la compatibilità ed evitare brutte sorprese, consiglio di appoggiarsi a Blender (versione 2.60), ecco riportati i semplici passi da seguire:

-Creare un nuovo progetto blender.
-Importare un modello 3D usando qualunque tipo di formato (.3ds,.dae, un altro.obj,…)
-Ad operazione completata, esportare il file stavolta usando lo standar Wavefront (.obj); prima di far partire l’operazione però, consigliamo di settare le opzioni come sotto indicato, includendo perciò la definizione delle Normali, dei materiale e che le facce siano triangolari:

-Diamo l’ok e salviamo i file .obj e .mtl nella medesima cartella della nostra applicazione , preoccupandoci inoltre di copiare anche le eventuali texture legate al modello. Prima di far partire l’applicazione, apriamo il/i file .mtl e controlliamo che il nome riportiamo a fianco dei campi map_ka o map_kd corrispondano al nome delle immagini e che l’indirizzo non punti a qualche strano path. Mostriamo un esempio:

nomi delle texture: body1.png,body2.png

File .mtl
newmtl RefRep.22_BODY1.PNG
Ns 96.078431
Ka 0.000000 0.000000 0.000000
Kd 0.800000 0.800000 0.800000
Ks 0.500000 0.500000 0.500000
Ni 1.000000
d 1.000000
illum 2
map_Kd Body1.png -> da cambiare, il nome della texture è in realtà body1.png

newmtl RefRep.24_BODY2.PNG
Ns 96.078431
Ka 0.000000 0.000000 0.000000
Kd 0.800000 0.800000 0.800000
Ks 0.500000 0.500000 0.500000
Ni 1.000000
d 1.000000
illum 2
map_Kd C:\Users\Ciao\Documents\Blender\cbody2.png -> queto path punta ad un indirizzo del mio pc ma la mia app è caricata sul server ed inoltre il modello è nella stessa cartella dell’applicazione, perciò gliere questo path e lasciare direttamente cbody2.png

Per potere vedere l’esempio appena mostrato ( lo trovate come lesson11 e potete scaricare il pacchetto completto lesson11.zip) e scaricare il codice che è stato presentato nell’articolo, collegarsi al solito repository Lab .

Grazie per l’attenzione,

Andrea

APL

oggi rilasciamo la terza versione di NewzReader.A causa di alcune scelte tattiche, in corso d’opera sono state fatte delle modifiche alla tabella degli obiettivi che si doveva prefiggere tale rilascio; di seguito elenchiamo le modifiche sostanziali.

1. Possibilità di salvare/importare i backup anche delle Newz salvate dentro l’app ( quelli inclusi nel channel Saved per la precisione).

2.Possibilità di importare i canali RSS anche del proprio account di Google Reader.

3.Durante la sincronizzazione dei canali abilitati, avviene visualizzato il canale che si sta elaborando al momento ( così si ha un feedback su quanto manca alla fine dell’importing).

4. Risolti svariati bachi.

L’applicazione è liberamente scaricabile nel seguente link; per dubbi, problemi o suggerimenti, non esistate a contattare, grazie.

Apl