Si parla molto WebGL API, un set di funzionalità, mutuate direttamente dalle famose OpenGL ES-2.0, che consentono di utilizzare il canvas come base di lavoro per lo sviluppo di applicazioni e giochi tridimensionali.
In questo capitolo vedremo come trarre vantaggio da questo nuovo set di API attraverso l'utilizzo di una comodissima libreria capace di occuparsi per noi di tutti i dettagli implementativi: Three.js.
Per sperimentare le funzionalità di questa libreria proviamo a costruire un visualizzatore di grafici in 3D che, dati una serie di punti in ingresso produca delle curve che ne rappresentano l'andamento.
Per iniziare scariciamo Three.js e lo posizioniamo all'interno di una cartella 'js' all'interno della cartella del progetto.
Predisponiamo anche un semplicissimo file index.html come segue:
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Un visualizzatore di grafici in 3D</title>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.4.1/build/cssreset/cssreset-min.css">
<!-- poche istruizioni per lo stile del canvas -->
<style>
html{ background: #000; }
canvas{ position: absolute;
width: 969px; height: 544px;
border: 1px solid white;
top: 50%; left: 50%;
margin-top: -272px;
margin-left: -484px;
}
</style>
</head>
<body>
<!-- inclusione della libreria -->
<script src="js/Three.js"></script>
<script>
// qui va il codice del progetto
</script>
</body>
</html>Anatomia di un progetto Three.js
Un progetto sviluppato in Three.js segue un'approccio tipicamente procedurale, per convenzione si
tende a sviluppare il codice all'interno di tre funzioni: 'init','animate' e 'render' così composte:
// da inserire all'interno del tag <script>
var camera, scene, renderer;
init();
animate();
function init() {
// sezione di set-up di progetto
}
function animate() {
// sezione per l'aggiornamento e l'animazione
requestAnimationFrame( animate );
render();
}
function render() {
// sezione di disegno su canvas
renderer.render( scene, camera );
}Il progetto risulta così diviso in 3 segmenti logici:
- inizializzazione
- aggiornamento
- disegno
Ovviamente è possibile evitare di invocare la funzione animate nel caso si stia sviluppando un progetto completamente statico, in tal caso si può accodare la funzione di disegno della scena a quella preposta per l'inizializzazione.
Da notare anche che la funzione animate fa uso del comodissimo metodo requestAnimationFrame che consente invocare consecutivamente la stessa funzione (in questo caso animate) all'interno di un ciclo altamente ottimizzato dal browser.