1. UNIVERSITA’ DEGLI STUDI DI TRIESTE
DIPARTIMENTO DI INGEGNERIA E ARCHITETTURA
Corso di Laurea Magistrale in
INGEGNERIA INFORMATICA
Tesi di Laurea in
RETI DI CALCOLATORI
SVILUPPO E REALIZZAZIONE DI UN
SISTEMA PER LA MANIPOLAZIONE DI
SUPERFICI TRIDIMENSIONALI IN UN
APPLICATIVO WEB PER CAE
LAUREANDO
Raffaele Bernardi
RELATORE
Prof. Alberto Bartoli
CORRELATORE
Ing. Sergio Benedetti
Anno Accademico 2013/2014

2. A mio nonno

3. Indice
1
Indice
Indice ........................................................................................................................... 1
1. Introduzione......................................................................................................... 3
2. Analisi.................................................................................................................. 5
2.1 Responce Surface Methodology (RSM) ....................................................... 5
2.2 SOMO ........................................................................................................... 6
2.3 Requisiti ........................................................................................................ 7
2.3.1 Funzionalità ........................................................................................... 7
2.3.2 Applicazione web .................................................................................. 8
2.4 Tecnologie software...................................................................................... 9
3. Progettazione ..................................................................................................... 12
3.1 Pannello 3D................................................................................................. 13
3.1.1 Barra degli strumenti ........................................................................... 14
3.1.2 Area di disegno .................................................................................... 17
3.2 Pannelli laterali............................................................................................ 18
3.2.1 Piani YZ, XZ........................................................................................ 19
3.2.2 Piano XY.............................................................................................. 20
3.2.3 Contour plot......................................................................................... 20
3.3 Menù di impostazioni.................................................................................. 21
3.3.1 Impostazioni di disegno della funzione RSM...................................... 22
3.3.2 Impostazioni dell'area di lavoro........................................................... 23
3.3.3 Impostazioni dei piani di sezione......................................................... 23
3.4 Informazioni di rendering ........................................................................... 24
3.5 Caricamento della funzione RSM ............................................................... 25
4. Interfaccia .......................................................................................................... 26
4.1 Disegno della funzione RSM ...................................................................... 26
4.2 Personalizzazione dell'area di lavoro .......................................................... 30

4. Indice
2
4.2.1 Menù di impostazioni .......................................................................... 30
4.2.2 Opzioni di visualizzazione................................................................... 35
4.3 Uso dei pannelli laterali .............................................................................. 38
4.4 Informazioni di rendering ........................................................................... 39
5. Implementazione................................................................................................ 40
5.1 Elementi base di una scena in Three.js ....................................................... 40
5.2 Inizializzazione di una scena....................................................................... 44
5.3 Cancellazione di un elemento ..................................................................... 48
5.4 Caricamento della funzione RSM ............................................................... 48
5.5 Disegno della funzione................................................................................ 49
5.6 Interazioni con il mouse.............................................................................. 52
5.7 Contour plot ................................................................................................ 53
6. Conclusioni........................................................................................................ 55
6.1 Analisi delle prestazioni.............................................................................. 55
6.2 Sviluppi futuri ............................................................................................. 61
Riferimenti................................................................................................................. 63

5. 1. Introduzione
3
1. Introduzione
Lo scopo di questo lavoro è la progettazione e la realizzazione di uno strumento atto
a consentire in ambito web la visualizzazione tridimensionale di una superficie
ottenuta mediante RSM (Response Surface Methodology) e l’interazione con essa.
Il lavoro di tesi si è svolto presso ESTECO S.p.A., azienda specializzata nella ricerca
e nello sviluppo di prodotti software nel campo dell’ottimizzazione numerica. Uno di
questi prodotti è l’applicazione web SOMO, il cui scopo è consentire la
collaborazione nella progettazione e nello sviluppo di prodotti che riguardino
l’ambito ingegneristico. In tale contesto vi è la necessità di uno strumento atto a
studiare superfici RSM, al momento assente, ovvero modelli matematici che
approssimano la soluzione di problemi complessi con un elevato numero di variabili.
La scelta di sfruttare l’accelerazione hardware della scheda grafica operando nel
contesto di un browser sottolinea l’aspetto innovativo del lavoro. L’utilizzo esclusivo
di HTML5, CSS3, JavaScript e Three.js, senza l’ausilio di ulteriori plugin e librerie
se non jQuery e jQuery UI introdotte allo scopo di ottenere un codice più chiaro e
comprensibile, fa sì che allo stato di stesura del presente documento non esistano
soluzioni simili in ambito commerciale.
L’applicazione allo stato attuale è uno strumento autonomo, sebbene sia stata
realizzata in ottica di un’integrazione futura sulla piattaforma SOMO. Rispetta i
vincoli richiesti, è compatibile con le ultime versioni dei browser Mozilla Firefox e
Google Chrome, non richiede l’installazione di alcun add-on né l’utilizzo di
particolari driver per la scheda video.

6. 1. Introduzione
4
Il documento segue la seguente struttura: il capitolo 2 presenta l’analisi delle
tecnologie necessarie allo sviluppo dell’applicazione e si conclude con la stesura dei
requisiti; il capitolo 3 racchiude la fase di progettazione dei principali componenti
che la costituiscono; il capitolo 4 attraverso un caso d’uso evidenzia ciò che è stato
prodotto così come appare agli occhi dell’utente; il capitolo 5 si sofferma sull’aspetto
implementativo, analizzando i nodi più interessanti da questo punto di vista; il
capitolo 6, infine, riporta l’analisi delle prestazioni dell’applicazione realizzata e
indaga sui suoi possibili sviluppi futuri.

7. 2. Analisi
5
2. Analisi
2.1 Responce Surface
Methodology (RSM)
Per Response Surface Methodology (RSM) s’intende una serie di tecniche
statistiche e matematiche il cui scopo è lo sviluppo e l’ottimizzazione dei processi.
Trova molte applicazioni in ambito industriale, in particolare in quei contesti in cui le
qualità di un prodotto o di un processo sono influenzate da un elevato numero di
variabili. Al fine di abbattere i tempi di elaborazione, l’RSM si pone l’obiettivo di
creare una superficie di risposta approssimata che sia il più possibile fedele al
modello reale. Questa, oltre a fornire in linea di massima un’idea dell’andamento
della funzione, si presta a successive elaborazioni mirate a definire in modo migliore
il problema.
In ambito ingegneristico, in particolare nello studio di problemi di ottimizzazione, è
frequente la necessità di operare in questi termini. Normalmente l’approccio seguito
è il seguente:
1. Formalizzazione del problema in un modello matematico;
2. Scelta dell’algoritmo e generazione del Design of Experiments (DoE) ovvero
dei punti in cui il problema verrà valutato;
3. Calcolo delle soluzioni del problema nei punti creati;
4. Scelta dell’algoritmo di creazione (training) della superficie di risposta
approssimata;

8. 2. Analisi
6
5. Validazione della superficie di risposta che verifichi la bontà
dell’approssimazione;
6. Utilizzo di quest’ultima per successive elaborazioni e raffinamenti.
Per approfondimenti si rimanda alla letteratura specializzata (1) (2), dal momento
che in sede di tesi ci si concentra sul mero studio della rappresentazione della
superficie di risposta. In seguito ci si riferirà a quest’ultima come funzione RSM.
2.2 SOMO
SOMO (3) è un’applicazione web creata dall’azienda ESTECO S.p.A. (4). Essa offre
l’opportunità ad organizzazioni geograficamente distribuite di collaborare alla
realizzazione di un prodotto ingegneristico.
Le peculiarità dello strumento sono l’utilizzo di risorse di calcolo condivise in HPC
(High Performance Computing) e ambienti cloud, la gestione e condivisione di
complessi progetti multidisciplinari, l’organizzazione dell’accesso, il versioning, il
trasferimento dei dati delle simulazioni, l’analisi dei risultati. In particolare in
quest’ultimo punto trova spazio lo studio delle funzioni RSM, ovvero il lavoro di
tesi.
SOMO fa uso di Javascript come linguaggio di scripting, utilizza jQuery e jQuery UI
come librerie esterne. E’ compatibile con i browser:
 Mozilla Firefox dalla versione 10;
 Internet Explorer dalla versione 9;
 Google Chrome dalla versione 20;

9. 2. Analisi
7
2.3 Requisiti
Obiettivo della tesi è la creazione di uno strumento che permetta di visualizzare le
funzioni RSM in tre dimensioni.
2.3.1 Funzionalità
L’utente deve poter scegliere all’avvio dell’applicazione la funzione RSM da
visualizzare. Questa è rappresentata da un file JavaScript di struttura nota. In
particolare sono presenti:
 nInput: variabile in cui è salvato il numero di parametri della funzione;
 xRange: array a due dimensioni che presenta minimo e massimo di ciascun
parametro;
 evaluate: funzione per il calcolo dei punti della superficie di risposta; accetta
in input l’array dei parametri della funzione e ne calcola il risultato.
Il file JavaScript può presentare in aggiunta altre variabili e funzioni che non
influenzano gli scopi di visualizzazione della funzione.
L’utente deve poter scegliere tra i parametri della funzione quali siano le variabili X
e Y, con il vincolo che un certo parametro non può essere contemporaneamente
entrambe. Scelte queste, egli deve poter modificare i singoli parametri con valori
appartenenti ai rispettivi domini, sia in fase di inizializzazione che a funzione già
disegnata, con conseguente modifica in tempo reale del disegno. In sede di tesi, il
limite superiore del numero di parametri della funzione RSM da rappresentare è stato
fissato a 10.
Devono essere forniti una serie di strumenti accessori atti a permettere la
personalizzazione dell’area di lavoro ed a facilitare la lettura delle informazioni
visualizzate, quali ad esempio:

10. 2. Analisi
8
 griglia indicizzata;
 coordinate del punto indicato dal cursore;
 contour plot;
 rappresentazione degli assi principali.
Si richiede inoltre che l’utente possa, fissato un valore su un asse principale, studiare
l’intersezione tra il piano ortogonale ad esso e la funzione RSM.
2.3.2 Applicazione web
Per quanto riguarda lo sviluppo, si richiede che lo strumento creato dal candidato sia
integrato in un’applicazione web realizzata in HTML5 con l’utilizzo di JavaScript
come linguaggio di scripting e utilizzabile dai comuni browser. La logica risiede
interamente nel lato client e non deve essere richiesta all’utente l’installazione di
plugin proprietari. In questo scenario si inserisce WebGL, il quale rispetta i vincoli.
Al fine di ridurre la mole di lavoro e semplificare la scrittura del codice è concesso
l’utilizzo di un framework ad un livello di astrazione superiore, a patto che questo
utilizzi licenze compatibili con quella di SOMO.
Un confronto preliminare alla stesura di questo documento tra le librerie costruite su
WebGL presenti attualmente (5) (6) che rispondessero al vincolo, ha sottolineato la
maggior diffusione del framework Three.js che conta su una community numerosa,
uno sviluppo tutt’ora in corso e un notevole numero di esempi e demo disponibili in
rete.
Al fine di rendere l’applicazione integrabile in futuro sulla piattaforma SOMO, si
richiede la compatibilità con le tecnologie usate nel contesto. Ovvero è consentito
l’uso delle librerie jQuery e jQuery UI.
L’applicazione deve poter essere eseguita su Google Chrome e Mozilla Firefox,
sebbene una futura integrazione in SOMO richiederebbe anche il supporto di Internet
Explorer. Ciononostante si rimanda lo studio di compatibilità con quest’ultimo ad un
contesto di sviluppo futuro.

11. 2. Analisi
9
2.4 Tecnologie software
Gestita dal Gruppo Khronos (7), consorzio di industrie il cui obiettivo è la creazione
di interfacce di programmazione standard aperte e libere da royalties, WebGL (Web
Graphics Library) è una libreria che fornisce gli strumenti per il rendering di grafica
3D all’interno di un browser sfruttando l’accelerazione hardware della GPU e senza
l’uso di plugin (8) (9) (10). Il consorzio fornisce la seguente definizione:
WebGL is a cross-platform, royalty-free web standard for a low-level 3D graphics
API based on OpenGL ES 2.0 (11), exposed through the HTML5 Canvas element
(12) as Document Object Model interfaces.
Per quanto riguarda i browser che supportano la tecnologia, tralasciando quelli basati
su piattaforme ‘mobile’ per soffermarsi in modo specifico sui desktop, WebGL è
supportato da (13) (14):
 Mozilla Firefox dalla versione 4.0;
 Google Chrome dalla versione 14;
 Safari dalla versione 5.1;
 Opera dalla versione 12;
 Internet Explorer dalla versione 11.
Si precisa che quest’ultimo, a differenza degli altri, fornisce supporto parziale (15)
(16) dal momento che non supera positivamente i test ufficiali di conformità (17)
(18). In caso di dubbio, su siti specifici è immediato verificare di persona la
compatibilità del proprio browser (19) (20). Il Gruppo Khronos inoltre fornisce un
elenco specifico delle schede video e relativi driver compatibili con la tecnologia
(21).
Three.js è una libreria basata su WebGL (22). Condivide con quest’ultimo l’elenco
dei browser supportati ed è distribuita sotto Licenza MIT (23). Frequentemente
aggiornata dalla sua community, ha l’obiettivo di fornire al programmatore un
framework di tipo general purpose ad un basso livello di complessità, conseguenza

12. 2. Analisi
10
di un alto livello di astrazione. Significativo in questo senso un esempio tratto dal
libro WebGL: Up and Running (Tony Parisi, O’Reilly Media, 2012) in cui il
programma riportato in Figura 2.1 viene scritto prima in WebGL, quindi in Three.js.
Sottolineato il numero di righe di codice necessario nei due casi, parametro
significativo quantomeno per le proporzioni (150 righe contro 30), descrive la
struttura base di un programma della libreria in oggetto. Rimandando per i dettagli
implementativi al relativo capitolo, questa la procedura:
1. Creazione di un renderer, oggetto responsabile del disegno mediante
WebGL nel contenitore della pagina scelto;
2. Creazione di una scena, root nella gerarchia di oggetti che si andranno a
disegnare. Ognuno di questi è discendente da essa;
3. Creazione di una camera, il punto di vista dal quale l’utente visualizza la
scena;
4. Creazione della mesh, oggetto costituito dal binomio geometria-materiale.
La prima descrive l’aspetto geometrico in sé, l’altro riguarda la gestione dello
shader;
Figura 2.1 – Disegno di un quadrato, applicazione di
confronto tra WebGL e Three.js

13. 2. Analisi
11
5. Avvio del renderer.
Lo shader è un programma atto a determinare l’aspetto della superficie di un oggetto
sullo schermo, dipende dunque dall’insieme dei vertici e dal materiale che lo
costituisce e dalla posizione di luci e camera presenti nella scena. WebGL richiede la
presenza di questo componente (24), indispensabile per la comunicazione alla GPU
delle informazioni da rappresentare in seguito sullo schermo, composto solitamente
da due parti: il vertex shader, responsabile della trasformazione delle coordinate
tridimensionali di un oggetto in un sistema a due dimensioni, ovverosia lo schermo;
il fragment (pixel) shader, il cui compito è generare il colore di ogni singolo pixel
(25). In Three.js sono inclusi alcuni shaders di base che lo sviluppatore può gestire
facilmente scegliendo un materiale fra quelli disponibili e la fonte luminosa più
adatta ai suoi scopi.
La libreria presenta una documentazione (26) in continua definizione sebbene allo
stato di stesura del presente documento sia incompleta. Il materiale bibliografico
disponibile (27) (28) (29) e la diffusione in rete di esempi e demo di applicazioni
basate su di essa (30) (31) in parte sopperiscono a ciò.

14. 3. Progettazione
12
3. Progettazione
In questo capitolo verrà presentata la fase di progettazione, attraverso la quale sono
state individuate e quindi esplorate le aree funzionali del progetto. Il punto di
partenza è l’oggetto pannello, componente composto da una serie di strumenti atti a
consentire all’utente di interagire con la funzione rappresentata e il disegno della
funzione stessa. Tra i pannelli implementati il principale è il 3D, contenente la
funzione RSM e una serie di opzioni di visualizzazione che verranno illustrate in
seguito. Al fine di fornire all’utente un maggior numero di risorse per la valutazione
della funzione RSM, si è provveduto a creare ulteriori pannelli, contenenti la sezione
della funzione stessa con piani perpendicolari agli assi X, Y, Z, uno per ognuno di
questi. Infine è presente un pannello che presenta le linee di livello della funzione.
Accanto a questo componente è presente un menù di configurazione, tramite il quale
l’utente può impostare i parametri di disegno della funzione RSM, dell’area di lavoro
e dei piani di sezione. Si presentano inoltre le informazioni di rendering necessarie
all’utente qualora egli desiderasse migliorare la sua esperienza d’uso
dell’applicazione modificando i parametri di default. La Figura 3.1 riassume il layout
completo dell’applicazione:
1. Pannello 3D;
2. Pannello laterale YZ;
3. Pannello laterale XZ;
4. Pannello laterale XY;
5. Pannello laterale contour plot;
6. Menù di impostazioni;
7. Bottone per visualizzare le informazioni di rendering;
8. Reset.

15. 3. Progettazione
13
Al fine di rendere il layout adatto alle esigenze dell’utente, il pannello 3D può essere
ridimensionato mediante la barra che lo separa dai pannelli laterali, le cui dimensioni
si adattano di conseguenza.
3.1 Pannello 3D
Il pannello principale dell’applicazione è il pannello 3D, contenente la funzione
RSM ed una serie di controlli tramite i quali l’utente può gestire gli strumenti previsti
Figura 3.1 - Layout dell'applicazione web (mockup)

16. 3. Progettazione
14
per la personalizzazione dell’area di disegno. Con riferimento al layout proposto in
Figura 3.2, si inviduano le zone:
1. Area di disegno;
2. Barra degli strumenti.
3.1.1 Barra degli strumenti
Strumenti di personalizzazione
Per quanto riguarda gli strumenti di cui l’utente dispone, entrando nel dettaglio egli
può decidere se visualizzare o meno i seguenti oggetti:
 Axis Helper: rappresentazione degli assi cartesiani il cui movimento è
coerente alla posizione della funzione stessa;
 Curve Helper: rappresentazione in scala ridotta della funzione a cui si
aggiunge il punto indicante la posizione del cursore sulla funzione stessa,
Figura 3.2 - Pannello 3D (mockup)

17. 3. Progettazione
15
qualora l’evento si verifichi. Anche in questo caso il movimento della
rappresentazione segue quello della funzione principale;
 Grids: griglia a tre dimensioni, orientata parallelamente agli assi, adiacente al
disegno della funzione;
 Spline YZ, XZ: griglia che segue l’andamento della funzione le cui curve sono
parallele agli assi X e Y;
 Contour Plot (global): linee di livello il cui colore è indice dell’altezza della
funzione in quel punto;
 Color Helper: barra verticale il cui colore sfuma dal rosso al blu
coerentemente con i colori usati per il disegno della funzione stessa. Qualora
il cursore sia presente sopra quest’ultima, appare un’indicatore accanto alla
barra ad un’altezza proporzionale alla quota del punto indicato dal cursore.
L’indicatore contiene le coordinate del punto;
 Intersection Planes: piani di sezione perpendicolari agli assi principali la cui
posizione può venire impostata dall’utente per lo studio dell’intersezione di
questi con la funzione. La disattivazione di tale controllo non preclude la
possibilità di operare con le sezioni, l’utente può ugualmente impostare la
posizione dei piani senza però alcun riscontro visivo;
 Console: elenco delle operazioni di disegno svolte dall’applicazione in
formato “data, ora – operazione” con riferimento al tempo di esecuzione
delle operazioni più complesse in termini temporali.
Sono inoltre presenti ulteriori strumenti che consentono all’utente un maggior grado
di personalizzazione:
 Labels: si compone di tre opzioni riguardanti la visualizzazione o meno delle
coordinate e informazioni supplementari in corrispondenza degli assi:
o All labels: visualizzazione di tutte le etichette;
o No planes labels: visualizzazione delle sole etichette relative alla
funzione RSM;
o No labels: nessuna visualizzazione di etichette.
 Planes: presenta tre opzioni relative al disegno o meno dei piani di supporto
nel contesto 3D:

18. 3. Progettazione
16
o All planes: visualizzazione di tutti i piani di supporto;
o Only XZ, YZ planes: visualizzazione di tutti i piani di supporto ad
eccezione del piano contenente l’intersezione della funzione RSM con
il piano di sezione perpendicolare all’asse Z;
o No planes: visualizzazione di alcun piano di supporto.
La disattivazione parziale o totale di tali elementi non preclude la possibilità
di operare su questi nei rispettivi piani bidimensionali.
Strumenti per la camera
Per quanto riguarda il punto di vista dell’utente nei confronti della scena, viene
fornito uno strumento atto a gestire la camera, utile nel caso egli desideri impostare
una visuale frontale piuttosto che laterale oppure nella circostanza in cui si riveli
necessario un reset della posizione del punto di vista dell’utente nella scena. Si tratta
di uno strumento di supporto, egli ha totale libertà di movimento all’interno della
scena. Il componente camera prevede i seguenti punti di vista, il cui nome è legato al
proprio posizionamento:
 Front camera;
 Rear camera;
 Left camera;
 Right camera;
 Top camera;
 Bottom camera.
Strumenti di visualizzazione della funzione
Al fine di consentire all’utente un maggior grado di personalizzazione, sono previsti
due ulteriori controlli riguardanti la visualizzazione della funzione nei termini del suo
aspetto e del suo materiale. Il primo consente di scegliere tra:
 Curve: la funzione viene disegnata come rete triangolare;
 Point: la funzione è rappresentata come insieme di punti;

19. 3. Progettazione
17
 Wireframe: la funzione è disegnata come rete triangolare, triangoli dei quali
si visualizza il solo perimetro.
In tutti e tre i casi il colore della geometria è dipendente dalla quota della stessa e
coerente con l’oggetto Color Helper descritto precedentemente.
I materiali tra cui si può scegliere sono:
 Basic: il disegno della funzione presenta i colori della gamma tra il rosso ed il
blu ed è sensibile alla posizione della luce all’interno della scena;
 Multi: analogo al precedente ma la sua mancata sensibilità alla posizione
della luce rende i colori più vivi;
 Mono: i colori utilizzati rientrano nella scala di grigio, sulla tonalità influisce
la posizione della luce;
 Metallic: anche in questo caso si utizza una scala di grigio sulla quale la
posizione della luce conferisce un maggior contrasto, tipico delle superfici
metalliche.
L’impostazione iniziale è curve basic.
3.1.2 Area di disegno
L’area di disegno contiene la rappresentazione in tre dimensioni della funzione. Al
fine di includere un maggior numero di informazioni nel contesto tridimensionale,
essa viene rappresentata ‘a scatola esplosa’. Al centro trova spazio la funzione stessa,
racchiusa nella griglia tridimensionale di cui si è fatto riferimento nel paragrafo
precedente. Perpendicolarmente agli assi principali, disposti in modo tale da lasciare
in primo piano la funzione RSM, si trovano i piani di supporto, sui quali sono
proiettate le curve risultanti dall’intersezione tra la funzione e i rispettivi piani di
sezione. E’ inoltre presente un piano contenente le linee di livello. La Figura 3.3
riassume quanto specificato:
1. Funzione RSM;

20. 3. Progettazione
18
2. Proiezione del piano ortogonale a X;
3. Proiezione del piano ortogonale a Y;
4. Proiezione del piano ortogonale a Z;
5. Linee di livello della funzione.
Nell’ambiente in oggetto si vuole concedere all’utente libertà di movimento e facoltà
di interazione con esso tramite il mouse, sono pertanto presenti i comandi di
trascinamento, rotazione e zoom. E’ implementato il riconoscimento del punto della
funzione indicato dal cursore di cui si forniscono le coordinate X, Y, Z.
Figura 3.3 - Area di disegno (mockup)
3.2 Pannelli laterali
I pannelli laterali ospitano le curve di livello e le proiezioni delle intersezioni tra i
piani di sezione e la funzione RSM, contengono pertanto scene a due dimensioni.
Essi riflettono la situazione istantanea dello stato di tali intersezioni, quindi si

21. 3. Progettazione
19
aggiornano al variare della posizione dei rispettivi piani di sezione. Sebbene sia
presente una serie di icone mediante le quali l’utente può impostare le sue preferenze
di visualizzazione, analogamente a quanto accade nel contesto tridimensionale, la
struttura dei pannelli in oggetto è leggermente diversa come si evince dalla Figura
3.4:
1. Area di disegno;
2. Nome del pannello;
3. Barra degli strumenti;
4. Bottone di riduzione del pannello.
3.2.1 Piani YZ, XZ
I piani YZ e XZ rappresentano rispettivamente le proiezioni della funzione RSM con
il piano di sezione ortogonale a X e il piano di sezione ortogonale a Y. Sebbene si
riferiscano a contesti diversi e l’utilizzo dell’uno non sia vincolato all’utilizzo
dell’altro, vengono trattati nello stesso capitolo in quanto presentano funzionalità
analoghe. Entrambi consentono all’utente di gestire l’utilizzo dei seguenti strumenti:
 Max/min: rappresentazione di due rette parallele all’asse X passanti
rispettivamente per il massimo ed il minimo della curva e indicanti le
coordinate di tali punti;
Figura 3.4 - Pannello laterale (mockup)

22. 3. Progettazione
20
 Grids: griglia a due dimensioni, orientata parallelamente agli assi;
 Labels: raffigurazione delle coordinate lungo gli assi.
Anche in questo contesto l’utente può interagire con la scena con movimenti di
trascinamento e zoom impartiti mediante il mouse, si forniscono inoltre le coordinate
X, Y, Z del punto della curva indicato dal cursore.
3.2.2 Piano XY
Il piano XY differisce da quanto descritto nel paragrafo precedente sia per quanto
riguarda la barra degli strumenti che nel contenuto dell’area di disegno. Entrando nel
dettaglio, rispetto ai piani laterali finora descritti, non presenta il controllo Max/min,
conseguenza del fatto che operando sul piano XY la coordinata Z è invariata per ogni
punto rappresentato. Ciò si ripercuote sulla curva rappresentata nell’area di disegno,
la quale è una linea di livello (per la definizione formale della quale si rimanda al
paragrafo successivo), ovvero la proiezione sul piano XY dell’intersezione tra la
funzione RSM e il piano di sezione ortogonale all’asse Z.
3.2.3 Contour plot
Si definisce contour plot (o contour map) di una funzione l’insieme delle contour
lines (o linee di livello o curve di livello o isoipse), curve nel piano XY la cui
funzione assume valore costante (32).
Il piano in questione presenta nell’area di disegno il contour plot della funzione
RSM. Al fine di rendere il grafico di più facile lettura, il colore delle curve dipende
dall’elevazione delle stesse, coerentemente con quanto accade nel contesto
tridimensionale.

23. 3. Progettazione
21
3.3 Menù di impostazioni
Scopo del menù di impostazioni è consentire all’utente di configurare i parametri
previsti dall’applicazione riguardanti il disegno della funzione, l’area di lavoro e i
piani di sezione. Individuate tali aree, sono state creati altrettanti menù la cui
struttura è visibile nella Figura 3.5. Ciascuno di questi si compone di blocchi
funzionali e di un bottone di conferma che può trovarsi all’interno del blocco o a
livello di menù qualora la conferma riguardi l’impostazione di più di un parametro.
Si compongono di:
1. Nome del blocco;
2. Bottone di collassamento del blocco;
3. Uno o più elementi di input, quali input text, radio buttons, sliders.
Figura 3.5 - Menù di impostazioni
(mockup)

24. 3. Progettazione
22
I menù sono posti in primo piano a sinistra dello schermo e sono collassabili al fine
di consentire all’utente maggior spazio per la visualizzazione del disegno della
funzione.
3.3.1 Impostazioni di disegno della
funzione RSM
Il primo menù presenta le impostazioni di disegno. Nel dettaglio sono presenti i
blocchi:
 Select variables: una volta caricata la funzione da disegnare, l’utente può
decidere quale dei suoi parametri sarà la variabile rappresentata sull’asse X e
quale sull’asse Y;
 Parameters: scelte le variabili X e Y, i rimanenti parametri sono inseriti in
questo blocco. Di ciascuno di questi l’utente può impostare un valore
compreso tra il rispettivo minimo e massimo sia prima di disegnare la
funzione che dopo, in modo da ottenere una visualizzazione in tempo reale
della funzione al variare di un certo parametro;
 Domain: intervallo di rappresentazione di quelle che sono state scelte come
variabili X e Y;
 Sampling density: numero di punti per unità, ovvero il numero di punti della
scena compresi in un intervallo unitario. Dunque è preferibile impostarlo con
un valore basso quando nel domain si inseriscono intervalli grandi, e
viceversa. Per consentire all’utente di ignorare questo parametro è previsto il
calcolo automatico di un valore iniziale, calcolato sulla media della
dimensione degli intervalli di dominio;
 Curve segments: numero di triangoli per lato della rete triangolare che
costituisce il disegno della funzione;
 z-Normalization: numero di punti della scena utilizzati per la
rappresentazione della funzione lungo l’asse Z. Parametro calcolato
automaticamente, sebbene modificabile dall’utente, dipende dalla dimensione

25. 3. Progettazione
23
del dominio e dalla sampling density ed ha lo scopo di mantenere il disegno
della funzione nell’area visibile della scena;
 Point density: dimensione del lato della rete di punti in cui la funzione è stata
calcolata.
In fondo è presente un bottone tramite il quale confermare le impostazioni appena
descritte e procedere al disegno della funzione sulla scena.
3.3.2 Impostazioni dell'area di lavoro
In questo menù è possibile configurare le impostazioni relative a:
 Label size: dimensione delle etichette utilizzate come indici sugli assi e per
informazioni supplementari. Il parametro ha un valore iniziale calcolato in
modo da rappresentare sulla scena etichette leggibili dall’utente
indipendentemente dalle impostazioni inserite nel menù descritto al paragrafo
precedente;
 Grid steps: definisce l’indice di densità della griglia per ognuno degli assi
principali;
 Light control: consta in un’area rettangolare tramite la quale è possibile
impostare la posizione nello spazio tridimensionale della scena della fonte
luminosa necessaria per alcuni tipi di materiale.
3.3.3 Impostazioni dei piani di sezione
Tramite i controlli presenti nel menù in questione è possibile impostare parametri
specifici dei piani di sezione e del contour plot. In particolare:
 Section planes: per ogni asse principale è possibile impostare il valore della
coordinata su cui traslare il relativo piano di sezione. Al variare del parametro

26. 3. Progettazione
24
consegue il calcolo della curva risultante dall’intersezione fra la funzione e il
piano stesso, e dunque la modifica del disegno nel pannello laterale dedicato;
 Projection planes distance: per ogni pannello di supporto nel contesto
tridimensionale (Figura 3.3) è possibile scegliere la distanza di disegno dalla
funzione RSM;
 Contour plot: parametro indicante il numero di punti di distanza tra le quote
di due linee di livello;
 Contour plot point density: dimensione del lato della rete di punti su cui si
costruisce il contour plot. Sottoinsieme della rete costruita sul parametro
point density precedentemente illustrato, ha lo scopo di rendere efficiente
l’impiego di risorse da parte dell’applicazione lasciando all’utente la facoltà
di decidere il livello di dettaglio della rappresentazione.
3.4 Informazioni di rendering
Allo scopo di fornire all’utente uno strumento di lettura delle risorse impiegate
dall’applicazione, si è prevista una finestra di dialogo visualizzabile selezionando il
tasto Info. Questa contiene una tabella avente i seguenti campi:
 3D function;
 Axis helper;
 Curve helper;
 YZ plane;
 XZ plane;
 XY plane;
 Contour plot;
 Total;
Di ognuno di questi si elencano le informazioni relative a:
 Geometries in memory;
 Shaders in memory;

27. 3. Progettazione
25
 Draw calls to render;
 Vertices rendered;
 Triangles rendered;
 Particles rendered;
3.5 Caricamento della funzione
RSM
All’avvio dell’applicazione l’utente deve poter scegliere la funzione RSM da
caricare, inoltre deve avere conferma che il browser supporti la tecnologia WebGL
mediante messaggio di conferma. Pertanto la finestra di dialogo iniziale, Figura 3.6,
si compone di:
1. Input text per l’inserimento del percorso su disco del file JavaScript che
rappresenta la funzione;
2. Status del supporto di WebGL da parte del browser;
3. Bottone di conferma.
Figura 3.6 - Caricamento della funzione RSM (mockup)

28. 4. Interfaccia
26
4. Interfaccia
Affrontate le fasi di analisi e progettazione in cui sono state definite le linee guida del
lavoro di tesi, si presenta ora il risultato prodotto. Il capitolo descrive mediante un
esempio di caso d’uso le funzionalità introdotte nell’applicazione web.
4.1 Disegno della funzione RSM
La procedura descritta in seguito consente all’utente, una volta raggiunta la pagina
dell’applicazione web, di disegnare la funzione RSM desiderata. I passaggi da
seguire sono:
 Test di compatibilità del browser;
 Caricamento della funzione;
 Impostazione dei parametri di disegno della funzione RSM;
 Disegno della funzione RSM.
Figura 4.1 - Test di compatibilità del browser

29. 4. Interfaccia
27
Il primo punto informa l’utente se il browser scelto per visualizzare la pagina è o
meno supportato da WebGL. In particolare si visualizza uno dei messaggi riportati in
Figura 4.1. In caso di esito negativo, a seconda che appaia il secondo o il terzo
messaggio da sinistra, gli viene fornito un link a pagine di supporto (13) (33) ed è
disabilitato il bottone Load. Nel caso opposto, l’utente può scrivere il path della
funzione RSM e caricarla (Figura 4.2).
La console, integrata sul lato sinistro dello sfondo dell’area di disegno del pannello
3D, dà conferma del caricamento avvenuto e stampa informazioni in merito alla
funzione RSM selezionata. Inoltre compare il nome del file caricato sulla barra in
alto e il tab del menù delle impostazioni di disegno sul lato sinistro della pagina
(Figura 4.3).
Aprendo il menù (Figura 4.4) l’utente ha accesso ai controlli già descritti nel capitolo
precedente. Ovvero:
 Select variables;
 Parameters;
Figura 4.2 – Caricamento della funzione

30. 4. Interfaccia
28
 Domain;
 Sampling density;
 Curve segments;
 z-Normalization;
 Point density.
Figura 4.4 - Menù delle impostazioni di disegno della funzione RSM
Figura 4.3 - A caricamento avvenuto
compare il tab del menù delle
impostazioni di disegno

31. 4. Interfaccia
29
I blocchi sono già compilati con una configurazione di default. Allo scopo di non
inondare l’utente di un eccessivo numero di informazioni, sono visibili solamente i
primi due blocchi sebbene tutti i valori siano modificabili. Il primo, come detto,
presenta l’elenco dei parametri della funzione caricata, nominati con le lettere a, b, c
per renderli distinguibili, dove il primo è candidato a diventare la variabile X e il
secondo la variabile Y. In parameters è presente l’elenco dei parametri della
funzione non selezionati nel blocco soprastante, in questo caso c. Il valore assunto
dal parametro è il suo limite inferiore, l’utente può modificarlo ora o a funzione
disegnata. Nel caso d’uso in oggetto, lasciando questi e gli altri blocchi ai valori di
default, l’utente clicca il bottone Draw. In Figura 4.5 il risultato dell’elaborazione.
Oltre al disegno stesso, sia nel contesto tridimensionale che sui piani a due
dimensioni, sono apparsi sulla sinistra due ulteriori tag di altrettanti menù, le barre
degli strumenti del pannello 3D e dei pannelli laterali.
Figura 4.5 - Disegno della funzione RSM

32. 4. Interfaccia
30
4.2 Personalizzazione dell'area
di lavoro
Rappresentata la funzione, ora l’utente può far uso di una serie di strumenti ed
opzioni per personalizzare l’area di lavoro. Rimandando l’analisi specifica dei
pannelli laterali al relativo capitolo, si focalizza l’attenzione sulle impostazioni
globali e del pannello 3D.
4.2.1 Menù di impostazioni
Come stabilito in fase di progettazione, sono stati creati tre menù (Figura 4.6).
Figura 4.6 - Menù di impostazioni. Da sinistra: impostazioni di disegno della funzione RSM,
impostazioni dell'area di lavoro, impostazioni dei piani di sezione

33. 4. Interfaccia
31
Possono essere visualizzati singolarmente e, se aperti, non precludono l’interazione
dell’utente con gli altri componenti della pagina. Per dar modo a questo di sfruttare al
meglio lo spazio della sua finestra del browser, i menù sono a scomparsa.
Con riferimento alla figura precedente, procedendo da sinistra a destra sono
raffigurati:
 Menù di impostazioni di disegno della funzione RSM;
 Menù di impostazioni dell’area di lavoro;
 Menù di impostazioni dei piani di sezione;
Ciascuno di questi presenta valori di default che l’utente può modificare in qualsiasi
momento. Rimandando per le specifiche funzioni di ciascun blocco al Capitolo 3,
nelle seguenti figure si presentano alcune possibilità di personalizzazione:
 Variazione della posizione della sorgente luminosa al fine di rendere
apprezzabile ovunque l’andamento della funzione nel caso di utilizzo di
materiali sensibili alla luce per la sua rappresentazione (Figura 4.7, Figura
4.8);
 Impostazione dei parametri di densità della griglia (Figura 4.9, Figura 4.10);
 Traslazione dei piani di sezione (Figura 4.11, Figura 4.12).

34. 4. Interfaccia
32
Figura 4.7 - Fonte luminosa prossima al limite sinistro del piano orizzontale
Figura 4.8 - Fonte luminosa prossima al limite destro del piano orizzontale

35. 4. Interfaccia
33
Figura 4.9 - Griglia impostata con i valori x=5; y=3; z=7
Figura 4.10 - Griglia impostata con i valori x=1; y=1; z=1

36. 4. Interfaccia
34
Figura 4.11 - Piani di sezione impostati alle coordinate x=218.5; y=23.21; z=1011000
Figura 4.12 - Piani di sezione impostati alle coordinate x=-666.2; y=-804.6; z=842900

37. 4. Interfaccia
35
4.2.2 Opzioni di visualizzazione
Nella barra degli strumenti l’utente può selezionare gli strumenti di suo gradimento.
Per le opzioni che prevedono una scelta multipla è presente un menù a scomparsa in
corrispondenza della relativa icona. In particolare (Figura 4.13):
1. Axis Helper (on/off);
2. Curve Helper (on/off);
3. Grids (on/off);
4. Spline YZ, XZ (on/off);
5. Contour Plot (global) (on/off);
6. Color Helper (on/off);
7. Intersection Planes (on/off);
8. Console (on/off);
9. Labels (All labels / No planes labels / No labels);
10. Planes (All planes / Only XZ, YZ planes / No planes);
11. Camera (Front / Rear / Left / Right / Top / Bottom);
12. Aspect (Curve / Point / Wireframe);
13. Material (Basic / Multi / Mono / Metallic).
L’utente è libero di posizionare i controlli Axis Helper e Curve Helper ovunque nello
spazio dell’area di disegno del pannello, inoltre ha modo di ingrandirli e
ridimensionarli (Figura 4.14).
Figura 4.13 - Barra degli strumenti del pannello 3D

38. 4. Interfaccia
36
Di seguito alcune configurazioni d’esempio:
Figura 4.14 - Ridimensionamento del Curve Helper
Figura 4.15 - Axis Helper; Curve Helper; Grids; Contour Plot (global); Console; No
labels; Only XZ, YZ planes; Curve; Metallic.

39. 4. Interfaccia
37
Figura 4.16 - Axis Helper; Curve Helper; Contour Plot (global); Color Helper; No
labels; Only XZ, YZ planes; Wireframe; Basic.
Figura 4.17 – Axis Helper; Grids; Intersection Planes; No planes labels; Only XZ, YZ
planes; Point; Multi.

40. 4. Interfaccia
38
4.3 Uso dei pannelli laterali
Il pannello laterale fornisce un sottoinsieme delle funzionalità presentate nel
paragrafo precedente. Poiché in sede di tesi è stata posta l’attenzione sullo studio
dello spazio tridimensionale, i requisiti sui pannelli laterali non richiedevano lo
stesso numero di funzionalità. Si fornisce un insieme di questi contenenti le
intersezioni dei piani di sezione con la funzione RSM ed il contour plot.
Al fine di consentire all’utente la possibilità di scegliere con quale contesto operare,
se a tre dimensioni o a due, è possibile ridimensionare il pannello 3D concedendo di
conseguenza più o meno spazio ai pannelli laterali. Questi possono essere tenuti
aperti o chiusi a sua discrezione, analogamente a quanto accade per i blocchi dei
menù di impostazioni.
Figura 4.18 - Ridimensionamento dell'area di lavoro tridimensionale per concedere maggior spazio
ai pannelli laterali

41. 4. Interfaccia
39
Ogni pannello presenta gli strumenti Grids e Labels, limitatamente ai primi due
(contenenti i piani ortogonali a X e Y) è presente anche Max/min. Su tutti è
implementato il riconoscimento del punto della curva indicato dal cursore.
4.4 Informazioni di rendering
Mediante il bottone Info posizionato in alto a destra sulla pagina è possibile aprire
una finestra di dialogo contenente alcune informazioni in merito all’uso di memoria
ed al processo di rendering. Queste sono divise per scena, lo scopo è fornire
all’utente non solamente un’indicazione statistica ma anche un’idea sul contesto in
cui agire in caso di prestazioni non buone dell’applicazione.
Figura 4.19 - Informazioni di rendering

42. 5. Implementazione
40
5. Implementazione
Individuati i concetti più significativi propri dell’applicazione sviluppata, il presente
capitolo ne fornisce una descrizione dettagliata. Salvo ove diversamente indicato, il
codice è stato scritto interamente dal candidato.
5.1 Elementi base di una scena
in Three.js
Al fine di descrivere gli oggetti base di un’applicazione basata su Three.js si fa
riferimento ad un semplice programma d’esempio. Il seguente è tratto dal libro
WebGL: Up and Running (Tony Parisi, O’Reilly Media, 2012).
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title>A Simple Three.js Page</title>
5 <script src="../libs/Three.js"></script>
6 <script>
7 function onLoad() {
8
9 var container = document.getElementById("container");
10
11 var renderer = new THREE.WebGLRenderer();
12 renderer.setSize(container.offsetWidth,
container.offsetHeight);
13 container.appendChild( renderer.domElement );
14
15 var scene = new THREE.Scene();
16

43. 5. Implementazione
41
17 var camera = new THREE.PerspectiveCamera( 45,
container.offsetWidth / container.offsetHeight, 1, 4000 );
18 camera.position.set( 0, 0, 3.3333 );
19 scene.add( camera );
20
21 var geometry = new THREE.PlaneGeometry(1, 1);
22 var mesh = new THREE.Mesh( geometry,
new THREE.MeshBasicMaterial( ) );
23 scene.add( mesh );
24
25 renderer.render( scene, camera );
26
27 }
28 </script>
29 </head>
30 <body onLoad="onLoad();">
31 <div id="container" style="width:500px; height:500px;
background-color:#000000">
32 </div>
33 </body>
34 </html>
Il primo passo consiste nella creazione di un oggetto THREE.WebGLRenderer() il quale
a sua volta inserisce, dentro il contenitore div, un elemento HTML5 canvas di
analoghe dimensioni (righe 11-12). All’oggetto in questione spetta il compito di
creare il contesto WebGL, ambiente nel quale lo sviluppatore accede al renderer e
definisce scena e camera. Poiché la struttura di un programma sviluppato con
Three.js è ad albero, è necessario un nodo che faccia da root, la scena (riga 15). Lo
spazio di quest’ultima ha il sistema di coordinate riportato in Figura 5.1.
Figura 5.1 - Il sistema di coordinate in WebGL

44. 5. Implementazione
42
La camera è l’oggetto più importante, definisce dove, nello spazio tridimensionale,
l’utente è posizionato ed il suo orientamento. Three.js dà la possibilità di scegliere fra
vista prospettica e vista ortografica. Quest’ultima a differenza dell’altra non prevede
il concetto di profondità, non c’è un punto d’osservazione bensì una direzione da cui
viene vista la scena, due linee di uguale dimensione pertanto appaiono tali
indipendentemente dalla loro posizione nel disegno (34) (Figura 5.2).
Figura 5.2 - Esempio di vista prospettica e vista ortografica
La camera necessita di quattro parametri (riga 17) per definire il suo campo visivo, o
frustum. Si tratta di un tronco di piramide a base rettangolare di cui è possibile
impostare il field of view (fov), l’aspect ratio e la profondità di campo ovvero la
distanza dei due piani dalla camera. Un oggetto della scena è visibile se e solo se
ricade all’interno del frustrum.

45. 5. Implementazione
43
Una volta impostata la scena, è possibile popolarla con gli oggetti desiderati. Si
aggiungono di fatto delle mesh, ossia collezioni di vertici e triangoli che definiscono
una struttura poligonale, in questo caso un piano (riga 22). Si compone di due
oggetti, una geometria e un materiale, dove il primo contiene le informazioni spaziali
di ciò che dev’essere disegnato, l’altro riguarda l’aspetto dello stesso. Di entrambi
Three.js fornisce una serie di oggetti preimpostati (26). Tralasciando di fornire una
posizione per il piano che si sta disegnando, di default viene posto alle coordinate (0,
0, 0). Infine (riga 25) viene invocato il render con la coppia di parametri scena-
camera in modo da rappresentare quanto descritto finora sullo schermo. Il risultato è
visibile in Figura 2.1.
La Figura 5.4 riassume schematicamente quanto detto.
Figura 5.3 - Struttura della camera prospettica

46. 5. Implementazione
44
Renderer
Scene
Camera Mesh 1 Mesh 2 Mesh 3
G 1 M 1 G 2 M 2 G 3 M 3
. . .
. . .
Three.js
Figura 5.4 - Struttura di un programma sviluppato con Three.js
5.2 Inizializzazione di una scena
Entrando in merito all’applicazione sviluppata in sede di tesi, si presenta di seguito
un estratto di codice riguardante l’inizializzazione della stessa. Sono presenti sette
contesti WebGL nei quali si eseguono operazioni mediante Three.js, quindi si
necessita di altrettanti renderer, camere e scene, dal momento che ogni renderer
accetta come parametri una scena ed una camera e che in ogni canvas è possibile
rappresentare al più un contesto:
 Pannello 3D;
 Pannello laterale YZ;
 Pannello laterale XZ;
 Pannello laterale XY;
 Contour plot;
 Axis Helper;
 Curve Helper.
1 <script src="threejs63/build/three.js”></script>
2 <script src="js/TrackballControls.js”></script>
3 ...
4 <script>

47. 5. Implementazione
45
5 function checkWebGL() {
6 if (!window.WebGLRenderingContext) {
7 ...
8 return false;
9 }
10 else {
11 var canvas = $("#id3DfunctionContainerCanvas")[0];
12 var canvasContext = canvas.getContext("webgl");
13 if (!canvasContext) {
14 ...
15 return false;
16 }
17 else {
18 ...
19 return true;
20 }
21 }
22 }
23
24 function setScene3D() {
25 scene3D = new THREE.Scene();
26 }
27
28 function setRenderer3D() {
29 renderer3D = new THREE.WebGLRenderer({antialias: true, alpha:
true, canvas: $("#id3DfunctionContainerCanvas")[0]});
30 ...
31 document.getElementById("id3DfunctionContainer").
appendChild(renderer3D.domElement);
32 }
33
34 function setCamera3D() {
35 camera3D = new THREE.PerspectiveCamera(50,
($("#id3DfunctionContainer").width() /
$("#id3DfunctionContainer").height()), 1, 100000);
36 scene3D.add(camera3D);
37 ...
38 controls = new THREE.TrackballControls(camera3D,
$("#id3DfunctionContainer")[0]);
39 controls.addEventListener("change", render);
40 }
41
42 function init() {
43 ...
44 if (!checkWebGL()) return;
45 ...
46 setScene3D();
47 // set other scenes
48 ...
49 setRenderer3D();
50 // set other renderers
51 ...
52 setCamera3D();
53 // set other cameras
54 ...

48. 5. Implementazione
46
55 animate();
56 ...
57 }
58
59 function animate () {
60 requestAnimationFrame(animate);
61 controls.update();
62 ...
63 render();
64 }
65
66 function render () {
67 renderer3D.render(scene3D, camera3D);
68 // call other render methods
69 }
70 </script>
A caricamento della pagina avvenuto, viene invocata la funzione init (riga 42). La
prima operazione dev’essere il controllo su WebGL (riga 44), eseguito secondo le
linee guida ufficiali (35). Nel caso window.WebGLRenderingContext non sia null
(altrimenti sarebbe possibile concludere il mancato supporto alla libreria da parte del
browser utilizzato), si procede ad un ulteriore controllo (riga 13) per indagare altre
possibili cause di malfunzionamenti. Ad esempio è il caso di Google Chrome con il
flag di WebGL disabilitato. Quindi si inizializzano scena, renderer e camera come
visto precedentemente, con qualche dettaglio aggiuntivo. In particolare, per quanto
riguarda quest’ultima, si fa uso dell’oggetto THREE.TrackballControls per la gestione
del mouse nella scena 3D (riga 38), il quale introduce i classici controlli di
spostamento e zoom. Nell’applicazione sviluppata, in assenza di indicazioni precise,
si è optato per una vista prospettica, tenuto anche conto di problemi di parziale
incompatibilità della libreria per la gestione della camera e l’oggetto
THREE.OrthographicCamera.
Un discorso a parte merita la funzione animate (riga 59). A meno di voler operare
con una scena statica (vedi l’esempio precedente) è necessario introdurre un render
loop, ossia uno strumento che invochi il render periodicamente al fine di visualizzare
dinamicamente il variare della scena. La definizione suggerirebbe l’utilizzo del
metodo JavaScript setInterval, il cui scopo in effetti è l’esecuzione di una funzione
data ad uno specifico intervallo di tempo. Ciò nonostante si preferisce l’utilizzo di
requestAnimationFrame. Citando un documento ufficiale del W3C (36):

49. 5. Implementazione
47
[…] Script-based animations are most often performed by scheduling a callback
using setTimeout or setInterval and making changes to the DOM to effect the
animation in that callback. A disadvantage of this approach is that the author of the
animation script has no idea what the ideal frequency for updating their animation
is. Instead, the easiest way forward for the author is to simply call setTimeout with a
very small value, which in practice will be clamped to some minimum time like 10ms
anyway. It likely won’t be the case that 100 updates per second are required for the
animation, especially if the page is in a background tab or the browser window is
minimized. The API described in this document allows script authors to request the
user agent schedule an animation frame update. The user agent is in a better
position to determine how many frames per second to allocate to all of the
animations running in the entire browser. If there are many animations active, the
user agent can select a frame rate such that all of the animations will run as
smoothly as possible. If the page is not currently visible, animations on that page can
be throttled heavily so that they do not update often and thus consume little CPU
power.
La Figura 5.5 dimostra uno degli svantaggi derivanti dall’uso del classico
setInterval. Impostato questo ad una risoluzione temporale di 10ms, si dimostra
inefficiente per la mancata sincronia con il refresh rate del monitor. Operando esso a
60Hz, ovvero ridisegnando le immagini sul display ogni 0.016s, accade che molte
non fanno in tempo ad essere mostrate in quanto rimpiazzate dall’immagine generata
successivamente.
0 .01 .02 .03 .04 .05 .06 .07 .08 .09
0 .017 .033 .05 .067 .083 .1 s
.1 s
Figura 5.5 - Asincronia tra il refresh rate dello schermo e setInterval

50. 5. Implementazione
48
5.3 Cancellazione di un
elemento
Presentata la procedura per l’inserimento di una mesh nella scena, per completezza si
descrivono i passi necessari per procedere alla sua cancellazione.
1 function deleteObject(scene, nameObj) {
2 var delObj = scene.getObjectByName(nameObj);
3 if (delObj != null) {
4 scene.remove(delObj);
5 delObj.geometry.dispose();
6 delObj.material.dispose();
7 return true;
8 }
9 else return false;
10 }
La funzione deleteObject riceve due parametri, ossia il nome dell’oggetto da
cancellare e la scena dove esso è presente. Con riferimento all’esempio rilasciato
dallo stesso autore di Three.js in merito alla corretta cancellazione di un oggetto (37),
non è sufficiente invocare il metodo remove in quanto questo rimuove solamente una
relazione padre-figlio (riga 4). Per liberare correttamente la memoria è necessario
includere l’esplicito dispose della geometria e del materiale.
5.4 Caricamento della funzione
RSM
Nella schermata di avvio dell’applicazione viene chiesto all’utente il percorso su
disco del file JavaScript in cui si trova la funzione RSM la cui struttura generica
ricalca il seguente esempio (come detto in precedenza, il candidato non ha operato su

51. 5. Implementazione
49
questi file se non in lettura):
1 var nInput = 3;
2 var xRange = [
3 [ -1000.0, 669.186719551778 ],
4 [ -1000.0, 149.67270077133412 ],
5 [ -1000.0, 892.8384189584146 ]
6 ];
7 ...
8 function evaluate(xArray) {
9 ...
10 return y;
11 }
Si sottolineano le variabili e la funzione già presentati precedentemente. Alla
pressione del tasto Load viene invocata la seguente funzione:
1 function loadRSMfunction() {
2 ...
3 var url = $("#idLinkInput").val();
4 $.getScript(url, function() {
5 ...
6 this.nInput = nInput;
7 for (var i=0; i<nInput; i++) {
8 ...
9 }
10 ...
11 });
La funzione RSM viene caricata mediante una chiamata AJAX (riga 4), dopodichè si
procede alla popolazione dei blocchi Select variables, Parameters e Domain e
all’inizializzazione dei restanti blocchi del menù di impostazioni.
5.5 Disegno della funzione
Una volta caricata la funzione RSM da visualizzare e impostati i parametri del primo
menù, l’utente clicca il bottone Draw. Esegue ovvero la funzione di Figura 5.6:

52. 5. Implementazione
50
function drawFunction() {
Lettura dei parametri inseriti nei blocchi del
menù di impostazioni di disegno della funzione RSM
Cancellazione di eventuali oggetti già presenti
nella scena
Impostazione della posizione della camera
Disegno di Curve Helper e Axis Helper
draw3DCurve(...)
draw3DCurvePoint(...)
Disegno di griglie, piani di intersezione,
etichette testuali...
Inizializzazione del piano YZ: griglia, camera,
curva
Inizializzazione del piano XZ: griglia, camera,
curva
Inizializzazione dei piani XY: griglie, camere,
contour plot
}
Figura 5.6 - Struttura della funzione drawFunction()
Si omettono per praticità i dettagli del codice dell’intero blocco per focalizzare
l’attenzione sulle funzioni draw3DCurve e draw3DCurvePoint. Sono le porzioni di
codice responsabili rispettivamente della creazione della curva RSM e della nuvola

53. 5. Implementazione
51
di punti della stessa. Si riporta un estratto della prima, l’altra differisce in minima
parte, come precisato in seguito.
1 function draw3DCurve(...) {
2 ...
3 graphGeometry = new THREE.ParametricGeometry(meshFunction,
segments, segments);
4 normalizeZ(graphGeometry);
5 for (var i=0; i< graphGeometry.vertices.length; i++) {
6 ...
7 }
8 for (var i=0; i< graphGeometry.faces.length; i++) {
9 ...
10 }
11 wireMaterial = new THREE.MeshPhongMaterial({ vertexColors:
THREE.VertexColors, side: THREE.DoubleSide, wireframe: false });
12 parametricGeometryMesh = new THREE.Mesh(graphGeometry,
wireMaterial);
13 ...
14 scene3D.add(parametricGeometryMesh);
15 }
L’oggetto THREE.ParametricGeometry (riga 3) riceve tre parametri, il nome della
funzione e i livelli di dettaglio delle coordinate X e Y (ovvero il numero di triangoli
per lato della rete triangolare che sarà creata dall’oggetto). La prima contiene al suo
interno l’esecuzione di evaluate, funzione definita nel file JavaScript caricato in
precedenza e responsabile del calcolo, ad essa viene passato un array contenente i
parametri fissati (i cui valori sono letti dal blocco Parameters) e le variabili per
ognuno dei punti di cui si vuole calcolare la funzione, i vertici cioè di quella che sarà
la rete triangolare. Normalizzata la funzione per contenerla nell’area di disegno del
pannello (riga 4), seguono due cicli necessari ad impostare rispettivamente il colore
dei vertici della rete (riga 5) e delle facce dei triangoli che la compongono (riga 8). Il
materiale scelto per la visualizzazione iniziale (riga 11) e la geometria appena creata
contribuiscono a creare la mesh, la quale infine viene aggiunta alla scena 3D (riga
14).
La funzione draw3DcurvePoint non necessita del secondo dei cicli presentati,
differisce inoltre da quanto descritto nella creazione della mesh (riga 12), dove la
geometria creata mediante THREE.ParametricGeometry viene usata come parametro

54. 5. Implementazione
52
nella creazione di un oggetto THREE.ParticleSystem, responsabile della creazione
della nuvola di punti.
Si sottolinea che draw3Dcurve e draw3DcurvePoint creano oggetti
THREE.ParametricGeometry diversi, in modo da consentire all’utente di trattare in
modo separato la rete triangolare e la nuvola di punti. Egli è libero di impostare la
densità di ciascuno dei due oggetti secondo le sue preferenze, mediante i blocchi
Curve segments e Point density del menù di impostazioni.
5.6 Interazioni con il mouse
Nonostante l’applicazione sviluppata faccia uso dell’estensione della libreria
THREE.TrackballControls per la gestione del mouse nella scena 3D, si è scelto
ugualmente di integrarla con un ulteriore mouse event atto a riconoscere il vertice, tra
quelli che compongono la nuvola di punti che costituisce la funzione RSM, indicato
dal cursore (Figura 4.16). Di seguito la funzione eseguita successivamente all’evento
onmousemove nell’area di disegno del pannello 3D.
1 function mousemove3DfunctionContainer(event) {
2 var projector = new THREE.Projector();
3 var ray = new THREE.Raycaster();
4 ...
5 mouse.x = ...;
6 mouse.y = ...;
7 var vector = new THREE.Vector3( mouse.x, mouse.y, 0.5 );
8 projector.unprojectVector( vector, camera3D );
9 ray.set( camera3D.position,
vector.sub(camera3D.position).normalize() );
10 var intersects = ray.intersectObjects( [particleSystem] );
11 if (intersects.length > 0) {
12 ...
13 }
14 }
Il codice prevede l’uso del metodo unprojectVector per trasformare un vettore
appartenente ad un sistema di coordinate a due dimensioni (la posizione del cursore

55. 5. Implementazione
53
sullo schermo) in uno a tre dimensioni (riga 8). Quindi si crea un oggetto THREE.Ray
che congiunga questo alla camera (riga 9). Infine è sufficiente verificare se questa
retta interseca o meno particleSystem, cioè la nuvola di punti.
Si precisa che nella versione di Three.js utilizzata dall’applicazione (versione 63)
l’oggetto THREE.Raycaster nativamente non supporta parametri del tipo
THREE.ParticleSystem. Ci si è pertanto basati sul contenuto di una segnalazione sul
sito di riferimento (38) per inserire manualmente nella libreria il codice necessario al
riconoscimento di un singolo vertice all’interno di una nuvola di punti.
5.7 Contour plot
Il contour plot presente nell’applicazione fa uso di una libreria JavaScript esterna,
basata sull’algoritmo CONREC (39), scritto allo scopo di fornire un metodo generale
per la costruzione di linee di livello di superfici composte da una rete triangolare
regolare.
L’algoritmo richiede il numero di punti per lato della rete, di livelli del contour e
naturalmente la matrice dei vertici. Di quest’ultima, vista come rete rettangolare,
viene considerato un rettangolo per volta, i quattro vertici che lo compongono,
congiunti, formano altrettanti triangoli. Al centro del rettangolo si assegna il valor
medio della quota dei vertici. L’intersezione di un triangolo con un piano orizzontale
di contour può dar luogo alle seguenti possibilità (Figura 5.7):
a. Tutti i vertici giacciono sotto il piano di contour;
b. Due vertici giacciono sotto ed uno sul piano;
c. Due vertici giacciono sotto ed uno sopra il piano;
d. Un vertice giace sotto e due sul piano;
e. Un vertice giace sotto, uno sopra e uno sul piano;
f. Un vertice giace sotto e due sopra il piano;
g. Tutti i vertici giacciono sul piano;
h. Un vertice giace sopra e due vertici giacciono sul piano;

56. 5. Implementazione
54
i. Due vertici giacciono sopra e un vertice giace sul piano;
j. Tutti i vertici giacciono sopra il piano.
Si itera l’analisi su ciascun triangolo (Figura 5.8), quindi su ciascun rettangolo della
rete.
Figura 5.7 - Possibili intersezioni di un triangolo con un piano
Figura 5.8 - Algoritmo iterato sui triangoli che compongono il rettangolo

57. 6. Conclusioni
55
6. Conclusioni
Il lavoro svolto in sede di tesi rispetta i vincoli posti in fase iniziale. Consente
all’utente di visualizzare una funzione RSM scritta in un file JavaScript e gli fornisce
gli strumenti necessari al suo studio. E’ compatibile con le ultime versioni dei
browser Mozilla Firefox e Google Chrome. Per quanto riguarda Internet Explorer,
come stabilito in fase di stesura dei requisiti, non è richiesta la compatibilità, sebbene
si riveli necessaria nell’ottica di una futura integrazione nella piattaforma SOMO.
Conseguentemente a ciò, seguiranno le fasi di test e validazione per verificarne le
prestazioni e l’usabilità. In caso di esito positivo è destinata ad entrare nell’ambiente
di produzione.
Il capitolo conclusivo racchiude un’analisi delle prestazioni dell’applicazione creata,
le quali in parte influiscono sulle considerazioni successive in merito a possibili
sviluppi futuri della stessa.
6.1 Analisi delle prestazioni
Le seguenti considerazioni hanno lo scopo di fornire un quadro di massima delle
prestazioni raggiunte dall’applicazione creata, nell’insieme dei contesti WebGL che
la compongono. I test si sono effettuati su un notebook avente la configurazione:
 Processore Intel® Core™ i7-720QM 1600 MHz
 Scheda video: ATI Mobility Radeon™ HD 5650 Graphics
 Driver scheda video: 13.251

58. 6. Conclusioni
56
I test sono stati eseguiti nel browser Google Chrome versione 34. I dati relativi al
numero di oggetti in memoria sono stati estratti mediante primitive di Three.js (gli
stessi consultabili dall’utente nella finestra di dialogo Info), i rimanenti mediante lo
strumento Chrome DevTools (40).
Lungi dal voler essere un insieme di casi d’uso esaustivo, si sono individuate otto
possibili configurazioni dell’applicazione in modo da evidenziare le differenze
prestazionali tra le stesse. Esse sono:
1. Impostazioni di default;
2. Impostazioni di default, senza etichette nel pannello 3D;
3. Impostazioni di default, senza etichette nel pannello 3D e funzione RSM
disegnata come nuvolta di punti anziché come rete triangolare;
4. Impostazioni di default, senza Axis helper e Curve helper;
5. Impostazioni di default, senza Axis helper e Curve helper, senza etichette nel
pannello 3D;
6. Impostazioni di default, senza Contour plot ed etichette nel pannello 3D della
sola funzione RSM;
7. Impostazioni di default nel pannello 3D, tutti gli strumenti disabilitati nei
pannelli laterali;
8. Tutti gli strumenti disabilitati nel pannello 3D e nei pannelli laterali.
I dati totali relativi all’utilizzo della memoria sono consultabili nella tabella
sottostante e in Figura 6.1.
Memoria usata
(MB)
geometries vertices triangles particles
configurazione 1 85,7 227 344958 114986 12802
configurazione 2 71,8 187 246942 82314 12802
configurazione 3 72,0 186 244542 81514 12802

59. 6. Conclusioni
57
configurazione 4 85,4 222 344622 114874 10201
configurazione 5 71,7 182 246606 82202 10201
configurazione 6 73,9 172 275718 91906 12802
configurazione 7 45,2 95 100770 33590 12802
configurazione 8 30,3 6 2400 800 10201
Figura 6.1 - Dati riferiti all'uso della memoria nelle otto configurazioni previste
La tabella, oltre alla dimensione totale degli oggetti JavaScript raggiungibili ovvero
il cui spazio di memoria non può essere recuperato dal garbage collector, presenta

60. 6. Conclusioni
58
nell’ordine il numero di poligoni, vertici, facce dei poligoni e punti attualmente
presenti all’interno del frustrum (Capitolo 5.1).
Dai dati si possono ricavare informazioni importanti, utilizzabili anche dall’utente
qualora desiderasse impostare manualmente i parametri di disegno. L’informazione
più significativa deriva dal confronto tra le prime due configurazioni, mediante il
quale è possibile notare quante risorse occupino le etichette, trattate in Three.js come
poligoni e quindi mesh aventi una geometria ed un materiale. La loro disattivazione
nell’area di disegno del pannello 3D consente di risparmiare quasi 1/6 delle risorse
impiegate con la configurazione standard. Il confronto tra questa e la configurazione
4 dimostra che la disattivazione di Axis helper e Curve helper influisce in minima
parte sulle prestazioni generali, se non per quanto riguarda il dato particles, in cui
non si conteggiano i punti necessari al disegno di quest’ultimo. La configurazione 7
evidenza, come previsto, un netto calo delle risorse impiegate dovuto al mancato
impiego dei pannelli laterali. Calo ancora più evidente nel caso immediatamente
successivo, scenario nel quale l’utente sceglie di visualizzare la sola funzione senza
alcuno strumento di supporto aggiuntivo.
Necessaria per una valutazione delle prestazioni raggiunte, si è svolta inoltre l’analisi
dei tempi di disegno dei singoli frame. Un monitor con refresh rate a 60Hz può
ridisegnare sul display 60 immagini al secondo, ovvero una ogni 0.016s. Se la soglia
dei 60 FPS (frames per second) è dunque la condizione ideale, può accadere che
l’applicazione necessiti di maggior tempo per la creazione del frame, provocando di
conseguenza un calo di FPS e una visione delle immagini sul monitor non più fluida.
Usufruendo delle otto configurazioni precedentemente descritte, si è svolta un’analisi
del comportamento dell’applicazione a funzione RSM disegnata, ponendo a
confronto il caso in cui l’utente non interagisca con il pannello 3D a quello in cui egli
faccia compiere a quanto rappresentato nell’area di disegno un rapido movimento
circolare con l’uso del mouse. Per ogni configurazione si è svolta una valutazione
degli FPS su un tempo di 10 secondi, si calcolano pertanto i relativi minimo,
massimo e dato medio, come riporta la tabella seguente.

61. 6. Conclusioni
59
FPS (scenario statico) FPS (scenario dinamico)
min
(FPS)
media
(FPS)
max
(FPS)
frames
min
(FPS)
media
(FPS)
max
(FPS)
frames
configurazione 1 45 38 20 373 34 19 9 187
configurazione 2 48 40 23 393 23 19 8 182
configurazione 3 47 38 21 375 26 19 9 187
configurazione 4 48 39 17 382 25 19 8 192
configurazione 5 51 39 15 389 39 23 10 224
configurazione 6 55 43 19 430 33 20 10 202
configurazione 7 77 55 12 547 44 31 8 313
configurazione 8 146 57 12 557 188 53 10 528
Si evince dunque che l’applicazione subisce un calo di FPS nel momento in cui
l’utente, con tutti gli strumenti attivi, decide di modificare il suo punto di
osservazione della funzione. Dai dati raccolti è possibile concludere che
l’applicazione raggiunge con le impostazioni di default prestazioni in media tra i 20 e
i 40 FPS. Le ultime due configurazioni dimostrano il prevedibile incremento di FPS
dovuto al minor tempo richiesto per il disegno delle scene.

62. 6. Conclusioni
60
Tali risultati invitano ad un’indagine sui tempi di risposta dell’applicazione al fine di
poter in futuro migliorarne le prestazioni avvicinandosi alla condizione ideale
precedentemente esposta. Un punto che merita attenzione è la procedura per il
disegno già presentata nel Capitolo 5.5 dal momento che richiede qualche secondo di
elaborazione. Utilizzando il già citato Chrome DevTools si è deciso di costruirne il
Flame chart (Figura 6.3), valutando i tempi di esecuzione alla ricerca di un eventuale
collo di bottiglia. Si individuano infatti i seguenti blocchi d’interesse:
1. draw3DCurve - tempo di esecuzione 36,650ms;
2. draw3DCurvePoint - tempo di esecuzione 316,104ms;
3. drawAxisLabels - tempo di esecuzione 881,883ms;
4. drawContourPlot - tempo di esecuzione 225,625ms.
Figura 6.3 - Flame chart dell'esecuzione della funzione drawFunction
0
10
20
30
40
50
60
1 2 3 4 5 6 7 8
FPS fixed
FPS in motion
Figura 6.2 - Confronto tra le prestazioni medie delle otto configurazioni previste

63. 6. Conclusioni
61
Emergono in modo chiaro le risorse temporali richieste dalle etichette per poter
essere create e disegnate sulla scena, procedura il cui tempo di esecuzione
contribuisce pesantemente sul tempo totale di 1,99s richiesto dalla funzione
drawFunction. Si rimanda l’analisi dei rimanenti punti al paragrafo successivo, visti
come spunto per uno sviluppo futuro dell’applicazione.
Si precisa che i test eseguiti non hanno richiesto la modifica dei parametri
raggiungibili nel menù di impostazioni, i quali sono stati lasciati ai rispettivi valori
iniziali.
6.2 Sviluppi futuri
Considerato il non trascurabile tempo di esecuzione della funzione drawFunction e
nel frattempo l’impossibilità di interagire con l’applicazione, potrebbe essere
sicuramente interessante uno studio di tecniche alternative al fine di minimizzarlo.
Il web worker (41) è un file JavaScript eseguito in un processo in background.
Introdotto con HTML5, consente all’utente di interagire con la pagina anche durante
la sua esecuzione, rivelandosi quindi una soluzione ideale nel caso in cui una certa
procedura dovesse richiedere molto tempo per essere elaborata. Di contro, il web
worker non ha accesso al DOM. Questa limitazione non ne consente un utilizzo
massiccio in un contesto come quello di Three.js che necessita dell’elemento canvas,
sebbene possa essere utilizzato per svolgere operazioni in background che non
interessano il DOM. Nella fattispecie, draw3DCurve e draw3DCurvePoint,
responsabili della creazione della curva RSM, come precedentemente descritto
ricorrono indirettamente alla funzione evaluate per il calcolo delle quote dei punti
che costituiscono la funzione RSM. Si potrebbe dunque implementare un web
worker responsabile del calcolo che ne fornisca alla pagina il risultato una volta
portato a termine.

64. 6. Conclusioni
62
Ulteriori sviluppi dell’applicazione, nell’ottica di ridurre ulteriormente il tempo di
esecuzione, includono l’utilizzo di un algoritmo alternativo per la creazione del
contour plot.
Da un punto di vista generale, oltre all’incremento del numero di strumenti forniti
all’utente per l’interazione con l’area di lavoro, potrebbe essere prevista la facoltà di
scegliere con quale camera operare, se prospettica od ortografica, e di disabilitare il
filtro antialiasing. Inoltre, una futura versione dell’applicazione non presenta la
restrizione di disegnare una funzione RSM per volta, consentendo anzi il confronto
tra più funzioni.

65. Riferimenti
63
Riferimenti
1. Cristina Silvano, William Fornaciari, Eugenio Villar. Multi-objective Design
Space Exploration of Multiprocessor SoC Architectures. Springer, 2011.
2. Raymond H. Myers, Douglas C. Montgomery, Christine M. Anderson-Cook.
Response Surface Methodology: Process and Product Optimization Using Designed
Experiments. John Wiley & Sons, Inc., 2009.
3. ESTECO - SOMO. [Online] http://www.esteco.com/somo.
4. ESTECO. [Online] http://www.esteco.com/.
5. WebGL User Contributions. [Online]
http://www.khronos.org/webgl/wiki/User_Contributions.
6. WebGL Frameworks. [Online] http://webglframeworks.org/framework-
documentation/framework-list/.
7. Khronos Group. [Online] http://www.khronos.org/.
8. Khronos Group - WebGL. [Online] http://www.khronos.org/webgl/.
9. WebGL Specification. [Online] 01 04 2014.
http://www.khronos.org/registry/webgl/specs/latest/1.0/.
10. Khronos Group - WebGL Wiki. [Online]
http://www.khronos.org/webgl/wiki/Main_Page.
11. Khronos Group - OpenGL ES 2.0. [Online]
http://www.khronos.org/opengles/2_X.

66. Riferimenti
64
12. W3C - The canvas element. [Online] http://www.w3.org/TR/2009/WD-html5-
20090825/the-canvas-element.html#the-canvas-element.
13. Getting a WebGL Implementation. [Online]
http://www.khronos.org/webgl/wiki/Getting_a_WebGL_Implementation.
14. Can I use WebGL. [Online] http://caniuse.com/webgl.
15. WebGL on Internet Explorer 11. [Online] http://msdn.microsoft.com/en-
us/library/ie/bg182648(v=vs.85).aspx.
16. WebGL context errors in Internet Explorer 11. [Online]
http://msdn.microsoft.com/en-us/library/windows/apps/dn457644.aspx.
17. Khronos Group - WebGL Testing/Conformance. [Online]
http://www.khronos.org/webgl/wiki/Testing/Conformance.
18. WebGL Conformance Test Runner v1.0.2. [Online]
https://www.khronos.org/registry/webgl/sdk/tests/webgl-conformance-tests.html.
19. WebGL Report. [Online] http://webglreport.com/.
20. Get WebGL. [Online] http://get.webgl.org/.
21. Khronos Group - WebGL Blacklists and Whitelists. [Online]
http://www.khronos.org/webgl/wiki/BlacklistsAndWhitelists.
22. Three.js. [Online] http://threejs.org/.
23. Three.js on GitHub. [Online] https://github.com/mrdoob/three.js.
24. WebGL Specification - GLSL Constructs. [Online] 01 04 2014.
http://www.khronos.org/registry/webgl/specs/latest/1.0/#4.3.
25. The OpenGL ES Shading Language v1.00. [Online] 12 05 2009.
http://www.khronos.org/registry/gles/specs/2.0/GLSL_ES_Specification_1.0.17.pdf.
26. Three.js documentation. [Online] http://mrdoob.github.io/three.js/docs/.

67. Riferimenti
65
27. Tony Parisi. WebGL: Up and Running. O’Reilly Media, 2012.
28. Jos Dirksen. Learning Three.js: The JavaScript 3D Library for WebGL.
Birmingham : Packt Publishing, 2013.
29. Isaac Sukin. Game Development with Three.js. Birmingham : Packt Publishing,
2013.
30. Three.js official examples. [Online] http://threejs.org/examples/.
31. Three.js examples. [Online] http://stemkoski.github.io/Three.js/.
32. Richard Courant, Herbert Robbins, Ian Stewart. What Is Mathematics?: An
Elementary Approach to Ideas and Methods. New York : Oxford University Press,
1996.
33. Get WebGL Troubleshooting. [Online] http://get.webgl.org/troubleshooting/.
34. Patrick Maynard. Drawing Distinctions: The Varieties of Graphic Expression.
Cornell University Press, 2005.
35. Khronos Group - WebGL Wiki - What is the recommended way to initialize
WebGL? [Online]
http://www.khronos.org/webgl/wiki/FAQ#What_is_the_recommended_way_to_initi
alize_WebGL.3F.
36. W3C - Timing control for script-based animations. [Online] 31 10 2013.
http://www.w3.org/TR/animation-timing/.
37. Three.js Examples - WebGL Test Memory. [Online]
http://threejs.org/examples/#webgl_test_memory.
38. GitHub - Three.js - No more raycast on particlesystems? #3492. [Online]
https://github.com/mrdoob/three.js/issues/3492.
39. Paul Bourke. CONREC - A Contouring Subroutine. BYTE. Giugno, 1987.

68. Riferimenti
66
40. Google Developer - Chrome DevTools. [Online]
https://developers.google.com/chrome-developer-tools/.
41. W3C - Web Workers. [Online] 23 04 2014. http://dev.w3.org/html5/workers/.